dawaltconley / responsive-images

Static site image processing. Currently a wrapper around eleventy-img.
https://dawaltconley.github.io/responsive-images/
ISC License
1 stars 0 forks source link

Support multiple image formats for CSS background-images #6

Closed dawaltconley closed 11 months ago

dawaltconley commented 1 year ago

It is possible to specify multiple formats for CSS background-images using the image-set function. This currently has not-great browser support so it's necessary to provide a fallback. This should be the last format in the list and/or specified by a separate argument.

background-image: url(image.png);
background-image: -webkit-image-set(
  url("image.webp") type("image/webp"),
  url("image.png") type("image/png"),
);
background-image: image-set(
  url("image.webp") type("image/webp"),
  url("image.png") type("image/png"),
);

Someday, this could also replace the min-resolution queries by adding a resolution and help with #5, but there's no easy fallback in that case for browsers that don't support image-set, they would always get fallback images. Currently those browsers are Opera Mini and KaiOS (not counting IE), and for Opera Mini a low-res fallback is pretty fair assumption.