Is your feature request related to a problem? Please describe.
- Lighthouse rightfully suggest to provide alternative modern image formats like webp/avif/.. of images to cut size and improve web site/app performance for modern browsers
- Image in question is, or should also be preloaded (E.g. Hero image set as CSS background + preload)
- Article by @yoavweiss has no info on how to deal with preloading images when handling several formats, or status of support for it
Given AVIF/JXL is coming, providing multiple image formats for best web performance is only going to become more common, so article should somehow address this use case as it is quickly becoming best practice.
Describe the solution you'd like
From what I can gather preloading can't be done for cases like this yet, so what the article could do is:
- Own section for "Preloading multiple image formats?"
- Short section on status of this, possible links to ongoing work and suggestions for what to do in the meantime
I guess the best here for now would be to recommend users to avoid using images in external CSS file, and as support for image-set() is limited* avoid solving this with CSS at all for now. Instead as a pragmatic workaround, not use preload but inline in html as <picture> so browser can decide on image as soon as possible without having to wait for loading CSS and other assets first.
* type() not supported by Safari yet, and Chromium has several other limitations: https://caniuse.com/?search=image-set