Want to rewrite according to whether the browser supports Webp format

Support
1

By using [[redirects]] and 200 status in netlify.toml , I was able to display jpg format image in the request to webp.
And I want to switch this , by whether the browser supports Webp format.
What should I do to achieve this aiming? Is “conditions” params useful this situlation?

2

That’s not possible on Netlify end. You’d have to use JavaScript to check this and redirect also using JS.

After you check, you can redirect using JavaScript’s location.href

1 Like
3

@MND Welcome to the Netlify community.

The JavaScript approach seems overly complicated, given that there is a built-in HTML way of doing this using the picture tag. For example:

2 Likes
4

I’m not familiar with JS so it feels difficult, but I’ll try to find out how to do it.
Thank you fo your suggestion.

5

Using picture and source tags seems to be easy for me.
For the time being, I’d like to respond from where possible with this method.
Thank you fo your suggestion.

6

It can be done with JS like this:

(() => {
  var webP = new Image();
  webP.onerror = () => {
    location.href = 'your URL';
  };
  webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();
7

May be worth considering image CDN services like Imgix or Uploadcare. They can serve images in dynamic format including webp and the format can fallback to jpg when browser doesn’t support.