WebP: what it is and how it affects website loading speed

Developed by Google, WebP is a modern image format that can deliver smaller files than traditional formats such as JPEG and PNG at comparable visual quality. It supports both lossy and lossless compression, transparency and animation.

How do you convert images to WebP?

Images must be converted before they can be served as WebP. You can use online converters, image-editing software, command-line tools or an automated WordPress plugin. Common options include:

1. EWWW Image Optimizer: optimises newly uploaded images and can convert existing media-library files to WebP.
2. ShortPixel Image Optimizer: compresses images and supports automatic WebP conversion.
3. Imagify: provides image compression and WebP conversion through a straightforward WordPress interface.
4. WebP Express: focuses on generating WebP variants and serving them to compatible browsers.

How should WebP be implemented?

Current versions of the major browsers support WebP. If your audience may still use legacy software, it is sensible to provide a JPEG or PNG fallback.

The HTML <picture> element lets the browser select the first supported source while retaining a conventional <img> fallback. The example below shows the basic structure:

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

In this example, a compatible browser loads the WebP file. If WebP is unavailable, it falls back to the JPEG source and the <img> element remains the final, broadly compatible option.