Worse Lighthouse score due to image placeholders not served in next-gen format

[mcmxcdev]

[xiphux]

Yeah - I'd like to do this, but this is a little less straightforward than the srcset for the main image since the image is embedded into the document, so embedding multiple formats would be transferring a bunch of unused content to the browser.

Switching over to WebP period would mean dropping IE11 support (which I don't feel that bad about), but would also be problematic for Safari on OSX earlier than 11.

[mcmxcdev]

Thanks for letting me know about the reasoning!

I think requiring macOS 11 Big Sur or later shouldn't be an issue. As a fact, I use a Big Sur as my secondary device, and Apple already disallows my device to upgrade to any newer macOS versions. So there is a certain push for newer hardware already anyways.

[xiphux]

That's the sad part about Apple tying Safari to the OS version though - some percentage of people will continue to use older OSX versions without WebP support because they don't want to shell out the money for a whole new computer.

I think if I were to do this it would certainly have to be a major version break where I drop support for IE11 / OSX < 11. Maybe I could provide an option to the preprocessor to fallback to png placeholders if you want to support older Safaris.

[ohbob]

You can serve the 10px placeholder from jpg and that's that. As the rest of images in the image tag will go trough the srcset check and will drop unsupported images.

[xiphux]

I don't think serving the placeholder as jpg would resolve the Lighthouse warning though? The message says that WebP/AVIF are nextgen and PNG/JPEG are not.