你的提案是否与问题相关？
我们的网站http://hacktj.org/加载了许多图片，降低了网站性能。一个解决方案是使用img元素上的属性进行懒加载图片，但一个更好的解决方案是使用HTML picture元素以及(可选的)懒加载。

描述你希望的解决方案

1. 在构建时，使用Webpack将JPG和PNG转换为多种格式(也许可以通过某种方式使这成为可选，以避免长时间的构建时间？)

• 用picture替换单个img(带有优化后的图片和原始图片作为后备)
• 用当前的react-scripts替换HTML元素可能不太可能
• 也许InterpolateHtmlPlugin和其他相关插件可以被调整为这样做
• 或者用户可以使用以下方式为图片：

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应该转换为以下文件类型：

• JPEG 2000
• JPEG XR
• WebP

如果传递了loading="lazy"给图片并且没有提供width和height,CRA应该自动计算图像的尺寸并将这些作为width和height传递，以避免布局位移。

描述你考虑过的替代方案

目前的方法是：用户可以创建一个预构建脚本来转换/优化图片，然后手动编写picture而不是img(他们甚至可以创建自己的OptimizedPicture组件)。然而，这导致了项目之间的大量重复代码，这就是为什么我认为这应该在react-scripts中的原因。

其他上下文

无