We've all suffered through long Web page downloads. Web pages download slowly for two main reasons: small bandwidth and large page file sizes. In the category of file size, often the culprits are the image files.
Image files can be huge. Image files used for high resolution magazine photographs are many megabytes in size. However, many Web producers will tell you they want their pages to be no larger than a TOTAL of 50 to 100 kb!
What do you do? In order to make images smaller, and still look fairly good, compression is used.
There are two types of compression: lossy and lossless. Lossless compression means that the files are reduced in size without loss of data. Lossy compression means that data is lost in the process - bits of information are discarded in the effort to reduce the size of the files.
The two main image file compression techniques used for Web images are GIF and JPEG They are lossless and lossy, respectively (although GIF can sometimes be lossy as well).
GIF (pronounced like "if" with a hard "g") - stands for Graphics Interchange Format. Originally owned and licensed by CompuServe, GIF is a file compression scheme particularly well suited for images made of solid colors with little or no variation in shade or tint.
GIF works by scanning each line of an image and noting only where any change takes place. That's why it works best when there are very few changes in color tone and shade. GIF files end with the extension: .gif
JPEG (pronounced: jay - peg) - stands for Joint Photographers Experts Group. JPEG files are usually best for photographs and other "continuous tone" images. JPEG has a method of compression that is very complicated.
One of the factors it takes into consideration is that the human eye is less sensitive to detail in shadow areas. JPEG allows you to choose from a range of compression settings, on a scale of 1 - 100, with 80 being the normal higher quality setting. JPEG files end with the extension: .jpg or .jpeg
If one type of compression has no loss in data, why, do you ask, would you use the other one? The answer is, that in their respective areas of best use, they offer superior image quality relative to file size. And that's what you need to do when preparing images for the Web: decide how much quality you can sacrifice in exchange for getting a smaller file size. It's called "optimization" and it's largely subjective. Let's look at the differences.
© 2004 Dan Vaughan