Should I use… webp?
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
Consider subscribing to the RSS feed. That way, you’ll get notified whenever I post anything new. If you’re not sure about RSS feeds, I wrote a guide to RSS.
Intention not tech Previous post
Next post Automating webp production in Jekyll
Add a comment
WEBP doesn’t seem to offer substantial benefits over existing file formats. There’s a good post by a blogger demonstrating that lossless WEBP sometimes ended up increasing the file size when compared to lossless PNG. In my personal experience, the compression introduced by lossy WEBP ends up making images look even worse than highly compressed JPEGs, and I don’t remember file sizes being reduced substantially if at all.
To me, it’s just another one of Google’s layers of complexity that demonstrates how easily they can influence the direction of the web and force everyone else to comply. It’s really unfortunate when I’m doing an image search and I end up with WEBPs, which don’t work with any other piece of software that I use.
I hadn’t considered that, to be honest.
In my experience, webp shaves a lot off image sizes, especially jpgs. If a webp image wasn’t smaller and/or had lost too much quality, I wouldn’t use it 🤷🏻♂️
Yes, it is true you can’t edit webp much in MacOS’s Preview, for example. Is that due to Preview or the format, though?
I’ve also noticed it coming up a lot more in image searches. I guess that’s due increased adoption. In this case, is it problematic that Google came up with the format? It’s not proprietary in any sense, is it?
WebP seems to have about 10% better compression compared to libjpeg in most cases, except with 1500px images where the compression is about equal.
Not worth it IMO. Just use mozjpeg.