How to improve your Google PageSpeed score with Webp images

If you’re still serving images in long-time standard formats such as JPEG and PNG then a Google PageSpeed Insights analysis of your site will identify an opportunity to improve your page loading times by serving images in “next-gen” formats. There are several so-called “next-gen” image formats which offer superior compression to JPEG and PNG but in this post we will be focussing on Webp, a format developed by google. Lossless Webp image files are 26% smaller than PNGs and lossy Webp images are 25-34% smaller than comparable JPEGs according to Google. As you’d expect with a compression format developed by Google, native browser support is very good, with Google Chrome, Firefox, Edge and Opera all handling Webp images.

As is usually the case with the modern javascript ecosystem, there are npm packages to help us solve the problem of implementation. The imagemin-webp package allows us to create a simple script to look for older formats in our images folder and convert them to Webp. Note that we’ll also need the original imagemin package. This guide assumes that you’re already familiar with using Node and NPM.

The first step is to navigate to the root of your project where your package.json file is located and install the imagemin packages we need with npm:

npm install imagemin imagemin-webp --savedev

We can then create a new javascript script to utilise our new packages. The following example will look for an images directory and any files inside with a .jpg or .png extension:

import imagemin from "imagemin";
import imageminWebp from "imagemin-webp";
const files = await imagemin(["images/*.{jpg,png}"], {
  destination: "build/images",
  plugins: [imageminWebp({ quality: 50 })],
});

console.log(files);

You can then run the script with node <your-script-name.js> and you may wish to add this to the scripts object in your package.json file. Note your package.json file will need to contain "type": "module" in order to import modules this way.

We then need to make sure we serve the images appropriately in our HTML. As we have already covered, native browser support for Webp is good but there are still unsupported browsers which we should account for. Luckily, the HTML5 picture element allows us to easily provide fallback images for these users. Simply wrap your original img element in a picture element and add a couple of source elements above, one pointing to your new webp version of the same image and another pointing to the original JPG or PNG version:

<picture>
  <source srcset="images/new-version.webp" type="image/webp">
  <source srcset="images/old-image.png" type="image/png">
  <img src="images/old-image.png" alt="Alt text">
</picture>

Once your next generation images are live your Google PageSpeed should improve, meaning faster loading pages, happier users and perhaps even better Google search rankings for your site, all while still providing fallback images for users on older browsers.