DEV Community

loading...

Discussion on: Understanding WebP

Collapse
jmau111 profile image
Julien Maury Author

I would say it's tricky. You can definitely use webP in CSS, but I don't think there's a builtin way to handle webP fallbacks.

I already saw things like:

.myBg {
  background-image: url('myimage.jpg');
  background-image: url('myimage.webp');
}

Does not make sense to me. A better approach would be to use custom classes :

.bg-no-webp {
  background-image: url('myimage.jpg');
}
.bg-webp {
  background-image: url('myimage.webp');
}

You would have to detect webP support with javascript to add the right class.
Nevertheless, the growing support of webp, including browsers such as Safari (14) is encouraging.

Collapse
mitya profile image
Dima

Thx!

Thread Thread
jmau111 profile image
Julien Maury Author • Edited

I've been playing with this recently, I recommend using modernizr to detect support, it adds necessary classes you can use to apply use nextgen and fallback formats in css.

In my case, it adds a webp class to the <html> tag. If webp is not supported then a no-webp is added. Really handy.

Forem Open with the Forem app