Why WebP Is The Best Image Format For Performance

Before we get into WebP for web performance, I’d like to do a brief history on image formats.

In the early days of the web, GIF was the only real option for images. GIF89a was a quick successor, adding transparency AND animation. What more could we want? Colors, that’s what.

GIF images can only have 256 colors, which is terrible for photos. When browsers started supporting JPGs we suddenly had images with millions of colors, PLUS great file compression! Sure, they were much larger than GIFs, but much MUCH smaller than other options in the image world.

What more could we want?

Lossless compression! When JPGs are compressed for file size, they lose quite a bit of quality. Transparency is another thing. JPG format cannot do a transparent background for instance. JPG simply cannot do transparency.

Which then brings us to PNG, Portable Network Graphics.

PNG can get us relatively similar file sizes with lossless image quality that JPG can, AND have the capacity to do transparency, as well as semi-transparency. For instance, you can lay it over another object and see what’s behind it, and make real drop shadows etc.

The problem with PNG is that the files can be bigger, and in some cases MUCH bigger than JPG.

Which leads us to WebP!

Invented by Google, the intent was to take the best of all the previous image types, such as transparency, file size and lossless compression.

WebP can do true transparency, just like PNG, lossy compression like JPG or lossless like PNG.

It can also do animation like GIF, and has an optional index colour palette like GIF. An indexed palette restricts it to 256 colours, but in the right context that may be just what you want.

The key here is that it has the advantages of all of the other formats.

But, the real magic, and the real topic of this post, is file size.

I conducted a few experiments before writing this post, to show how WebP for web performance, is the best

Below you will see the results of these experiments.

WebP is 88% smaller in size than the JPG exported from my camera, and over 50% smaller than that same JPG compressed to 40%.

For reference, here’s my original image.

• Format: JPG
• Dimensions: 4032×3024
• File size: 1.6M

Here’s a grid of images. Each image is the same dimensions, with file type and size. You can click on each image to zoom in and take a closer look at the details around the edges of things.

4032px File Size Comparison

Look at those file sizes!

It’s super common for people to simply upload pictures from their phones, but this can result in images that have a file size of 1.6mb! However if you use WebP files, that is only 201k file size.

However, there is still something wrong here. That’s why we started with an image that’s 4032px wide, which is far too wide for any site – unless your goal is to offer images that size.

A better size is 2048px, which is twice 1024px, so it will fit nicely in most designs, and look good on a 4k monitor.

So what does it look like when you size them properly before uploading? Let’s see!

2048px File Size Comparison

What are the implications?

The image that’s 2048px wide, saved as WebP with 50% compression is only 89k! That’s a staggering 200% difference in file size!

Of course this is a neat trick, but does it really matter?

Yes, for two reasons.

One – Your page will load incredibly faster with properly sized images!

Let’s do a little napkin math to demonstrate:

Not every image on your site is going to be a giant photo and for arguments sake, let’s say your average image is half the size of my original, 865k.

Now let’s say you have 40 images on your site. That’s 33.7mb in total! The consequence is that your page will load super slow. However, if the images were all WebP format, the total file size would be 1.7 megabytes.

Thats a 30 fold difference!

Two – Simple file storage on your hosting. What would it look like if your storage needs were 30 times smaller?

How to use WebP files on your site:

Method One: Hand Editing

To make my images I used The GIMP, which is a a free image editor.

To make the WebP files I simply went to File -> Export As, and named my image with .webp at the end. And for compression settings, I used the defaults and didn’t change the other settings.

Method Two: WordPress Plugins

There are a variety of plugins that you can use, that will automatically convert your uploads to WebP. These are relatively simple and easy to use:

Converter for Media – Optimize images | Convert WebP & AVIF

WebP Express

Imagify

WebP Converter For Media

ShortPixel

Smush Image Optimization – Optimize Images | Compress & Lazy Load Images | Convert WebP | Image CDN

These plugins do a great job converting your images to WebP, however, whenever converting your images to WebP formant, the best method is to always resize your images before uploading (pushing up an image many sizes larger than you need will make your server work very hard to resize it, and the upload may even fail).

Summary

Given the obvious advantages of WebP there really isn’t a reason to not use it. It makes your site faster and your images are a higher quality. That makes a better experience for your viewers, saves you money on hosting, and actually greatly lowers the carbon footprint of your site, saving the planet! What’s not to like?

If it concerns you that it was produced by Google you’ll be delighted to learn the protocols have been released under a BSD license, so it will always be free.

The post Why WebP Is The Best Image Format For Performance appeared first on Performance Hub.