Google notes that images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. Image optimization is therefore very important especially as the speed of a website is now considered to be a ranking index in Google Search Results. In this article, we examine how to optimize images for the web.

Tips for optimizing your web images
Image file formats: The rules and preferences vary but generally, the most widely used are the JPEG, PNG and GIF image file formats.

Here we provide a basic guide to saving images for the web.

Make sure you have saved a copy of the image as a lossless version, meaning that you can come back and edit it again later if needed. For example, .raw, .tiff, .png, .psd file formats to name a few.

If it is a photograph, then select .jpg file format to save the final image. Remember to test several quality and compression settings until you get the perfect balance between quality and load times. If your image editing tool allows the "progressive" setting use that as it will allow the image to "blur" or display gradually as it is rendered on the web instead of line by line. The load time is not improved with the progressive setting, however it does give the image a softer look and feel when rendering on screen. If your editing enables "save for the web" then use this as it will make your image a bit lighter.

If your .jpg image is to be used as a background on the web document then use the Medium or Low compression setting. Otherwise for displayed images keep the compression at High.

If you have the option to adjust the image "quality" then use the settings to make the appropriate change; again, remember to strike a balance between acceptable quality and suitable file size.

File sizes: Depending on the use of the image follow these guidelines for optimal file size:

For background images try to keep the file size around or below10KB.
For banners or header images a file size up to 60KB is acceptable.
For high end photographs try to keep them to within 100KB at an absolute maximum.