This article outlines how to incorporate WebP images into your website and take advantage of the speed, SEO and size benefits this image type offers. If you're a website owner looking to speed up your site by using these methods and others, without the hassle of doing it yourself, Isotropic would love to help. Feel free to reach out and start a dialogue.
Typically, images on websites are delivered in a PNG or JPEG format. The website calls the image from the server, renders it, and displays it.
JPEG is lossy while PNG is lossless -- this means that compressing JPEG files leads to lost data and is irreversible. If done right, this compression leads to pretty sizable file reductions while still looking decent. If done wrong, the image rapidly looses quality. Here's an example:
Lossless compression, which is what PNGs use, is where the image is reduced without any quality loss. This is usually done by removing metadata. You'll see a file size reduction, but not a massive one (pretty logical, think about removing a few lines of data vs whole chunks).
When your site loads, images are usually the largest transfer of data, and take the longest time to load. Addressing image issues fully leads to quicker loading speeds of websites, and higher SEO rankings. Let's take a look at an example: https://faehr.haus/. (We found this site through Awwards and think that it's a great, well designed example of a typical business to consumer website.) When this site loads, the vast majority of content is in the form of JPG images:
Typically, we see a mix of both image types (PNG/JP[E]G) in existing client websites, consisting of at least 50% of the total content loaded for the website, and eating up 1-3 seconds of loading time. This means anything we do to improve the loading speed and minimize the size (and requests) of content transferred from the server to the client will have major positive speed implications for the loading time of our websites.
We consider this a legacy method of displaying images.
There are simply better methods to transfer and display images to clients, which are quicker and smaller.
And, before we continue, lets review why website loading speed is good for SEO:
WebP, created by Google, is another file type (like PNG/JPEG) that most modern browsers will accept as an image format. It offers massive benefits when compared to these legacy methods and will really speed up your website.
The format offers both lossless and lossy styles: what you choose should depend on how you're using the image in your website. (These next stats are directly from Google.) WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% lower than comparable JPEG images at the equivalent SSIM quality index. WebP supports true-color web graphics, XMP metadata, color profiles, tiling, animation, and transparency. This next one is my favorite stat: lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG. Browser support includes pretty much everything modern but Safari.
TLDR; it does everything that JPEG and PNGs can, just quicker, better and smaller...WITH higher image quality throughout. See comparison examples published by Google here.
Take a look: on a recent optimization run, where we converted images from JPG to WebP, we managed reduce some file sizes by 55% using WebP. That will rapidly increase loading times of any website.
If you're interested in if using this format would be beneficial to your website, you can figure this out using cold, hard, data.
Use Google PageSpeed Insights to test your website. Typically, if you're not serving .WebP image files, it'll be the first recommendation on the list. It will even tell quantify the potential speed increase.
To use WebP on our WordPress projects for clients, we use a simple and free plugin called EWWW image optimizer.
It's a super simple tool to incorporate into existing sites, and is free. It uses the server resources to take all existing and future images and convert them into a WebP format. It then replaces all images with their WebP version in browsers that support the format. It's simple and automatic.
We'll also use this tool to compress existing JPGs and PNGs for the browsers that don't support WebP (the most notable browser is Safari).
We'll also usually go a step further and deliver our assets from a CDN. We like using WP Offload Media in tandem with Cloudflare, so the .WebP files are actually stored on an Amazon S3 bucket and pushed to the site from there. This not only speeds things up, but also frees up server resources, meaning we can use a less costly hosting option for many client sites, while enjoying quick loading times.