Adding picture tag support to use WebP with a legacy format failover

[sunknudsen]

Feature Request

Describe the Feature

I absolutely love react-cool-img. Thanks!

I recently explored ways to improve load times and stumbled upon WebP.

Problem is WebP is not supported by Safari on macOS Catalina and bellow (and some other legacy browsers).

According to Google docs, using picture tags is the recommended approach to fallback to legacy src on legacy browsers.

It would be amazing if react-cool-img used picture tags and allowed us to provide multiple src and placeholder props.

Perhaps src and placeholder could be either a string which would make the codebase backwards compatible or a string[] which could use all but last string items as source tags (type could be derived from file extension) and last item as failover img tag.

import Img from "react-cool-img";

const App = () => (
  <Img
    placeholder={["/path/to/placeholder.webp", "/path/to/placeholder.png"]}
    src={["/path/to/image.webp", "/path/to/image.png"]}
  />
);

<picture>
  <source type="image/webp" srcset="/path/to/image.webp">
  <img src="/path/to/image.png">
</picture>

Describe the Solution You'd Like

See above…

Describe Alternatives You've Considered

I considered using JavaScript (see Google docs) to detect if WebP is supported. Problem is that approach is async therefore not the best from a performance standpoint.

[wellyshen]

@sunknudsen Thank you for giving this library a try. I like your idea but seems most browsers already support it and IE11 is going to end on August 17, 2021. So, I'm wondering if we need to put the effort into it at this moment 🤔.

[mattmatters]

Just to chime back in @wellyshen (thank you for the great library!), there are actually many more picture formats in the past couple years such as avif being in Chromium and Firefox, jpegxl getting experimented with, and heif being completely up in the air.

It would be hugely beneficial to us to have the <picture /> tag incorporated in. Though in theory it may slightly change the api of this.

[kdevan]

+1 here. I need to be able to support legacy devices and browsers and also agree that being able to support future modern formats is useful. I'll be trying to come up with a solution to use this library and support legacy but would definitely be useful and nice if an api for this were built in.