1

I'm trying to migrate to using WebP images on our website.

We have quite a few images in our S3 buckets, so it would take a while to convert all of them to webp. Instead, I'd like to show webp only if the webp version is available (it'll have a deterministic URL structure); and if not, show the original JPG/PNG.

When I try the following, it doesn't work (don't worry the icons on the top right. also webpImageUrl and originalImageUrl have the correct values):

<picture>
   <source srcSet={`${webpImageUrl}`} type="image/webp" />
   <img src={`${originalImageUrl}`} />
</picture>

enter image description here

Thanks in advance!

kolistivra
  • 4,229
  • 9
  • 45
  • 58
  • Which framework are you using? You cannot do this in HTML itself, but if you are using a JS framework anyway, it is possible. (In such case, you would probably also write `` instead of string interpolation, which is not needed here. – Bram Vanroy Nov 09 '18 at 14:56
  • I am using React, I believe some trick with `onError` should get me what I need – kolistivra Nov 09 '18 at 15:44
  • (something like https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror , but for `picture` tag ) – kolistivra Nov 09 '18 at 15:57
  • While the img onerror will functionally solve your issue, keep in mind that you'll be adding an additional round trip before non-webp image is fetched. So, if you have more non-webp images than webp images - I'd recommend not moving to webp until conversion completes. – Punit S Nov 29 '18 at 10:36

0 Answers0