Handling .webp images if not supported by browser

1

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?

2

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

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

<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” :wink: but that’s only an opinion.

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

Edit: Hmm, checking out caniuse.com there is much more green than I remember…

1 Like
3

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