A Beginner’s Guide to Image Formats and Compression

4 min read

Guides

Choosing the right format and dimensions for images is critical for good website performance. These guidelines will help you make the best format and sizing choices to ensure a great visitor experience.

In the beginning…
Introducing Image Compression
- Direct Comparison
Lossy vs. Lossless Compression
Choosing the Right Image Format
Choosing the Right Image Dimensions

In the Beginning…

Imagine a digital photograph 1,000 pixels wide by 1,000 pixels tall. Multiply the width by the height and you get 1 million pixels – a megapixel. Therefore if you need to store this image, you’ll need 1 million color data points: one for each pixel.

It turns out that’s about 4 megabytes (MB) worth of data. That’s huge! On a low-speed 10 Mbps internet connection, it will take about 3.2 seconds to download this photo, which is a relative eternity in Internet time.

If we then consider that modern smartphones regularly capture 10, 15, or even 20 megapixel photos – nevermind the advanced capabilities of professional equipment – you can start to see the problem. These images will be enormous! Nobody wants to wait 10 or 20 seconds for a single image to download.

So what can we do about this? And why does it matter to a website content manager?

Introducing Image Compression

Fortunately for us, computers can substantially reduce the amount of storage space required through a technique called compression. Here are some simple ways that we could compress our image:

Identify all of the unique colours in the image, and instead of storing a distinct value for each one, assign each colour a token and store the token instead. This can reduce the storage requirements for each individual pixel by quite a lot.
Take very similar colours and blend them together into a single colour first. Then use the above approach to reduce the size even further. The human eye is quite good at seeing colours, but in a photograph it’s possible to blend some colours together in a way that is hard for us to notice.

Lossy vs. Lossless Compression

If you look closely at the two examples above, you’ll realize that there is an important difference between them. The first method is a lossless compression technique. No information about our photograph is discarded – we are just optimizing the way we store the data.

The second method is a lossy compression technique: when we blend colours together, we are losing detail in our image, and this loss of detail is permanent. There’s no way to get back to the original colours unless we store a lossless version of the image somewhere else.

Direct Comparison

Can you spot the difference between these two photos? It’s hard to tell them apart. But one of these images requires 5X as much space (and bandwidth).

This image is stored in lossless PNG format, and is 5.3X larger than the next image. Lossless formats aren’t very suitable for photographs: the extra preserved details just aren’t noticeable most of the time.

This image is stored in the lossy JPG format. This format provides excellent compression for photographs, and in most cases is indistinguishable from a lossless version, at 1/5th of the size.

A logo stored in the lossless PNG format. Note the crisp edges and rich, solid colour gradient in the zoomed-in area. A lossless format like PNG is ideal for logos, illustrations and other images that have a lot of sharp details and relatively few colours.

A logo stored in the lossy JPG format. Note the jagged, pixellated edges in the zoomed-in area. The colour gradient has been “averaged out” with other similar colours, resulting in a washed-out look. A lossy format like JPG is not a good choice for logos, illustrations or images with a lot of sharp details. Use a lossless format like PNG instead.

Choosing the Right Image Format

Is lossy compression bad? Not necessarily. In fact, it’s the only way to get certain types of images down to a manageable size. Fortunately there are some easy to remember guidelines for making the right choice.

If your image is a photograph, use a lossy image format like JPG for web publishing.
- Store the original, unmodified image elsewhere.
If your image is an illustration, logo, or diagram, or has relatively few colours compared to a photograph, use a lossless image format like PNG.

Choosing the Right Image Dimensions

In addition to selecting the most appropriate image format, it’s also important to resize your images to dimensions that fit your publishing scenario. It’s wasteful to use an image that is 5000 pixels wide if it will only be shown at 500 pixels wide on your web page.

Here are some simple rules you can use to select the best sizing approach:

A typical HD computer screen is 1920 pixels to 2560 pixels in width. When it comes to photographs, most website visitors will not notice the quality difference for images larger than this size, unless the images have some sort of special emphasis (think museums or photographers).
If the published size of your image will be half of the screen size or less, set the dimensions to be 1X to 2X the target published size. For example, if an image will be published at 500 pixels wide as part of a blog post, resize it to be between 500 to 1000 pixels in width. The larger size will allow high-DPI screens to see the extra detail, while providing a good balance of file size to other users.
If the published size of your image is intended to take up the full screen, stick 1X to 1.5X of the published size. That is, on a typical HD screen, size your image to be 1920 pixels to no more than 2,880 pixels in width. Anything larger than this will become quite bulky, and most website visitors will not see any perceptible difference.

About the Author