如果是sopported，如何加载一个图像，如果不是，则加载另一个图像

Question

I have been reworking a web site to optimize for SEO. One thing I did is to optimize Images using Googles Webp Format. But Webp is not supported on any version of Safari.

My question is: What can I do to load one image (Webp) if supported or load another like JPG if not supported.

It could be great if it is something like the Audio or Video TAG

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
   Your browser does not support the audio tag.
</audio>

Answer 1

Add your code like as below and it should most probably work.

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

More details are mentioned here in this link.