Create React App ignoring picture element source / srcSet?

Question

I am using the picture element convention for webp with a fallback option. When generated in Create React App - only the default img element src is being rendered in the browser. I've switched the order of the picture source tags to test as well as the img src in Chrome, Firefox and IE, on desktop and mobile.

const ext_1 = ".jpg";
const ext_2 = ".webp";
....
<picture>
    <source srcSet={img.src + ext_2} type='image/webp'></source>
    <source srcSet={img.src + ext_1} type='image/jpeg'></source>
        <img
            className={img.className}
            id={img.id}
            src={img.src + ext_1}
            alt={img.alt}
            title={img.title}
        />
</picture>

I have already read through all the posts / comments regarding React and Images I could find - none seemed to directly apply, even reading through comments... I am considering using "imbroisi/medium-react-webp", but I'd like to avoid as many dependencies as possible on a SPA project which I'm only trying to reduce the load time on. Any help would be appreciated.

Outside of React, that's the best solution that I have found for webp with fallback source - additionally, the img tag serves as a fallback when the picture tag is not supported. ...but, otherwise, no. — DM1
Would it be possible to use srcSet directly with the img tag even though it's not used for responsive exchange? Would it still make the switch based on file type? — DM1
This person had a similar issue, but was asking a different question about lazy loading: stackoverflow.com/questions/57061875/… — DM1

DM1 DM1 · Accepted Answer · 2020-07-17T05:49:27

Found this answer:

The browser devtools will always think that the image has whatever src you gave it initially. If you inspect it in the elements pane, you'll see that it uses a .jpg.

To check if it's actually working, the best trick I've found is to right-click and "Save as…". On Chrome, you should get a "Google WebP" file format, whereas on Safari or IE you should get a "JPEG".

In this article: https://joshwcomeau.com/performance/embracing-modern-image-formats/

This seems to be true. However, Google PageSpeed still shows the default images and subsequently lower speeds... this may be due to preloading them?

Create React App ignoring picture element source / srcSet?

1 Answers