isotropic-2022
Share
Blog
Search
Menu

How We Speed Up Our Websites With WEBP Image Delivery

By James LePage
 on April 5, 2020
Last modified on January 7th, 2022

How We Speed Up Our Websites With WEBP Image Delivery

By James LePage
 on April 5, 2020
Last modified on January 7th, 2022

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.

Introduction: Typical Website Image Setups

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:

9 Free Jpeg Compression Tools With Lossy And Lossless Optimization
Source

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:

Images on this website are .Jpgs

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:  

  • If a page takes longer than 3 seconds to load, over a quarter of users will click away.
  • Google speed scores probably massive impact SEO ranking (Google didn't confirm this).

WebP: What We Use To Replace These Legacy Formats

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.

Supporting browsers: https://caniuse.com/#feat=webp

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.

How We Incorporate It

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.

Settings in the EWWW dashboard to enable WebP

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram