Optimize images with Webpack and use picture HTML element

[sumanthratna]

Is your proposal related to a problem?

Our site http://hacktj.org/ loads lots of images, decreasing site performance. One solution would be lazy loading images using the attribute on the img element, but an even nicer solution would be to use the HTML picture element along with (optional) lazy loading.

Describe the solution you'd like

1. at build-time, use Webpack to convert JPGs and PNGs to a variety of formats (perhaps make this opt-in somehow, to avoid long build times?)
2. replace the single img with a picture (with optimized images and original as a fallback)
   • replacing HTML elements might not be possible with the current react-scripts
     • maybe InterpolateHtmlPlugin and other related plugins could be adapted to do this
     • or maybe users could use this for images:

import { OptimizedPicture } from "react-scripts";

const MyComponent = () => (
    <>
        <OptimizedPicture src="unoptimized.png" alt="A good alt." />
        <OptimizedPicture src="unoptimized-and-lazy.png" alt="Another good alt." loading="lazy" />
    </>
);

/* 
// instead of:
const MyComponent = () => (
    <>
        <img src="unoptimized.png" alt="A good alt." />
        <img src="unoptimized-and-lazy.png" alt="Another good alt." loading="lazy" />
    </>
);
*/

CRA should convert to the following filetypes:

• JPEG 2000
• JPEG XR
• WebP

If loading="lazy" is passed to the image and width and height are not provided, CRA should automagically compute the dimensions of the image and pass those as width and height to avoid layout shift.

Describe alternatives you've considered

The current method to do this: Users could create a prebuild script to convert/optimizes images, and then manually write picture instead of img (and they could even create their own OptimizedPicture component). However, this results in a lot of repeat code across projects, which is why I think this should be in react-scripts.

Additional context

n/a

[sumanthratna]

another alternative: use craco and then set up this plugin: https://github.com/kkulbae/craco-image-optimizer-plugin

[danciudev]

Use the following guide for image optimization:
https://web.dev/serve-images-webp/
=)

[sumanthratna]

Use the following guide for image optimization:
https://web.dev/serve-images-webp/
=)

thanks for the reply! that article actually inspired this feature request; my opinion is that CRA should automatically optimize images and/or use <picture>. Leaving img optimization up to CRA users makes for a ton of repeat code across projects, and is a little inconvenient because it doesn't integrate cleanly with CRA's build system (i.e., instead of using Webpack you have to use your own prebuild script to convert images)