# Handling .webp images if not supported by browser

**URL:** <https://discourse.gohugo.io/t/handling-webp-images-if-not-supported-by-browser/30283>\
**Category:** Uncategorized\
**Created:** [December 30, 2020, 5:55am UTC](https://discourse.gohugo.io/t/handling-webp-images-if-not-supported-by-browser/30283 "2020-12-30T05:55:12Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![i732](https://avatars.discourse-cdn.com/v4/letter/i/5e9695/32.png) [@i732](https://discourse.gohugo.io/u/i732)\
**Post date:** [December 30, 2020, 5:55am UTC](https://discourse.gohugo.io/t/handling-webp-images-if-not-supported-by-browser/30283/1 "2020-12-30T05:55:12Z")

</div>

How do you handle if media is unsupported by the browser? I’d like to swap it out for a .jpg.

Do you use JS or is there anything in the Hugo SDK to handle this for us?

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [December 30, 2020, 8:51am UTC](https://discourse.gohugo.io/t/handling-webp-images-if-not-supported-by-browser/30283/2 "2020-12-30T08:51:32Z")

</div>

There are plenty of ways, some with Javascript. A quick google brought this gem to light:

> **[WebP with Fallback | CSS-Tricks](https://css-tricks.com/webp-with-fallback/)**
>
> WebP images will save a quarter to a third of the file size over PNG or JPG. Not all browsers are going to support it, but Bruce Lawson shares a way we

You can however work with source sets and let the browser decide, what to show:

```auto
<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

```

By the way, webp is still a new format and only Chrome-based browser display them and other vendors seem to be a bit miffed because it’s Google developed. So I would not “fallback to jpg” but “if supported, then display webp” 😉 but that’s only an opinion.

Another CSS-Tricks link with some ideas: [https://css-tricks.com/using-webp-images/](https://css-tricks.com/using-webp-images/)

Edit: [Hmm, checking out caniuse.com there is much more green than I remember…](https://caniuse.com/?search=webp)

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [January 1, 2021, 8:51am UTC](https://discourse.gohugo.io/t/handling-webp-images-if-not-supported-by-browser/30283/3 "2021-01-01T08:51:35Z")

</div>

Closed on January 1, 2021, 8:51am UTC

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.