Browse DevX
Sign up for e-mail newsletters from DevX


Reference Guide: Graphics Technical Options and Decisions : Page 10

The decisions you make about file format, compression, palette, resolution, and bit depth effect both quality and download speeds




Building the Right Environment to Support AI, Machine Learning and Deep Learning

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
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% File
Image at 200%
95% 10,153 bytes
75% 4,487 bytes
50% 3,172 bytes
25% 1,870 bytes
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.

Thanks for your registration, follow us on our social networks to keep up-to-date