Website Designing - Selecting the right Image Format

Webpage loading time is an important aspect in search engine optimization. Every care should be taken to reduce the loading time of a webpage to make it better optimized for the search engines. Loading time can be reduced by reducing the size of the images used, splitting the content, minimizing http requests, optimizing the code etc.  In this article we’ll see how to minimize the size of the images, which mainly affect the loading time of a webpage.

Selecting the right format helps in minimizing the size of the images. Even though there are many formats for images, the most popular and acceptable ones are JPG, PNG and GIF formats. These formats are supported in most browsers and they also provide the images in low size. Here we’ll see where to use which format by using a few examples.

Without going much into the technical details about these three formats, I am listing out a few useful points that can be helpful on the go.

JPEG/JPG Format:  Lowest size for an image can be attained by using JPG format. But the drawback with this format is that it cannot support transparency.  We use this format for all the images that don’t need transparency.

GIF Format: This format supports transparency and animation. But the drawback with this format is that it supports only 256 colors. So this format is useful for animated images or for the images which do not need much color depth.

PNG Format: This format supports transparency and is also the most preferred format because it provides much color depth to the images. This format cannot be used for animation effects.

Image size comparison:

1. Image which does not need any transparency:

We compare different formats by taking an example. 

JPG Format - Size 9.97KB

PNG Format - Size 71.9KB

GIF Format - Size 34.1KB

  

When JPG format is used, the size of the image is 9.97KB, for PNG format the size is 71.9KB and for GIF format it is 34.1KB. Though there is no difference in the quality of the image in JPG and PNG formats, you can see a little difference in GIF format as it does not support all the colors in that image. So the clear choice here is JPG format which provides the image in minimum size.

2. Image with transparency (when much color depth is not needed) 

  

If the image needs transparency, then we have two choices –GIF and PNG. If the image does not need much color depth, then we’ll see how these two formats fare.

GIF Format - Size 14KB

PNG Format - Size 36.8KB

There is very little difference between these images but there is much difference in the sizes of these images. On good observation you can see the edges of the circle are not that smooth in GIF format because it cannot handle the color shades around the circular image that make it appear smooth. GIF format takes up 14KB, while PNG format takes 36.8KB for this image. When not much precision is needed regarding the quality of the image, the clear choice is GIF format.

3. Image with transparency (with good color depth)

Here we have a simple image, but the colors and shades in the image cannot be constituted within the 256 colors of GIF format. In that case we get the difference in quality of the images as shown below: 

GIF Format - Size 16.6KB

PNG Format - 50.7KB

As you can see, the quality of the image suffers when GIF format is used and hence PNG format is preferred in such cases.

Reducing the size of PNG images:

Most of the times we need to use PNG format because images with good color depth and transparency are becoming more and more common on webpages. In such situations we may sometimes wish to reduce the size of PNG images further. Luckily this is possible and we can still reduce the size of PNG images further. This is because not all the colors supported by this format are required in the images. Reducing the number of colors reduces the size of the image. This can be done by using the posterization effect which reduces the number of colors in an image. To do this, we need a good image editing software. Here I am using GIMP which is an open source software instead of the expensive Adobe Photoshop. You are free to choose whichever software you desire and look for the Posterization option somewhere in the tools. In GIMP it can be found in Colors option as shown below:

 

After you find this option, keep reducing the colors (i.e. keep decreasing the posterize level) and preview the image. Stop at a minimum level where you feel that the quality of the image is still the same as the original. After posterizing to that level and saving, you’ll get a reduced size image.

Here are the two images –original and posterized:

Original PNG Image - Size 50.7KB

PNG Image after posterization - Size 37.1KB

You cannot even spot the difference between the two in terms of quality, but you have difference in the sizes of these images.  The original image is 50.7KB and the posterized one is 37.1KB. 

I hope you understood the difference between these formats with the simple examples shown above. In short, follow the below points while using images in your webpage:

1.    For photographs or any images that don’t need transparency, use JPG format.

2.    For images which require animation, use GIF format.

3.    For images which require transparency but which don’t have much color depth, use GIF format.

4.    For images which require transparency and have good color depth, use PNG format.

5.    When using PNG format, reduce the size of the image using the posterization effect.

6.    When there is not much difference between the sizes of GIF and PNG images, quality being the same, it is always preferred to use PNG format.

7.    When you have big sized images to show in your webpage, use interlacing which gives the user an illusion that the image is loading gradually instead of showing the blank space in the image area (interlacing is a method by which the image decodes incrementally ). Both the above mentioned three formats support interlacing and this option is available when saving the image in that particular format. The user is more likely to wait until the image completely loads when interlacing is used than wait and wonder when the image is going to load in the blank area provided for it.

8.    Interlacing increases the size of the images a little. So it is better not to use it on small images which don’t take much time in loading.

9.    Always use the exact size images as required on the webpage instead of using big images and then scaling them down on the page. Big images take the same time to load even if you are going to show a smaller version of it to the user.

10.    Always keep some good image editing software handy to experiment and decide the optimal sized images. I generally prefer the freeware Irfanview for quick editing and the open source GIMP for complex changes. I never needed anything more than these and I’ve been using them from years.