Support WebP with <picture> for Safari

[pixelfreak]

Is there currently a way to support WebP with <picture> so it can fallback on Safari? If not, is this something worth adding? (since iOS 14 and macOS 11 will render this problem obsolete)

[adonig]

I was asking myself the same question. I browsed through the code and found this place:

https://github.com/Aljullu/react-lazy-load-image-component/blob/7457b954c2d803332d62171590cc3fbf6d6858d8/src/components/LazyLoadImage.jsx#L47

Also when you use the Github search to find occurrences of the string "img" there are some, i.e. in the CSS.

So I assume for now it's not supported out of the box, but I think it is a promising feature that should become part of a future release.

@Aljullu: Maybe it is possible to allow the users to pass in the getImg() function via the props?

[pixelfreak]

Alternatively, some image processing platform like Cloudinary can intelligently serve WebP or JPEG-XR depending on detected client. So you can use a regular img and it'll be transparent to the browser.

[Aljullu]

Sorry for the late reply. Wouldn't LazyLoadComponent work for you? It works like LazyLoadImage but can be used to wrap any element/component. So you could do something like:

 <LazyLoadComponent>
  <picture>
    <source srcset="my-image.webp" type="image/webp">
    <source srcset="my-image.jpg" type="image/jpeg"> 
    <img src="my-image.jpg" alt="Alt Text!">
  </picture>
</LazyLoadComponent>

[EliteMasterEric]

@Aljullu: LazyLoadComponent could be used but it has no support for the built-in effects provided by the library.