Improving your visitor’s experience – optimising images

Written by josh on October 12th, 2009

Internet connection speeds vary. A lot. When a visitor from a slow connection accesses a website, they have a limited amount of patience. If the website takes longer than 20 seconds to load, most visitors will stop browsing through the site.

The largest part of most websites are the images, and depending on the format and dimensions of the image the size can vary dramatically for the same visual appearance. When images are saved at their optimal size, the visitor will experience a reduced loading time, and this may increase the likelihood of them staying longer.

To process an image you can use software like Adobe Photoshop, GIMP or Irfanview.

Image Dimensions

Often, people tend to upload the best quality picture they can find, often straight from their digital camera, and then resize the image in the website editor. But all this does is change the size the web browser should display it as. The result is an image that looks terrible and takes forever to load. By changing the physical width and height of the image, by scaling and/or cropping, to the size you want it to be on the site, it will visually look the best.

File Format

The best file format of the image depends on what it’s a picture of. Photographs that have a lot of different colours and gradations are better suited to the jpeg (or jpg) format.  Images with blocks of colours and sharp edges work better using the png or gif formats.

The differences between these is the compression methods they use. The png and gif formats are lossless formats, and so keep the colours and pixels identical to the original. The jpg format is lossy and discards information that it believes the human eye will not detect.

To optimise a lossless format (png and gif), the best way is to reduce the number of colours. When you reduce the colours it is best to allow the software to generate the optimum colour table and don’t allow it to dither, as dithering increases pixel variation and can increase file size (plus it doesn’t look that great on the screen)

To optimise a lossy format (jpg), you can choose at save time the quality to save it as. Basically this tells the computer how much to throw away. Some graphics packages allow you to preview what the output will be. Zoom into or look at an area where there is a sharp line with high contrast and set the quality so it looks ok. To further reduce the file size, you can blur the background of the image slightly, this will remove unnecessary detail, and may improve the impact of the image visually.

Examples

Here are some example images showing file sizes for a logo:

diggyGIF format: 1,405 bytes

diggyPNG format: 1,316 bytes

diggy100JPG format (Quality: 100): 8,741 bytes

diggy80JPG format (Quality: 80): 3,440 bytes

diggy50JPG format (Quality:50): 2,354 bytes

As you can see the PNG format is the smallest size. Visually they all look similar, however if you zoom in it’s a different story:

diggyPNG format

diggy100JPG format (Quality: 100)

diggy80JPG format (Quality: 80)

diggy50JPG format (Quality:50)

The smallest JPG looks considerably worse, and the PNG looks the best. For images like this, PNG and GIF will always be a better option over JPG for file size and image quality.

Now compare a photograph image of a flower:

flower PNG image: 153,076 bytes

flower GIF image: 56,399 bytes

flower JPG (Quality: 80): 17,480 bytes

In this example you can see that the lossy format of the JPG is considerably smaller and still looks visibly as good as the PNG. Note that the GIF looks terrible as that format is limited to 256 colours, so it is limited to block colours only.

This entry was posted on Monday, October 12th, 2009 at 3:55 pm and is filed under Web Design & Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

You must be logged in to post a comment.