Should I use… webp?

/ Commentary

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 webp.

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 picture and source srcset it just ignores them and uses img.

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 img tag?

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 webp replaces jpg simply.

Add a comment

Required fields marked *. I won’t publish or share your email address.

Comments

Poorchop

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.

Leon

@poorchop

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?