How to use WebP format in another browers?

0
votes

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?

2
javascriptpagespeedauditwebp

2 Answers

1
votes

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

0
votes

Maybe with an onError as fallback? Something like

<img src="image.webp" onerror="this.onerror=null; this.src='image.png'">

Did you seen this kind of webp serving? Maybe usage of <picture> will do the job?