1

I built a landing page with the new WebP image format that significantly reduces image size. Simply like so:

#intro {
  background-image: url("/assets/images/intro-lg.webp");
}

The problem starts with the browsers that doesn't support this kind of format (e.g IE).

Of course, I could do add the same image as .png after the .webp like so:

#intro {
  background-image: url("/assets/images/intro-lg.webp"), url("/assets/images/intro-lg.png");
}

But then it's losing the point, since modern browsers will load both of these images.

Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
  • 1
    https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali – FortyTwo Mar 05 '19 at 15:35
  • @FortyTwo not a duplicate because the answer I'm looking for is a CSS solution. Not an HTML solution – Eliya Cohen Mar 05 '19 at 15:39
  • I am pretty sure it is not possible in CSS alone. You could try detecting features using `@supports`, but it doesn't work in IE. Alternatively you can use https://modernizr.com/ to detect features and work out your css based on that. – Morpheus Mar 05 '19 at 15:46
  • @EliyaCohen didn't flag it as a duplicate, just shared the link as an alternative to solve your problem :) – FortyTwo Mar 05 '19 at 15:47

0 Answers0