#16 Judicious Beauty: Image optimization for the web

Near and dear to my heart is the topic of “web image optimization”. But the poet in me would rather call it “judicious beauty”.

In web jargon, all of the image files (and others CSS, HTML, etc) that go into making a web page, when their file sizes are summed together, is called the “page weight”. It’s usually expressed in “K”s. Such as 100K. But today’s web, 1MB has become the new average page weight. In my opinion, heavy pages are sloppy design practice. But pages have been getting heavier and heavier since the web was born. And most of that is image files.

If you put too much beauty (decoration) into a site, it becomes bloated and heavy. It then takes too long to load the page in the browser. If it takes longer than 10 seconds, the page will most likely be abandoned before people even see how beautiful it is. Speed is the first barrier visitors must cross. The expectation today is under a 2-second load time.

Web images are usually JPEG and GIF images. More and more PNG images are starting to appear. I’m not a fan of PNG unless you really know how to properly prepare them as they do not necessarily produce smaller image files.

The JPEG and GIFs should be optimized. Using “smush” by Yahoo Yslow addon for either Firefox or Chrome are best. But they do not always produce the best file sizes. This I know from much experimentation.

Your best procedure is to use either Photoshop “save for web…” function or the same function in GIMP. The Gimp requires installing extra addons to get “save for web”. It’s very easy to do and I’ve found it gives great results. After doing this, then run the now compressed images through Yslow Smushit and see if there is any further improvement. You’ll find that about a third of the files cannot be compressed anymore. Yslow smush.it converts to PNGs best. It will reduce files by 10 to 30% typically. It automatically converts and renames GIF and JPEGs by appending a PNG extension to the original file name. That way you won’t accidentally overwrite your original.

How much compression is best? The answer to this depends upon how dominant the image is on the page. Generally, a compression setting for JPEGs of 70 is best. There is no visible difference to the human eye (except on magnified inspection.) For really small images like thumbnails, push the compression to 50. And for large backgrounds try and get down to 30 or less.

The nature of the image will produce surprisingly different results. For example, an image of the blue sky with fluffy clouds that is full screen can be compressed dramatically because of the lack of no hard edges. Knowing these things can help you develop a “strategy” to balance beauty versus speed. Experimentation is a fast teacher.

Helpful Links:
Four Reasons Why to Optimize Web Graphics

Response Times: The 3 Important Limits

Lastly, it’s shown site visitor do not care as much about image quality as you the creative talent do. So always leaning to the side of “smaller and lighter” is best. Slow loading pages are much more irritating than you’d ever guess. Some people actually list slow pages as the MOST frustrating part of their day.

For an example, visit my experimental website http://www.pagepipe.com/