Working with a Variety of Image Types

All too often I see designers and developers fall into the habit of sticking with just one file type for their site-wide images. To me, this is terrible practice as doing so will generally lead to slow page load times and high bandwidth consumption. You see, not all images are created equal. Different image compressions have various attributes that make them more appealing for certain Web graphics.

A good heuristic is to use JPEGs for photographic quality images, GIFs for icons and line-art style graphics, and PNGs for when you require alpha transparency.

However, the above is not written in stone, nor will it typically result in the best file type choice every time.

I personally employ the use of Adobe Photoshop’s image optimizer (find it under Save for Web and Graphics from the File menu); and spend a considerable amount of time playing with the various options for each image that my layout requires. The few extra minutes spent here is a trade off well worth your time. It will save your visitors frustration and patience when waiting for your page to load before it hits their cache.

And before I go, here’s some food for thought: It is worth noting that not all JPEGs need to be saved at their maximum quality in order for the graphic to achieve its desired onscreen clarity and aesthetic effect. Check the file size difference between a 300 x 300 px image at 100% quality versus the same image at 75%.