Webp images when browser is ready and jpg as fallback

[mFo]

Is there a way to set up Blocs to use webp images when the browser can handle them and otherwise fall back to jpg? Like mentioned here for example:

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg">
</picture>

Preferably without using code blocks, but perhaps not possible?

[Jerry]

You might want to read this thread started by @Flashman not long ago:

WebP and the Safari question

Nearly all the major browsers have compatibility with WebP images, which offers similar or better quality than Jpg at significantly smaller file sizes that will facilitate faster page loading. Given some upcoming changes with Google in May that could become especially important. In one test I ran, a large image file saved for web as Jpg was reduced from 903kb to just 357kb as WebP and I have little doubt that could have been squeezed further without loss of visual quality. The big nuisance h…

There are various solutions mentioned there.

[Flashman]

Yes there is a lot more information in the other thread. At this point the only people who have to rely on Jpg are Safari users on Catalina and earlier. At a guess that is around 2-3% of desktop web browsers at most. It may be a bit higher for mobile if there are significant numbers of iPhones stuck on older OS versions. Not many of us keep a mobile for 5 years these days.

Up to now I have stuck with Jpg but the case for being limited to Jpg grows weaker every day. Blocs could really use a built in solution or a custom bric that handles this.

[KBConcepts]

Wouldn’t we all like to see website show up instantly.

[mFo]

Thanks @Jerry! I’ve checked it out.