#FasterFriday – Image Formats

As part of our #FasterFriday series Karl already talked about making sure your images are appropriately sized for where you’re going to use them, and it’s a great start to making sure your site loads as fast as it can, but we can improve on that by making sure we’re optimising our images even further.  Before we dive in to that though we need to take a quick look at the most common image types used on the web.

At the time of writing, there are 5 common image formats in use on the web. there are more, but these are the one’s you’re likely to use on your sites:

• GIF
• JPEG
• PNG
• SVG
• WebP

JPEG, PNG and GIF have been around for as nearly as long as the web itself; SVG and WebP are the new kids on the block and aim to solve some of the problems with the older formats.  They all have their pros and cons.

GIF is the oldest of the formats and as such was designed with the technology of the era in mind, that means it is limited to an 8-bit colour space, or just 256 colours.  As we’re sure you’ll know, because you can’t avoid them, GIF supports animation and also transparency, allowing the background of the page to show through.

GIFs were an ideal way in the early days of the web to show small bits of animation or even very short video – as video technology back then was very limited and even for low quality and low resolution the file sizes were quite large, much more than dialup internet liked handling.

Our logo works as a GIF, as there’s not a massive range of colours, and it’s a reasonably small file size compared to the original JPEG we created it from (see below).

Everything that comes after attempts to improve on GIF in some way for a particular use case.

Let battle commence!

Unlike GIF, JPEG isn’t limited to 8-bit and 256 colours, it has 8-bits of information for each of red, blue and green meaning it is a 24-bit colour format with roughly 16.7m different colours, but no transparency or animation.  With access to this many colours you can probably guess what JPEG is ideally suited for, photographs.

JPEG is what is known as a “lossy” compressed format, you can adjust the level of compression to reduce the file size and it “throws away” parts of the image data that can’t then be recovered later.   This makes it ideally suited to the earlier days of the web where computers and connections were constrained – there wasn’t a lot of CPU to be decompressing images and there wasn’t a lot of bandwidth for downloading them either, so dialing up the compression was an easy win for speeding up websites.

The problem with JPEG compression is that for images with large blocks of colour you can end up with “compression artifacts” where you’ll notice there are blotches in the block of colour or around edges.  We’ll be covering how best to optimise JPEG images in a future guide.

As you can see from the examples, the one on the left suffers badly from compression artifacts, it’s not all bad news though, we can optimise for quality and save quite a bit over the original image.  We can do a lot better though, especially for logos.

PNG was designed as a successor to GIF, having an 8-bit option as well as a 24-bit option to overcome the 8-bit, 256 colour limit of GIF.   Like JPEG it is a compressed format, but this time “lossless”, meaning all the data that was there originally is still there when compressed, this means it requires more resources on the machine displaying it, but that’s generally not an issue these days.

PNG is great for images with large blocks of colour such as charts, some cartoon styles etc. and it doesn’t suffer from the compression artifacts of JPEG.

Compared to GIF one thing PNG doesn’t have is the option of animation, it does have 8-bit transparency though meaning you can create partially or completely transparent elements in your images.

That’s quite some difference between the optimised and non-optimised versions so make sure you follow us on our social media so you don’t miss our guide to optimising your images.  Even un-optimised, the PNG version is smaller than the JPEG.

SVG isn’t anything like any of the other common formats, it is a vector format, meaning that rather than being the image data itself, it is a set of instructions describing how a computer should draw the image.  For example, this is the KDAWS logo mark, and is exactly what the image files shown below it contain:

This means that no matter how big you want to display the image, you can use the same file, which is great for websites logos where you might use the same image several times in different sizes – you only need to load the file once!  As you can see, it’s quite a lot smaller than the other options, and we could actually optimise it further then that as well.

We could use the same SVG file shown above to cover the side of a building if we needed to.  All three images are exactly the same file, just drawn at a larger size.

SVG are ideal for logos, drawings and some cartoon styles, but not good for things like photographs.

WebP is the youngest of the image formats we’re covering and it’s also the most interesting.  Created by Google WebP is attempting to be the “one format to rule them all” and replace GIF, PNG and JPEG.

WebP supports transparency and animation, as well as lossy and lossless compression, choosing which to use depending on the image.

In terms of speeding up your site, we often see a 10-15% saving in file size over an optimised PNG and 30-50% over an optimised JPEG, sometimes even more.

Most browsers these days support WebP, although there are still some users on older browsers that can’t view them so it isn’t advisable to use just WebP versions of your images.  One technique to ensure maximum compatibility is to give the browser the option to display a GIF/JPEG/PNG or a WebP version, the other is to do it transparently in the background.   We’ll cover this some more in our Image Optimisation feature.

There’s not much in it file size wise with these smaller simple images, but when we get on to larger and more complex images the savings can be significant, especially for mobile users.

As you can see from the above example, you can make quite a saving in download times for your users, just by picking the right image format for the image content – and that’s just with a simple example of our logo, going from 49KB to 3KB.

You can save even more once you start optimising the images for visual quality and download time, so make sure to follow us on our social media so you don’t miss out on our next installment.