DEV Community

Discussion on: Understanding WebP

Collapse
mitya profile image
Dima

Can i use webp for background-img? With fallback to jpg? Like a picture/source/srcset in HTML?

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
mitya profile image
Dima

Thx!

Collapse
henrihelvetica profile image
Henri Helvetica

As Julien mentioned, this could be tricky. Last I recall, you can / should be able to have multiple background images in css. So I would possible try listing the image URLs w/ the webp 1st, and jpg 2nd as a fall back. I would check on that to make sure but I believe that should work as long as you have format support. But there are some issues here. You have a potentially unnecessary request. In Julien's case, if you're using JS to swap, which is more JS to detect + swap just 1 image. Also, something potentially worth considering, if you're really after a small size: depending on how sharp you want to the bg image, you can add a super slight blur to a jpg image, and by design, the jpg will drop in size (jpg property).