Compression plays a vitally important role in many imaging systems by reducing the amount of data needed to store and/or transmit image data. While many different methods exist to perform image compression, perhaps the most well-known is the baseline JPEG standard.

The proper use of image compression can make a huge difference in the appearance and size of your website image files. Nevertheless, it is often misused, partly because there is a real lack of understanding as to what different types of compression are good for. If you do not understand which type of compression to use for different sorts of images, you will likely end up with one of two results: Images that do not look as good as they could, or image file sizes that are much larger than they need to be.

Image compression is a process that minimises the size, in bytes, of a graphics file without degrading image quality to an unacceptable level. The reduction in file size allows more images to be stored in a given amount of disk or memory space, and it also reduces the time required for images to be sent via the Internet or downloaded from web pages.

This article contains everything you need to know about image compression for web or graphic design. I will focus on three file types; those most commonly found in web design. They are PNG, JPEG and GIF. While there are other image formats out there that take advantage of compression (TIFF, PCX, TGA, etc), you are unlikely to run across them in any kind of digital design work.

GIF (Graphics Interchange Format) is a bitmap image format introduced in 1987 by CompuServe. It supports up to eight bits per pixel, meaning that an image can have up to 256 distinct RGB colours. One of the biggest advantages to the GIF format is that it allows for animated images, something neither of the other formats mentioned here allow.

JPEG (Joint Photographic Experts Group) is an image format that uses lossy compression to create smaller file sizes. One of JPEG’s huge advantages is that it allows the designer to fine-tune the amount of compression used.

When used correctly, this results in better image quality and the smallest reasonable file size. Because JPEG uses lossy compression, images saved in this format are prone to “artifacting”, meaning you can see pixelization and strange halos around certain sections of an image. Generally, the greater the contrast in an image, the higher the quality of image that needs to be saved. This results in a an acceptable-looking final image.

PNG (Portable Network Graphics) is another bitmapped image format that uses lossless data compression, and was created to replace the GIF image format. The PNG format was largely unsupported by Internet Explorer for a long time, making it less commonly used than GIF and JPEG formats, although it is now supported properly by every major browser.

PNG files also support palette-based colour (either 24-bit RGB or 32-bit RGBA), greyscale, RGBA and RGB colour spaces. One of PNG’s biggest advantages is that it supports a number of transparency options, including alpha channel transparency.

Choosing a File Format

Each of the file formats specified above are appropriate for different types of images, and choosing the proper format results in higher quality images and smaller file sizes. Choosing the wrong format means your images will not be as good as they could be, and that their file sizes will likely be larger than necessary.

For simple graphics such as logos or line drawings, GIF formats often work best. Because of GIF’s limited colour palette, graphics with gradients or subtle colour shifts often end up posterised. While this can be corrected to some extent by using dithering, it is often better to use a different file format.

For photos or images with gradients where GIF is inappropriate, the JPEG format may be best suited. JPEG works well for photos with subtle shifts in colour, and without any sharp contrasts. In areas with a sharp contrast, it is more likely there will be artifacts (a multi-coloured halo around the area). Adjusting the compression level of your JPEGs before saving them can often result in a much higher quality image while maintaining a smaller file size.

For images with high contrast, especially photos, or illustrations with lots of gradients or contrast, the PNG format is often best. It is also the best option for transparent images, especially those that need partial transparency.

PNG files are often larger than JPEGs, though it depends on the exact image. PNG files are also lossless, meaning all the original quality of the image remains intact. Here is an overview of which file types work best for each type of image:

• GIF

If animation is required.

Line drawings and simple graphics.

• JPEG

Photos, especially without high contrast.

Screenshots, especially of movies, games or similar content.

• PNG

Line art, illustrations.

Photos with high contrast.

Transparency, especially alpha channel transparency.

Application screenshots or other detailed diagrams.

And here is an overview of which formats to avoid for each type of image:

• GIF

Images with gradients.

Photos.

• JPEG

Images with high contrast.

Detailed images, especially diagrams.

Simple graphics (the file sizes are larger).

• PNG

Photos with low contrast (file sizes are larger).

Image Compression in Print Design

While the bulk of this article focuses on image compression in web design, it is worth mentioning the effect compression can have in print design. In my humble opinion, lossy image compression should be completely avoided in print design, as print graphics are much less forgiving of artifacting and low image quality than on-screen graphics.

A JPEG saved at medium quality might look just fine on your monitor. However, when printed - and even on an inkjet printer - the loss in quality is noticeable (as is the artifacting).

For print design, TIFF (Tagged Image File Format) is often the preferred method (if compression is necessary), as it gives options for a number of lossless compression methods (including LZW as mentioned above).

There are several different ways in which image files can be compressed. For Internet use, the two most common compressed graphic image formats are the JPEG format and the GIF format.

The JPEG method is more often used for photographs, while the GIF method is commonly used for line art and other images in which geometric shapes are relatively simple. For this reason, graphic images can be compressed more than text files or programs.

So: Here is the question again. Why is image compression important? File size reduction allows images to be stored in a given amount of memory space and, when optimised, it allows web pages to load faster. Optimised images play a pivotal role in retaining the attention of users. There is no “critical point” up to which compression works perfectly, but beyond this it becomes impossible. Until we meet again, fill your life with memories rather than regrets. Enjoy life and stay on top of your game.

NB: Columnist welcomes feedback at deedee21bastian@gmail.com

ABOUT COLUMNIST: Deidre Bastian is a professionally-trained graphic designer/marketing co-ordinator with qualifications of MSc, BSc, ASc. She has trained at institutions such as: Miami Lakes Technical Centre, Success Training College, College of The Bahamas, Nova Southeastern University, Learning Tree International, Langevine International and Synergy Bahamas.