1

I would like to lazyload webp-images with a fallback-image.

My html looks currently like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593" style="max-width: 100%" alt="Übersetzung für Marketing und Wirtschaft">

And if I make it like this, its not showing the webp image in chrome:

 <picture>
   <source class="center lazy" srcset="./bilder/uebersetzung-marketing-bwl.webp" type="image/webp">
   <img class="center lazy" data-original="./bilder/uebersetzung-marketing-bwl.png" width="593" style="max-width: 100%" alt="Übersetzung für Marketing und Wirtschaft">
 </picture>

Do I have to use another library to solve it or what do you suggest?

Krystian
  • 887
  • 5
  • 21
  • 52

1 Answers1

0

If your site is in wordpress, you can use this plugin https://wordpress.org/plugins/webp-express

it will load webp for webp supported browser, otherwise it will fallback to the main file.

saleh_ahmad
  • 1
  • 2