Detecting Webp Support

Detecting WebP support

This is my solution - is taking around 6ms and I'm considering WebP is only a feature for a modern browser. Uses a different approach using canvas.toDataUrl() function instead of image as the way to detect the feature:

function support_format_webp()
{
 var elem = document.createElement('canvas');

 if (!!(elem.getContext && elem.getContext('2d')))
 {
  // was able or not to get WebP representation
  return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
 }
 else
 {
  // very old browser like IE 8, canvas not supported
  return false;
 }
}

How to detect if webp images are supported via CSS

You can use Modernizr. It is a tool that detect
available features on the user's browser. It is just a script to add in your website, and with it, you can write something like that :

.no-webp .home-banner-background {
     background-image: url('img/banner.jpg');
 }

.webp .home-banner-background {
     background-image: url('img/banner.webp');
}

How to detect browsers supporting WebP and how to serve them WebP pictures?

You can't determine web browser features using Java alone. Java/JSP runs in webserver, not in webbrowser. You really need to use JavaScript for this. You can use the code for this which you already found on the related question. Easiest what you can do, is to let JS check on page load if there isn't already some cookie present indicating that the browser supports WebP and then do the feature detection accordingly and finally set a long living cookie by document.cookie and reload the page by location.reload().

In the server side, you'd just have to check for the presence of the cookie and/or its value by HttpServletRequest#getCookies() in servlet or ${cookie} in JSP before sending/setting the appropriate image URL.

Other than setting a cookie, you can always let JS to send the data as request parameters of an ajax request, but this means that you have to do it on every request or session.

How to check if browser accepting webp images?

The browser only tells the server what it's prepared to accept as a response for the current request it's making.

So if it's making an AJAX request to get some HTML or JSON data to display on the page, then that's what it'll ask for in the accepts header. If the request is specifically for the image (e.g. the request generated by putting an <img tag on the page), then it's that request which will contain the list of acceptable image file types.

If you're trying to decide whether to supply a webp or png image URL in your JSON, that isn't really going to work.

Your alternatives are:

a) provide a link to a single URL which reads the "accepts" header and and then decides whether to return webp content or png content, and fetches the correct content and sets the correct headers to return it to the browser (as if it had requested the image file directly) - this could be implemented by a PHP script for example.

b) provide URLs for both the png and webp options in your JSON, and then when you're displaying the image, use the HTML <picture> tag to provide the browser with both options (plus a fallback for browsers which don't support the picture tag either), and let the browser choose what to use, based on what it knows it supports.

e.g.

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

See https://web.dev/serve-images-webp/ and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture for more info on option (b).

Using modernizer to detect webp support in browser

Modernizr.on('webp', function (result) {
  if (result) {
    // Has WebP support
  }
  else {
    // No WebP support
  }
});

Support WebP using HTML Picture or server side via http headers?

Update Answer (based on comments to the answer):

All-in-all, both approaches would yield similar performance benefits. Which of the two is better depends on your situation (detailed below):

1. Approach #1 (<picture> tag)

The benefit of using <picture> tag approach is that no change on server side is needed. So, in setups where changing server / CDN configuration is an issue - this should do the trick.

The issue with this approach is it's need of updating existing code. So, for sites with a lot of existing pages - this can be cumbersome.

2. Approach #2 (Change image format delivered based on http headers)

The major benefit of this approach is no code change within your HTML.

One thing to be careful about with this approach is - you'll have to be sure your server environment and CDN support delivering different image formats based on HTTP header.

Performance wise - there is no difference between the two approaches. The additional CPU consumed on the server side to detect the header and respond accordingly is generally minimal.

For more details, check out https://www.tezify.com/how-to/using_webp_images/

Original Answer:

Approach #1 (using element) makes better sense. Primarily because as browser's support for webp will improve, the newer browsers will download webp images.

In case of approach #2 (using server side detection via user-agent-string), you'll either have to update the detection code OR improved webp support will not reflect in your image loading solution.

Cross-browser Webp images support

You need to fallback to a supported image format.

Below's example is using the <picture> element and the <source> elements with an img element fallback. The browser will try loading the assets inside the <picture> element from top to bottom until all the "conditions were satisfied" (optional sizes attribute and complex srcset which aren't in the below code) and the content format is supported.

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
  <img src="image.jpg" alt="">
</picture>

---

If the images are used in CSS:

You can use Modernizr's .no-webp class name to target non-support browsers and serve a non-webp format instead:

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

This article has good information you can use

---

Detecting browser WEBP support - A guide by Google (creator of WEBP)

How to load a webp image for a background-img when the browser allows it and when not load a png?

You can check for the browser using the method explained here. From there, you could check for the browsers that have it or not and add the relevant class to the HTML element in question.

So you would have a different class for each background image. For example:

.webp-supported {
  background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.webp);
}

.webp-not-supported {
  background-image: url(/coe/julio-rodriguez/proyecto/public/img/webp/hero-banner.png);
}

---

Related Topics