用next/image填充父容器并降低图像分辨率

Question

我正在尝试用图像填充固定大小的容器。layout="fill"工作起来很有魅力，但即使容器只有125x125，下载的原始图像的分辨率也比CC_2高得多，因此权重也大得多。我可以用layout="fixed"降低分辨率，但我失去了"填充"。

是否有办法采取最好的这两个世界与next/image-填充父容器，并在同一时间减少文件的大小下载到客户端设备

?

Answer 1

你可以在next.config.js中配置deviceSizes属性来匹配你的应用程序中使用的断点，因为这些用于生成next/image'ssrcset's，并提供正确大小的图像。

如果您知道用户的期望设备宽度，您可以指定中使用deviceSizes属性的设备宽度断点列表next.config.js。这些宽度用于next/image组件使用layout="responsive"或layout="fill"保证镜像正确为用户的设备服务。

如果渲染的图像占用小于整个视口宽度，则上述内容应与next/image上的sizes属性配对。

如果您正在使用layout="fill",layout="responsive"或layout="raw"重要的是要为任何占用小于完整的视窗宽度。

例如，当父元素将图像约束为总是小于viewport宽度的一半，使用sizes="50vw"。没有sizes，图像将以两倍的必要分辨率发送，降低性能。

---

作为一个例子，让我们假设你的应用程序使用以下设备断点[320, 640, 1024, 1280, 1920]，并且你正在渲染240x240图像。

更新deviceSizes属性以匹配断点:

// next.config.js
module.exports = {
images: {
deviceSizes: [320, 640, 1024, 1280, 1920],
// Other existing `images` configs
},
// Other existing configs
}

然后在next/image上设置sizes属性，以建议理想的图像大小。

<div style={{ position: 'relative', width: 240, height: 240 }}>
<Image
src="<image-url>"
layout="fill"
sizes="50vw"
/>
</div>

您应该调整上述值以更好地适应您的用例。