Image Types & Compression

Common image types

Another hugely important part of optimising our images for the web is to consider the image format.

There are lots of image formats available and I am sure you have came across many, such as:

• jpg / jpeg
• png
• gif
• svg

These are all common, and when downloading an image to use in our projects, we don't always get a choice of what format we want the download to be. There are ways we can change this which we will look at soon.

Why care?

Before we change the image format, we first need to understand what the key differences are, and why should we even change formats at all. There are multiple key reasons why the format is important.

File size

A big one is that different formats have different file sizes. The same image in a different format could potentially reduce the file size, reducing the download time for the end user.

The amount of saving could be little or huge depending on some other factors which we will look at soon.

Quality and transparency

Along with the file size, the image quality can vary between formats. There are considerations such as if the image can support transparency, and the number of supported colours.

Also, we need to think about if we need to scale the image up or down. As we have looked at previously, scaling up jpeg images can reduce the image quality, but other file types such as svg will be unaffected.

Raster images

This happens because both this svg and jpeg fall into two different categories:

A raster image is like a traditional photograph. It is made up of tiny pixels, depending on the size of the image there can be millions of pixels, and each one represents a color.

Since there are so many pixels, they are usually undetectable by the human eye, unless we scale the images up. This is when they start to lose quality and become pixelated, since the display is trying to fit the same amount of pixels into a larger area.

Image formats such as jpeg and png fall into this category.

Vector graphics

Another type is vector graphics. These are created on computer programs and are made up things such as curves, lines and shapes. They can be scaled up and down in size without any loss of quality, and we can also edit existing vector graphics too.

Programs such as Adobe Illustrator, Inkscape, and Figma can create them and they can be saved into formats such as svg.

SVG can also is represented in code. An svg file contains the code which we can directly add into a HTML document, meaning we don’t always even need to link to a file. These clear groups make is easier to decide what format we need to use.

If you need high quality photographs, such as a photography portfolio, raster images such as a jpeg are ideal. Or for graphics, logos, and icons, a vector will often be a better choice, especially if scaling the image.

Compression

Even though the raster category is the better choice for things such as photographs, this does not mean we are stuck with the original file size.

We can apply compression to our images to reduce the file sizes and make them faster for use on the web. Compression can be applied in groups called lossey and lossless:

These relate to how we compress, or optimise our images to try to reduce the file size, and therefore the download speed.

Lossey

Lossey compression, as it sounds, can result in a loss of the original image quality. Since it is more aggressive, it can also lead to bigger file size reductions. This does not mean our images look poor, you may not even notice a quality loss on many occasions, depending on the level of compression.

Once the compression has been applied there is no going back to the original image, it is lost forever.

Lossless

Lossless is considered the opposite and the original image quality is maintained. The compression algorithm can reduce the file size and also reduce meta data thats is stored within the image file. This may include things automatically saved by the camera such as the date, the camera type, the photographer, and so on.

Since this is maintaining the original quality, the file savings can be less than lossey methods.

When to use

So with all of this, which one is best to use? Let’s take a look at some of the more common image formats:

JPEG

The jpeg format is a great choice for displaying high quality photographs or artwork. However, it is not great at displaying text, especially if scaled up. It is a common image format so there should be no problems with lack of support, and many available to choose from.

It is a lossey compression format, we can dramatically reduce the file size if we are happy with a loss of quality. Maybe to send in an email, or maybe an example which does not require huge amounts of detail.

PNG

PNG is also a really popular web image format. One of the benefits is that is also supports transparencies, unlike jpeg. A jpeg must have a solid background. As an example, if the jpeg was used for a header section logo, it would cover up the background. So, if you need an image or graphic on a transparent background, png can be a good choice.

It has lossless compression so the original file is maintained and can be restored, however this can mean less file size reduction is possible.

GIF

You will sometimes find simple images, icons or graphics as a gif format. They are a good choice as they have a small file size, and can also support transparencies too, so we don’t have a background covering things up.

A gif file can also hold animations, making is a good choice if you need to animate. These animations can be created with tools such as Photoshop.

SVG

Over to the Vectors, where svg is a popular choice. This format is not used for photographs, but if you need a computer based graphic, logo or icon, this is a great choice. It is resizable without loss of quality, and also has small file sizes.

Next-gen formats

Some of these image technologies mentioned so far have been around for some time and have limitations. For this reason, some newer next generation image formats have been developed such as jpeg-2000, jpeg-xr, and webp.

Although not as commonly adopted yet, they can offer big file size savings on traditional image formats like jpeg and png.

As a quick overview, jpeg-2000 offers the choice of both lossey and lossless compression, so we can choose which is best for our images. And generally has a higher quality image for the same file size as a regular jpeg.

The jpeg-xr format was created by Microsoft and is also offering the choice of both lossy and lossless compression. It can have high levels of compression, so there is big file size saving to be made.

We also have webp which was developed by Google. Just like the previous two, it also supports both lossy and lossless compression. It can preserve transparencies, and generally has a much smaller file size than traditional file types.

Another benefit is it also supports animations too, so it is a good alternative to gif files.

As you would expect, since these file types are much newer, the problem lies around support in image programs, browsers, and devices such as cameras.

This is why it can be a good idea to have next gen image formats available if the browser supports them, and also fallback images if not. And we will look at how to do this next, along with some tools you can use to convert image file types.