More About Color - JPG's



JPG's are different than gifs. The compression is more complicated, and works better for complex images, like photographs. The format is "lossy", meaning that some of the image data is thrown away, but even so the quality is usually excellent if the source image is clear.

There are 100 levels of jpg compression, though most graphics software will give you choices for high, medium and low file sizes. These photos were all taken with a digital camera at 72dpi, then adjusted and compressed in Adobe Photoshop. Photoshop 5.0 gives you the coice of 10 different compression levels, and either "Standard" or "Progressive". Progressive gives you slightly better compression rates.

First JPG Example

This is saved at the highest quality, and is 127KB, which would take over a minute to download at normal speeds.

The same image saved at a medium level. 33KB, aproximately 15-20 seconds to download. The image quality is still excellent, but we're starting to see some compression artifacts.

Second JPG Example
Third JPG Example

This is saved at a low file size. 23KB, aproximately 10 seconds to download. The compression causes lots of quality degredation at this point.

And finally, here is the same image that I've tweaked a little.. it's now down to 10.5Kb. Not bad, hunh? How'd I do it? Well, there's this little program called WebJPG, by Vimas that costs $30 (and well worth every penny). It can fuction as a stand alone, or as an export filter for PhotoShop and gives you much better control over the compression.

Fourth JPG Example

So how does JPG compression work? I have no idea, and feel no burning need to find out either. It's enough that we to know how to use them, and how to format a picture to get the most out of them.

Applying a single pixel blur to a photo before compressing with JPG can result in considerable savings in file size. It degrades the quality a little, but the difference in barely noticable and the reduction significant. Your visitors will thank you for keeping the images small.



previous next contents