Sizing Images for Websites

Sizing images to use on your website

Digital cameras generally create images with a resolution of 72 ppi (pixels per inch) and use RGB colours – red, green and blue (the three colours of light, which when combined create white). Generally, the file format they are saved in is JPG.

The output size varies from camera to camera, depending on the mega pixel settings available and used to take the photo. Scanners also use the RGB colour mode and the size varies depending on the scanning resolution chosen but the image can usually be saved in a variety of file formats.

The JPG file format and RGB colour mode are great for web images but often digital photos and scans are much larger than can fit on a web page. Although they can be resized using html code, this is not recommended nor is it standard practice and should never be done.

The file size will be so large that they will take a long time to appear on the page even with hi-speed. Consequentially, anyone with a poor internet connection will have difficulty loading the file, and the web-page may stop loading before the image appears, rendering your website user-unfriendly.

Instead, use image editing software to crop and resize your image to the size you want it to be on the page. If your image was supplied to you in CMYK convert the colour mode to RGB. Resave the image choosing the “optimize for web” option if available.

Where possible, particularly if several images are to be included on the same page, try to keep the file size to below 50 kb.

Optimizing images for the Internet

It is good practice to optimize images for the web using the “Optimize for Web” option. Optimizing CMYK and greyscale images automatically converts them to RGB (JPGs & PNGs) or the (RGB) Indexed Color mode (Gifs).

It is possible to use the “Save As” option, however, CMYK images will need to be converted to RGB first: they cannot be saved as Gifs and PNGs using this option and CMYK images saved as a JPG will not automatically convert to RGB. The colours of CMYK JPGs may not look right on your website but more importantly they are considerably larger files than RGB JPGs.

When optimizing images for the web image resolution is also converted to 72 dpi regardless of its original resolution. However, the pixel width remains the same. Check your pixel width before optimizing. Downsize your image first if necessary.