Optimize Images for Page Speed

One thing is clear we have to learn how to optimize images for the web.

Images are getting bigger and this affects user experience.

According to reports from HTTP Archive images account for over 60% of your website.

HTTP Archive also tracks image size in 2010 the average size was 225kb and in 2019 we are now up to under a meg.

While the number of image requests has gone down in that same period.

Partly this is due to the size of the images. Web design has changed so that we use bigger images.

It's much more common to see full-screen images on sites now.

Let's take a look at some of the performance improvements we can make to images. Our goal is to keep the same image quality while reducing file size.

Cropped Images

Our first improvement is cropping images.

It is important that we only download the image that we want the user to see.

For example, some websites show square images but the actual image is not.

So we are downloading all this extra image and the user does not even see it, as the image is being cropped.

To make this faster we should crop the image before its downloaded.

We can do this by taking a look at the image in the network tab.

This will enable us to see what sort of file it is.

The next thing we can look at is, does the image file still contain metadata.

Image Metadata

Metadata gets added to an image when you take a photo.

To find out if the image contains metadata we can use an online tool like metapicz.

Copying the image URL into the box shows us the image metadata.

Images may contain lots of information on the file that we don't need.

For example what camera was used to shoot the image, which is not useful for the users of your site.

Files with lots of metadata can add an extra 50KB to the image file size.

Data that we don't need. So we should also remove this data.

So now we have 2 improvements we can make to image files:

• Crop the image to be a square
• Remove the metadata

The next improvement is to use better compression to reduce file size.

Using the tool Squoosh can help us make all 3 of these improvements.

Compressing Images

Squoosh is an image compression tool built as an open-source project by Google.

By default Squoosh will remove the metadata from a file, so we will get that improvement.

It also allows us to resize the image.

To do this upload a file to squoosh.

Straight away it will compress the file.

You can see in the bottom left the original file size and in the bottom right the reduced file size.

Before we have even played with the settings the file is much smaller.

The bar in the middle allows you to see the before and after of the image. This is very important as it allows us to check the quality. We want to create an image that has not lost quality.

To crop the image we can select resize image.

We can leave most of the default settings but uncheck “maintain aspect ratio”. Then select contain, which will cut off the edges of the image.

We can then keep it a square by setting the width to the same as the height.

Check how big the image is on your website.

Using the element select tool and selecting one of your pictures. We can then see how many pixels the image is.

So we can adjust the resize height and width parameters to be the same pixels.

There is one thing I want to mention here about retina displays. We want to improve the performance of images but not at the expense of user experience or losing quality.

So we need to make sure that images look great on normal displays and retina displays.

Retina displays need double the amount of pixels, so we need to create 2 images.

For example, one at 282 and another at 564 pixels.

We can then tell the browser to show the best image depending on the display using the srcset attribute:

<img src="https://www.example.com/images/example.jpg" alt="Example Image" srcset="https://www.example.com/images/example@2x.jpg 2x">

There is one more improvement we can make. We can use next generation compression. The one gaining popularity is WebP by Google. Squoosh can also compress using this format.

Now let's look at PNG's.

Compressing PNG Images

The reason to use a PNG is to support transparency. So if your image does not need transparency then use a jpg instead.

For example on Gamez Kingdom, we can see here that they have a PNG and it is a solid image.

Taking this over to Squoosh we can convert it to a JPEG. Doing this will reduce the image down 88% from 244KB to 29.5kb.

So what if our PNG image does have transparency? Going back we can see on Gamez Kingdom they also have a header-bg.png and this is transparent.

If we download this file and upload to Squoosh. The default settings will convert to a JPEG. As JPEG does not support transparency the compressed image has a black background.

To overcome this use the OptiPNG format.

However, we can do better. Selecting the WebP option gives us a smaller file than the original PNG.

One word of warning though. We can see on Can I Use that WebP is not supported by all browsers. The big omission is Safari for Mac and iPhone as well as no support in IE.

So you need to have a fallback using HTML like this:

    <picture>
      <source type="image/webp" srcset="cat.webp">
      <source type="image/png" srcset="cat.png">
      <img src="cat.png" alt="Cat">
    </picture>

The above html will show the PNG if WebP is not supported by the browser.

Final Thoughts: Optimize Images for Page Speed

So we have shown how you can optimize your images on your site by making sure that you:

• Crop images to the correct size
• Remove metadata from the image
• Compress the image using the correct compression

If you have a non-transparent file then use jpg compression to reduce the file size.

Don't forget to support both retina and non-retina displays by using the 2x attribute.

If you have a transparent file then use WebP and fallback to a PNG using the <picture> tag.

We looked at using Squoosh to see the before and after of the compressed image. Using this tool we can make sure that the image has not lost any quality.