Why WebP matters for page performance

WebP consistently delivers smaller file sizes than JPEG or PNG — typically 25–35% smaller. That translates directly into lighter pages and faster loads. Real-world deployments back this up: YouTube measured 10% faster page loads after moving thumbnails to WebP, and Facebook reported 25–35% savings on JPEGs and 80% savings on PNGs.

WebP supports both lossless and lossy compression, making it a practical replacement for JPEG, PNG, and even GIF in most scenarios.

Converting images to WebP

Two common paths exist for conversion: the cwebp command-line tool, or the Imagemin WebP plugin. The plugin integrates well with build pipelines like Webpack or Gulp; the CLI is a solid choice for one-off conversions or small projects.

You control output quality on a scale from 0 (worst) to 100 (best). The quality setting is the main lever most people will touch — experiment to find the sweet spot between file size and visual fidelity.

Using cwebp

Convert a single file with default settings:

cwebp images/flower.jpg -o images/flower.webp

Convert a single file with quality set to 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Convert all files in a directory:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Using Imagemin

The Imagemin WebP plugin works standalone or with your existing build tooling. Typical usage adds roughly ten lines to your build config. Example setups are available for Webpack, Gulp, and Grunt.

Without a build tool, run Imagemin as a plain Node script. The following converts files from an images directory and writes the results to compressed_images:

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

Serving WebP with fallbacks

If every browser you support handles WebP natively, you’re done. Otherwise, you need to serve WebP to capable browsers and fall back to another format for the rest.

Before:

<img src="flower.jpg" alt="">

After:

<picture>
  <source type="image/webp">
  <source type="image/jpeg">
  <img src="flower.jpg" alt="">
</picture>

The interaction between <picture>, <source>, and <img> — including their order — makes this work.

The <picture> element

<picture> is a wrapper containing zero or more <source> elements and a single <img> element.

The <source> element

Each <source> specifies a media resource. The browser picks the first source whose format it supports; if none match, it falls back to the <img> src.

The <img> element

The <img> tag is the safety net. Browsers that lack <picture> support simply ignore the <source> elements and load the image referenced by <img src="flower.jpg" alt="">.

Negotiating via the Accept header

If your server or application can rewrite requests, you can inspect the HTTP Accept header, which advertises which image formats the client supports:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Reading the header and rewriting the response accordingly simplifies your markup considerably — <picture> with many sources gets verbose. Here is an Apache mod_rewrite rule that serves WebP alternates when available:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

With this approach, you must also set the HTTP Vary response header so caches know the image representation depends on the Accept header:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </IfModule>
</FilesMatch>

The rewrite rule looks for a WebP version of any requested JPEG or PNG. If found, it serves that with the proper Content-Type. This enables automatic WebP serving with fairly conventional image markup:

<img src="flower-320w.jpg">

Verifying WebP adoption

Lighthouse can confirm whether all your images are served as WebP. Run the Performance audit (Lighthouse > Options > Performance) and check the Serve images in next-gen formats audit. It lists any images still served in older formats.