secret

  • Download Gist
gistfile1.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
.whatever {
/* Falling back from webp to png */
background-image: image("whatever.webp" format('webp'), "whatever.jpg");
 
/* Falling back from webp to png with image-set dpi negotiation */
background-image: image(
image-set("whatever.webp" 1x, "whatever-2x.webp" 2x) format('webp'),
image-set("whatever.png" 1x, "whatever-2x.png" 2x)
);
}
 
/* Here's an alternative I don't like as much, using the fragment for format info */
.whatever {
background-image: image("whatever.webp#format=webp", "whatever.jpg");
 
/* The format repetition in the image-set doesn't fit so well */
background-image: image(
image-set("whatever.webp#format=webp" 1x, "whatever-2x.webp#format=web" 2x),
image-set("whatever.png" 1x, "whatever-2x.png" 2x)
);
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.