The designer's guide to image compression

Whether you’re a designer working for print, the web or TV and film, image compression is a necessary tool that you’ll use on a daily basis. Without it, we’d be emailing files that take up hundreds of megabytes, and browsing the web would be like walking through treacle.

Advertisement

All modern design tools have complex built-in image compression algorithms that abstract the decision-making process from designers. But having a clear understanding of how and why image files are compressed can help ensure your output is accurate and reproduces as you intended. Here we'll walk you through 10 basic terms and concepts of image compression that all designers need to know.

Words: Sam Hampton-Smith

01. Bitmaps

Once you’ve been working with images for a while, you’ll understand there are two fundamental types of image: bitmap and vector.

In very simple terms, bitmap images are like a mosaic of coloured pixels, which when viewed at a distance appear to be a single smooth image - this works well so long as you don’t need to enlarge the image to the extent that individual pixels become visible.

02. Vectors

Vector, on the other hand, is a mathematical set of co-ordinates that describe a series of lines, shapes and fills. Vector images can be reproduced at any size without loss of quality by applying the co-ordinates at a different scale.

As a result, vector images are already very small in size, but aren’t suitable for photo-realistic images as a typical photograph has huge variation in texture and tone over a small area. Bitmap images need to be compressed, vector images (typically) don’t.

03. Lossy image compression

There are two basic all-encompassing methods of compressing files: lossy and lossless.

Lossy works by throwing away information from the original file, ideally where you won’t notice that it’s gone, saving space as a consequence.

04. Lossless image compression

Lossless image compression, in contrast to lossy image compression, retains all the original data, but at a cost: the file size tends to be significantly bigger. Examples of lossy file formats (where information is lost) include JPG, GIF and MP3, while lossless formats include EPS, TIF, PNG and PSD (although both PNG and TIF can also be lossy).

05. How image compression works

There are many different image compression algorithms that each take a different approach to reducing file size. The most simple approach, for example, is called run-length encoding and works by analysing the file bit by bit looking for patterns (quite literally, examining each individual bit of the file - 8 bits in a byte, 1024 bytes in a kilobyte etc).

Where the analysis finds a pattern, such as ten zeros in a row, space can be saved by notating that as 10:0 instead of recording all ten zeros. This type of image compression is lossless, but isn’t very effective in reducing file size.

06. JPEG image compression

The overarching principle is the same regardless of which format you’re using, but different formats use different systems to analyze the file and notate or generate patterns.

JPEG image compression, for example, splits the image into a patchwork of blocks, applying compression to each block using a discrete cosine transform operation.

This is a pretty sophisticated mathematical process, but in simple terms colour information is removed, along with subtle changes in brightness, centered on the areas where these changes will be least perceptible to the human eye. As a result, although it may not be immediately obvious until you compare the original to the compressed version, information is lost. If you over-compress using JPEG, the effect is a patchwork, blocky image.

07. MP3 compression

MP3 compression works in a similar way to JPEG image compression, removing information from frequencies that the human ear is less likely to be be able to perceive. Audiophiles deride MP3 because they feel the nuances of an original recording are lost through the process of stripping out these frequencies to save filesize, and similarly artists and designers don’t like what JPEG does to their images when high compression is applied. Both are necessary to reduce the amount of data being transferred across the web, either as assets to a webpage or app, or sending on to printers.

08. The GIF format

Deciding upon the type and level of image compression to apply has traditionally been further complicated by licensing issues. Back in the 1990s, GIF (Graphic Interchange Format) was a very popular format for web image compression (and remains so today).

The format was developed in the late 1980s, and is limited to a single 8 bits per pixel, restricting the resultant file to a maximum of 256 colours (by comparison, JPEG comfortably supports 8 bits per channel per pixel, allowing for full colour reproduction). GIF also supports binary transparency (a pixel is either transparent or not) as well as multiple frames of image data, allowing for flip-book animation.

09. The PNG format

The problem with GIF was down to the compression algorithm used by for the format. LZW is a lossless image compression technique that was patented by Unisys, who attempted to exercise their ownership by requiring all users of the GIF format to pay for a license. This legal action caused some software vendors to drop support for GIF entirely, and kick-started the development of the now popular PNG (Portable Network Graphics) format.

PNG offers a better level of image compression than GIF, and additional features such as support for 24bits per pixel (3 channels of 8bit colour for each of Red, Green and Blue, plus a whole 8 bit channel for alpha - allowing 256 levels of transparency!).

PNG does not support multiple frames in a single file. As a side note, there is a separate development called APNG that does support multiple frames, but this was rejected as an official extension of the PNG format in 2007 - it’s currently only supported natively by Opera and Gecko-based browsers such as Firefox.

10. How to choose the right format

Thankfully, choosing the right format to save an image with is pretty straightforward...

Step 1

Decide where your image is going to be used. If you’re sending an image to print, you’ll need a high quality format. If you’re publishing to the web, you can get away with a lower quality image (and thus a smaller file size).

Step 2

Decide what size your image will be displayed at. For print, images are generally reproduced at 300 DPI (dots per inch) - which means that for every inch of reproduction size, you’ll need at least 300 pixels of information. For example, a 10" x 8" print will need to be an image at 3000 pixels (10 x 300) by 2400 pixels (8 x 300).

On screen, most images are displayed at 72 DPI, although this is changing with the advent of Retina high pixel density displays. Crucially, images on screen are shown 1:1 with display pixels, so if you want to show an image at 600 pixels wide, you typically only need to reproduce your image with 600 horizontal pixels (not withstanding the retina display complication!)

Step 3

Finally, decide on the most appropriate format for your use and size requirements:

• GIF is not suitable for print or photo-quality images due to its limited colour palette, but it’s ideal for line art or animated web images.
• JPEG is a great fits-all solution, in both print and web applications, but keep in mind its a lossy format so don’t use JPEG as an archive format - save your original image in a lossless format.
• If you need transparency on the web, you’ve only got two options: GIF or PNG. If you need multiple levels of transparency, opt for PNG - but if you just need some pixels to be entirely transparent, GIF may fit the bill.
• For print, TIFF and EPS are both universal formats that can have lossless (and lossy) image compression applied, so if in doubt (and if filesize isn’t too important), choosing one of these two formats will be a reasonably safe bet.

Liked this? Then read these!

• What is Typography? Learn the basic rules and terms of type!
• Master studio portrait photography
• 101 Photoshop tips and tricks