Using WebP images

Posted in Design and Development

In my roundup of the most interesting features announced at WWDC 2020 I mentioned that Safari would now be supporting image aspect ratios. Something else I noticed in their Safari 14 release notes is that WebP would now be supported.

Shortly afterwards, I read a short CSS-Tricks article about WebP support in iOS 14 and I sprung into action!

In the article, Geoff Graham mentions:

WebP is a super progressive format that encodes images in lossless and lossy formats that we get with other image formats we already use, like JPEG, but at a fraction of the file size

It has been around for a long time (Chrome was first, with partial support in 2011 and full support in 2014) but, now that Apple are on board, that’s all the major browsers covered.

So I converted the image on my About page to WebP, taking Geoff Graham’s advice and adding it as an enhancement with <picture>, rather than the default. I don’t want any current Safari users seeing just the alt text!

<picture>
<source srcset="/assets/img/martin-underhill-tempertemper.webp" type="image/webp">
<source srcset="/assets/img/martin-underhill-tempertemper.jpg" type="image/jpeg">
<img src="/assets/img/martin-underhill-tempertemper.jpg" alt="Martin Underhill of tempertemper Web Design, holding a cup of tea and looking to his left, smiling." width="800" height="450">
</picture>

Differences

It’s worth mentioning that WebP images don’t compress the same way as JPEGs do, so there’s no way to do a proper like-for-like comparison. Exporting to WebP and compressing the image until a fraction before I lost too much gave me an image file size of ~15k smaller than the equivalent JPEG, so that’s good.

But if I’m going to give you some examples, we need some kind of control here, so I’ve used file size. I’ve exported the same image as JPEG and WebP to a file size of as close to 52k as I could get (which was the most compression I was happy with for the JPEG).

Here’s the JPEG:

An image of Martin Underhill at around 50 kilobytes in JPEG format

And here’s the WebP:

An image of Martin Underhill at around 50 kilobytes in WebP format

Not a huge difference, but let’s take a closer look, first at the gradient where the light hits the solid-colour wall behind me:

The gradient from the wall behind me in my About page picture, first showing how it compresses as a JPEG and then with WebP. The WebP gradient is much smoother, subtler and less blocky.

To highlight the gradient, I’ve used greyscale and darkened it; the JPEG gradient is blocky, where the WebP gradient is much more gradual and subtle.

Next, let’s have a look at how each format compresses a face. I’d like to apologise in advance for two things:

  • In order to show how a JPEG compares to a WebP, I’ve had to use a PNG, so the image isn’t small: it weighs in at 353K, which is the sort of image size I’d normally avoid like the plague
  • The example uses my About page picture again, so you’re going to have to look at my ugly mug…
Two zoomed-in crops of my face, first the JPEG which shows more detail, then the WebP which shows slightly less detail.

The JPEG image is more defined, showing more detail, where the WebP (mercifully!) smooths over some freckles and wrinkles.

Is WebP better?

You can get good file size benefits by using WebP, but the compression is visually different to JPEG. In the example in this article, gradients of colour (like the corona of light shining on a solid-colour wall) are much smoother, with fewer artifacts, but there’s a loss in detail in other areas.

So in some ways WebP compression is better than JPEG, in some ways maybe not quite as good. As usual on the web: it depends!

Be sure to export your images in various formats in order to get the right balance between detail, smooth colours and file size.

WebP supports good compression and and alpha (transparent) channel, where with the options we currently have, we’ve got good compression (JPEG) or an alpha channel (PNG).

Once iOS 14 and macOS 11 roll out this autumn, WebP will be an option for all browsers, whether it’s the right choice or not. In the meantime we’ve got the <picture> element to offer WebP as a progressive enhancement.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Text snippets on Apple devices

    I’ve been using Apple’s built-in Text Replacement instead of TextExpander for a while now. It’s pretty basic, but it’s free and it does the job.

  2. The right way to use break tags in HTML

    Break tags are often misused. I’ll demo some markup patterns to avoid them, and reveal the one and only legitimate use case I can think of.