WebP Images

Brighton pier in the sun

Hi, I am Brighton Pier. 👋

This image of me is 168kb in JPG form and 36KB in WebP form (that's a 78% saving in size). See where you can use WebP here. So far support isn't great, but it is set to get better. In Chrome, my image loaded and was 34.9kb, and in other browsers my fallback JPG was 164kb. The fallback image was made possible by the <picture> and <source> elements, shown below:

<picture>
    <source srcset="img/pier_small.webp" type="image/webp">
    <img src="img/pier_small.jpg" alt="Brighton pier in the sun">
</picture>

If browsers do not support the <picture> element, they will still be able to use the fallback image.