5

I would like to use the WebP image format in my CSS background-image property. But, since WebP is quite new and still not supported by all browsers new and old, I would also like to add support for a JPEG version of that image as a fallback.

I know I can use the <picture> tag to do this like:

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

And this would make the browser load the first supported format. But can I achieve the same effect somehow using only CSS, since I am setting a background image using the background-image property? I know I can select images based on screen size using @media queries, but how do I load images based on browser support?

I have tried to search for a solution, but could not find one. Let me know if this is a duplicate and the solution already exists.

Thanks.

Sajib Acharya
  • 1,666
  • 5
  • 29
  • 54

2 Answers2

-1

Use CSS @supports instead.

.yourclass {
    background: url("image.jpg") no-repeat center / contain;
}

@supports (background-image: url("image.webp")) {
    .yourclass {
        background: url("image.webp") no-repeat center / contain;
    }
}

Don't worry. Open the inspector and you'll notice the browser won't load both images.

Things to consider:

  • Notice you must declare the webp version after the jpg, or the cascade flow should win.
  • The background-repeat, background-position and background-size params are just for example purpose.
ed1nh0
  • 1,532
  • 13
  • 17
  • 3
    Looked promising, but testing on Safari I find that despite not being able to use webp, it will use the rules inside the @supports part. – Bemmu Jan 29 '20 at 06:25
  • I've also tested on Safari, this answer is not correct. I think `@supports` only tests this CSS rule is available and valid for the current browser, but won't tell you whether the resource can be loaded successfully. – bambooom Mar 06 '20 at 10:35
  • @bambooom what version of Safari did you test with? https://caniuse.com/#feat=css-featurequeries – ed1nh0 Mar 07 '20 at 13:07
  • @ed1nh0 Safari Version 13.0.5 (15608.5.11). I don't mean `@supports` is not supported on Safari. But I agree with the first comment. This @supports feature queries return true for Safari 13, so that the rule `url("image.webp")` is applied, but the webp cannot be shown on Safari. – bambooom Mar 10 '20 at 02:56
-2

Use 2 background-images: one with JPG or PNG the other one is with WEBP the browser will automatically choose the best one.

Found this code on codepen by:Robin Rendle

CSS:

element {
  width: 50vw;
  height: 100vh;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup%402x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.jpg');
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/cust-housegreening-pup@2x-4cf7ada520811031a97bee12c06d9e9367f811bd86255ea60d40aa809cf58801.webp');
}

https://codepen.io/robinrendle/pen/ORmzJY

Galo
  • 1
  • 3
  • 6
    I can confirm that this approach does NOT work. While using this approach, both FireFox and Google Chrome downloads the `.webp` version of the image and works fine. But on Safari (v12.1.1), which does not support WebP, this does not work. Safari still tries to download the `.webp` format and does not show the image. This is the intended behaviour of CSS since when you use multiple `background-image` attributes, the browser always downloads the last mentioned image. Even the codepen you provided does not work on Safari. – Sajib Acharya Jun 20 '19 at 14:32
  • Sorry about that, tested this on current browser the only way is using JS to detect the webp support and add a body class so all elements with background images can be switched to webp – Galo Aug 27 '19 at 07:03
  • you can refer to this link:https://css-tricks.com/using-webp-images/ and this: https://www.freecodecamp.org/news/make-your-website-load-lightning-fast-with-webp-images-cf55c98ac0a2/ – Galo Aug 27 '19 at 07:04