0

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?

Michael Fedotov
  • 3
  • 2

2 Answers2

1

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

Punit S
  • 3,079
  • 1
  • 21
  • 26
0

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?

Evgeniy
  • 2,337
  • 2
  • 28
  • 68
  • That's going to be pretty nasty for performance for everything except Chrome. It will add an extra HTTP request for every image. – Quentin Nov 07 '18 at 12:21
  • @Quentin could you please explain it a bit further? Afaik it makes an additional request only in case of error... Am i wrong? – Evgeniy Nov 07 '18 at 12:22
  • And the error will occur in everything except Chrome. – Quentin Nov 07 '18 at 12:23
  • you are right, yes. Everywhere, where webp isn't supported, there wil be an error. But nevertheless i would firstly measure how this additional request influences the whole performance... And, btw. it isn't only Chrome - Opera and the most mobile browsers do understand webP. So i would inspect the visitor browsers too... – Evgeniy Nov 07 '18 at 12:25
  • Unfortunately, WebPJS don't work with and srcset-attributes. Moreover, WebPJS use base64 encode for images. I think if I have 10 images of 4 srcset-attribute each on my app, it will be 50 links. If every link encode... HTML-code will grow to unreal measure! I think in browsers that don't support webp we need use jpg-format. – Michael Fedotov Nov 07 '18 at 16:13