30: Web Images: How good is "good enough?"

"Image quality" isn't even in the top 10 most important functions or features of a website. I see web design and stage set design as having a lot in common. It's the view from the back-row theater seats that count --not the up-close details.

Tools for image processing include: Adobe ImageReady --which comes with most versions of Photoshop, next is Photoshop and then Ubuntu GIMP. All of these programs have "Save for web" functions. This gives a much more compact file size than regular JPEG files. There are other programs, plugins, and online methods to improve file sizes. Note: GIMP requires a plugin to get "Save for web" features. Check your Linux "repository" for GIMP extras.

How good is good enough?

The person who cares the most about image quality is the owner or designer of the website, NOT the viewers. Viewers put this at the bottom of the list. Still the image needs to be recognizable and readable! Everyone has to decide their guidelines --but here are mine: make the image file sizes as small as possible in weight. Images are the main hogs of bandwidth.

Settings should not be arbitrary or rigid.

Some photos will compress tighter than others. Eventually, this become intuitive. Some images work better as GIFs than JPEGs --or better as PNG. It requires some experimentation. You soon learn the human eye is quite capable of discerning shapes and forms. The more random the image like water, soil, grass, etc, the more it can "tolerate" lossy compression.

Fancy Optimization Tools
There are two tools online extremely useful for optimizing images but are only available for Firefox as addons. Yahoo!s Yslow All Smush.it
and Google PageSpeed. Both require the installation of FireBug addon first.

JPEG Compression Guidelines for Speed
Usually, for photo images, JPEG compression is best. JPEG allows you to select a setting while previewing the image. I consider 70 high and is the quality I use for "portfolio grade" images. But the standard seems to have crept up to 85 or higher settings for all images. In other words, essentially little optimization at all! Try and resist this foolishness. It just doesn't buy anything in better quality. For normal images, I use a setting of 50. Smaller, less than 100-pixel-square images, can be pushed down to a setting of 30 --or switch to GIF. And for large backgrounds, with blurry depth of field effect, I drop down between 1 and 10. This causes noticeable image degradation but is only for "effect."

Guidelines for GIF Images
GIFs are compressed using the number of color represented (color bit depth.) You can really tweak some images hard using GIF compression especially text and illustration images. Plus in ImageReady, there is a "lossy" setting that can do some "serious damage" in a positive or negative way.

All Compression Techniques Require Good Judgment

I squeeze too hard for some designers tastes. That's because I realize the visitor doesn't care much. But they care intensely about page load speed. Beautiful doesn't count as much.