我需要调整项目中图像的大小 react + gatsby

Question

我的应用程序网络太慢了，我需要改进我要调整图像大小的功能。

我应该在上传前调整图片大小吗？或者我应该使用这个插件 gatsby-plugin-image (https://www.gatsbyjs.com/plugins/gatsby-plugin-image/)?

gatsby-plugin-image

Adding responsive images to your site while maintaining high performance scores can be difficult to do manually. The Gatsby Image plugin handles the hard parts of producing images in multiple sizes and formats for you!

什么比较好？如果我选择第一个选项，我的代码将是这样的：使用这个库 https://www.npmjs.com/package/react-image-file-resizer

const resizeFile = (file) => new Promise(resolve => {
    Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,
    uri => {
      resolve(uri);
    }, 'base64' );
});

Answer 1

这取决于您在哪里使用 react-image-file-resizer 包。对于值得的东西，我会说那根本不值得。 Gatsby 在构建过程中使用一些基于 Python 的代码处理图像 treatment/resizing/transforming 过程，这些代码直接在服务器中运行（而不是像您共享的库那样在前端运行），因此性能获胜受到影响。当然，这会增加构建时间，但不会影响 PageSpeed Insights 得分，事实上，否则，由于该性能，您的图像会在提供时立即进行优化，不像 react-image-file-resizer，其中它是基于 React 的代码触发所有图像处理。

就是说，您的图像优化应该通过查询（在您获取这些图像的地方）进行，采用流动或固定尺寸（在 v2 中）或 StaticImage 或 GatsbyImage（在 v3 中） , 以所需的尺寸提升以在每台设备中提供您需要的图像，因为 Gatsby 将提供您指定的图像尺寸，因此如果您需要一些处理，应该在那里进行。

我需要调整项目中图像的大小 react + gatsby

I need to resize the images in my project react + gatsby

reactjs

gatsby