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 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, 2 to 3 MB 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 a lot 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.
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. It will reduce files by 10 to 70% typically.
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://pagepipe.com/
