Search code examples
javascriptpagespeedauditwebp

How to use WebP format in another browers?

I use google audits for speedup my app. So google audit says - "it's time to use .webp images!". Okay, let's do that. But... Mozilla firefox not supported it. So, I turn on WebPJS and it helped. But...

I have DOM-element:

<img src="image.webp" srcset="image-480.webp 480w, image-768.webp 768w, image-1024.webp 1024w" alt="alt" titile="title"/>

WebPJS replace src-attribute but don't touch srcset-attribute. How to solve this problem?

Solution

  • picture element is what you need: 

    <picture>
  <source srcset='image-480.webp' type="image/webp" media="(max-width: 480px)">
  <source srcset='image-768.webp' type="image/webp" media="(max-width: 768px)">
  <source srcset='image-1024.webp' type="image/webp" media="(min-width: 769px)">
  <source srcset='image-480.jpg' type="image/jpg" media="(max-width: 480px)">
  <source srcset='image-768.jpg' type="image/jpg" media="(max-width: 768px)">
  <source srcset='image-1024.jpg' type="image/jpg" media="(min-width: 769px)">
  <img src="image-1024.jpg"  />
</picture>

    Above code shall:

    • load webp image for browser where picture attribute and webp image is supported
    • load jpg for browser where picture attribute is supported but not webp
    • load image-1024.jpg for browser where picture attribute isn't supported

    Can I Use : picture webp