webp is a an image format that produces good quality images that are significantly smaller than
jpg. If you want to add them to a web page, they work in the same way as any other image:
<img src="image-url.webp" alt="Alternative text">
And you are thinking “Great! I will now use webp images” because they’re easy to produce with a tool like Squoosh and they will make your website leaner. Images and fonts are the two assets that add more weight to a page than any other.
However, not all browsers support
webp and may simply behave like the the image doesn’t exist if you try and use it – i.e. display the
alt text instead (yet another reason to ensure you use
alt text, incidentally).
So you’re maybe thinking you shouldn’t use
Well, no. You can in fact use the HTML
picture element to say to browsers: if you can handle
webp serve it up, if not use this fallback instead (which will be one of traditional formats, such as
jpg). The HTML will look something like:
<picture> <source srcset="your-image-in-webp-format.webp" type="image/webp"> <img src="your-image-in-jpg-format.jpg" alt="Alt text" class="bunch of classes"> /* Note that all additional attributes, such as class and alt, added to the img element, will apply to the source image. */ </picture>
The nice thing about
picture is that if your browser doesn’t understand
source srcset it just ignores them and uses
That’s great, but it does mean you need to prepare two images every time you want to add just one to your web page. This soon becomes very tedious. It’s possible to have a build process in place that automatically does this work for you, or use an external service like Cloudinary. That’s OK if you can afford it/have the requisite technical knowledge, but seems laborious just to serve an image.
So maybe the question should be can I use
webp instead of
jpg in a simple
That brings us to a Can I Use? judgement And I think the answer is probably no, but it may depend on who your users are.
By my calculation, at the time of writing around 7% of users won’t be able to see
webp images. In and of itself, this is probably too many.
But we can drill down into who these users are, and see that most of them are using Safari desktop, along with IE. The interesting thing is that 7% becomes quite a bit lower if your Safari desktop users have installed MacOS Big Sur.
So if you’re happy making that judgement, fill your boots with webp.
The other thing to consider is how badly
webp fails. When a browser doesn’t understand
display: grid it will still display the HTML and style it using any other CSS you throw at it. When
webp images fail, they don’t display at all. Just displaying
alt text is OK for an emergency, but not a good example of graceful degradation.
Could be a long wait until