WebP support detection with @supports and @media

Jan Hohner — Sun, 19 Apr 2020 10:31:50 +0000

While developing Royal Ur (https://royal-ur.com) I remembered the Audit feature in the Chrome Dev Tools. I fixed a couple of things and then came across the following hint: "Serve images in next-gen formats".

I decided that it was time to properly learn about WebP, a file format developed by Google in 2010, which is now supported by Chrome/Chromium, Edge and Firefox. As I wanted to support all the browsers not supporting WebP, my first idea was to use the CSS @supports feature. Turns out there unfortunately is no @supports(webp).

JavaScript feature detection was not an option either. I did not want to rely on JavaScript for this and JavaScript still blocks rendering in browsers.

After more searching I came across https://engineering.naukri.com/2015/11/optimizing-css-background-images-using-webp/. They suggest using a combination of @media and @supports to detect features that were added to browsers at the same time or after support for WebP was added. Their approach unfortunately has two drawbacks: a) Firefox does not get WebP but does support it b) Safari gets WebP but does not support it.

So with all this information and the great list of browser hacks at http://browserhacks.com/ I set out to write WebP detection in CSS. This is the result:

I hope this is useful for somebody. Let me know what you think!

DEV Community: Jan Hohner

WebP support detection with @supports and @media