Next.js 图像优化增加而不是减少文件大小答案

【问题标题】：Next.js Image Optimization Increases Filesize Instead of Decreasing itNext.js 图像优化增加而不是减少文件大小
【发布时间】：2021-11-27 12:46:37
【问题描述】：

我从一个原始文件大小为 208kb、分辨率为 3488*2633 的 api 获取上传的图像。我使用下面的代码从外部 api 获取图像

const ExternalImage = forwardRef((props,ref) => {
const {src,quality,folder,...rest} = props;
const [source,setSource] = useState(`${process.env.IMAGE_DOMAIN}/${folder}/${src}`)
return (
    <Image
        src={source}
        quality={quality != undefined ? quality : 100}
        {...rest}
        onError={() => setSource(NotFound)}
    />
)
})

现在，当我看到网络选项卡时，浏览器正在获取的同一图像是 1 Mb。我试着交叉检查是否属实，我下载了next js优化的图像，发现图像文件大小是增加而不是减少。

这是如何优化的？我在代码中遗漏了什么吗？

我的 next.js 配置：

module.exports = {
env: {
  API_DOMAIN: 'https://api.somedomain.com/web-api/v1.0',
  IMAGE_DOMAIN: 'https://api.somedomain.com',
},
images: {
  domains: ['https://api.somedomain.com/','api.somedomain.com'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}

【问题讨论】：

尝试将 quality 属性向下移动一点，大概是 80 左右。
不是100个原始质量衡量标准吗？
是的，但不确定他们的算法在后台是如何工作的。可能值得玩一下这个设置，看看你会得到什么。
肯定会这样做

标签： reactjs image next.js nextjs-image

【解决方案1】：

为来自数组的图像添加密钥对我有用。我不确定它是如何以及为什么起作用的。

【讨论】：