Junior Developer Focus: Image Optimisation

If there’s one skill that junior developers could improve more than any other, it would be image optimisation. This is an often-neglected part of web development, so I will cover it in good detail today.

Compression

Each file format uses an algorithm in order to compress an image, to reduce file size. There are two different types of compression that can be used, Lossless and Lossy.

Lossless

This means that the quality of the image stays the same, despite the image being compressed. No data is lost from compressing. However, you can still decrease the quality of the image by using your image editing software incorrectly – For example, by decreasing the number of colours used.

Lossy

This means that the quality of the image decreases from being compressed. Data is lost and cannot be recovered. You often need to find a good balance between compression and quality.

Formats

GIF / 8-bit PNG

This is a lossless format that can use up to 256 colours. You can further reduce the file size by decreasing the number of colours, but the quality of the image may be reduced. It’s up to you to find a good balance.

The compression used for these formats work best when there are a lot of pixels next to each other (on the same row) with the same colour. For example, if you used a gradient from top to bottom, this would compress fairly well. But if it was from left to right, it would not.

This format is not a good choice for most photos, as photos often contain a lot more than 256 colours and rarely have the same colour pixels all in a row.

It’s also not good for images that contain gradients – mostly because gradients use a lot of colours. However, a small basic gradient may still turn out okay.

Use this format for icons and logos that have solid colours and that don’t use too many colours.

JPG

This is a lossy format. It supports millions of colours and you can choose the compression / quality ratio when exporting from your image editing software.

The compression works best with images that do not have a lot of solid colour. For example, photographs. Solid coloured sections of an image will look blurry and blocky when you start to increase the compression. I’m sure you’ve seen photographs or logos on the internet with these characteristics.

Sections of an image with gradients and photographs will be able to withstand much higher compression before you can perceive any quality decrease.

You should not use lossy formats such as JPG as a working file, only as a final exported file. Otherwise you will experience a progressive loss of image quality every time you export and re-open the file. You should always save in your image editing software’s native file format.

PNG 24 / 32

This is the same as the 8-bit PNG format, but it supports more colours. Because of this, the file sizes are usually larger.

For small images, you usually won’t notice much of a difference in file size between 8-bit and 32-bit. In fact, 32-bit PNGs can be smaller in file size. But when the images become a few hundred pixels larger, you will notice a large difference.

This format is used when you have an image with a lot of colours that also requires transparency. JPGs don’t support transparency and PNG-8s only contain up to 256 colours.

Transparency

There are two options when selecting transparency, Index and Alpha. Each pixel of a PNG has a colour value associated with it, the type of transparency used will determine how the transparency is applied to the relevant pixels.

Index

With index transparency, the pixel now has the option to be fully transparent. It’s a very simple way of adding transparency. Each pixel has either a solid colour value or is transparent.

This is used when an image / icon has a solid border with no anti-aliasing between the coloured pixels and the transparent areas.

When exporting the image with index transparency, you get to choose 1+ colour to make transparent. For example, white could be transparent. However, what about the pixels that aren’t exactly #fff, such as #fefefe? They will not be made transparent, but will look white. You would need to manually add that specific colour and all other similar colours to the list to be made transparent – which can be a long, inaccurate and tedious job. Have you ever seen images / icons with little black or white pixels around the edges? This is why.

Alpha

With alpha transparency, each pixel has a colour value and can have a level of transparency as well. For example, a pixel may be red and be 50% transparent. Or it may be green and be 90% transparent.

This makes images with anti-aliasing look much better.

This is often used when an image needs to sit on top of a gradient or another image. For example, you may have a scrolling banner with an image of a dog, perhaps with a drop shadow. You may want the banner to have a fixed blue background with a slight gradient from one corner to the other. In order to avoid the white / black pixel issue, it will need to use alpha transparency.

DPI

An image may have a DPI value associated with it. You’ll often see this when creating a new image in your image editing program. This is just an attribute and is only used for printing. It does not affect the quality or size of the image (except when printed) and it can be changed at any time.

SVGs

The previously mentioned formats are all raster formats. This means that data is stored for every pixel of the image.

SVGs are a vector format. Instead of determining the colour of every pixel, SVGs contain XML that specify shapes, their coordinates, stroke thickness, colour etc. Open up an SVG in notepad and you’ll see the code.

You should use SVGs instead of PNGs when you can. SVGs can be very suitable for logos and icons. The main advantage is that it can be scaled up or down very easily without losing quality, where raster formats would become pixelated.

An SVG’s XML can be inlined directly on the page. You can also use javascript to do this. You can have CSS-like properties with hover states and animations. It’s much more flexible than a PNG.

Sprites

Having a large number of small files to download can slow down a website faster than having fewer, larger files. So some developers like to combine all of their smaller icons into one file. This is called a sprite or sprite sheet.

A sprite is used as a background image, with the background-position value determining which icon will appear. There is usually some spacing between icons, but with PNGs and SVGs, this doesn’t increase file size significantly or at all.

This was used extensively in the past with hover states. If a hover state icon is separate from the normal state, then the browser attempts to load the image only when the user performs the hover. This results in a delay to the hover state appearing as the image loads. To avoid this, developers combined hover states and normal states into one image, then used negative background positions to switch the images on hover.

Conclusion

That’s all you need to know to produce images for the web. Choose the correct format for the image. If in doubt, experiment. Try multiple formats and see what’s best. No more excuses for 32-bit PNG photo banner or a blurry JPG icon.