0

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>
inexcitus
  • 2,471
  • 2
  • 26
  • 41
Francisco Daniel Carvajal Bece
  • 1
  • 1
    Possible duplicate of [Detecting WebP support](https://stackoverflow.com/questions/5573096/detecting-webp-support) – Amadan Jul 24 '19 at 03:33
  • 2
    Specifically, [this answer](https://stackoverflow.com/a/46992947/240443). – Amadan Jul 24 '19 at 03:34
  • https://www.digitalocean.com/community/tutorials/how-to-create-and-serve-webp-images-to-speed-up-your-website#step-5-%E2%80%94-serving-webp-images-to-visitors-using-html-elements – Arleigh Hix Jul 24 '19 at 05:26

2 Answers2

2

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.

Himadhar H
  • 106
  • 9
0

I assume you are using only 1 image in src (in img tag) if that fails to load then you are trying to loan any other image. So, You can use 

<img src="invalid_link" onerror="this.onerror=null;this.src='other_image_url';">

Hope this helps.

Subhash Diwakar
  • 199
  • 2
  • 12