To reduce file size, file storage formats use mathematical formulas to analyze and condense the image data they contain. This process is called compression
Due to the bandwidth limitations of the Internet, files must be small in order to be viewed by the audience in a reasonable amount of time. Graphic files are notorious for their large sizes -- to view them in their original format would require far-too-much time over a standard Internet connection.
In order to display images in a brower in a reasonable amount of time, Web-based graphic file formats use aggressive compression schemes to transform large images to small file sizes. Compression schemes are used to re-encode data into more compact representations of the same information. In other words, fewer words (or bits) are used to say the same thing.
There are two types of image compression: lossy and lossless. Lossy compression creates smaller files by discarding some information from the original image. It removes details that are supposedly too small for the human eye to differentiate. Lossless compression, on the other hand, never removes any information from the original file.
Lossy compression creates smaller files by discarding some information from the original image.
Lossy compression removes image details that are (in theory, at least) too small for the human eye to notice. PEG uses lossy compression. The JPEG compression scheme discards image data to reduce file size.
Hold on just a minute! You're designing wonderful Web pages and you want the highest-quality images, yes? Well, yes and no ... What you want is the best tradeoff between image quality and file size. For photographs and complex colored artwork, JPEG compression provides a great way to achieve that tradeoff.
JPEG compression is based on the fact that our eyes are sensitive to certain kinds of visual details but not others. JPEG analyzes the image and throws out details that it deems unnecessary. How much it throws out is your choice.
Since JPEG compression was designed for photographs with smooth continuous tones, it does an excellent job with these types of images. It does a poor job, however, with images composed largely of solid color blocks and lines; it tries to shade them and smooth them out, resulting in ugly artifacts.
When saving an image as a JPEG, most software allows you to select a quality level. The higher the quality, the less compression and image degradation, but the higher the file size. As always, you must find the right tradeoff between image quality and file size.
|Image at 100%
|Image at 200%|
|Note: For most purposes, the 75% quality image would be completely adequate. And it provides a significant file size savings more than half over the 95% version. The 50% quality image is not bad either, although the artifacts are beginning to become noticeable around the edges of the leaf. The 25% quality image is clearly artifact-rich and inferior. |
Remember, JPEG compression is lossy. Every time you resave an image in JPEG format, you irretrievably lose image data/quality! Therefore, if you intend to reedit an image, be sure to save your master image in a lossless format, such as the native format of your image editing program.