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

Question

我正在尝试用图像填充固定大小的容器。 layout="fill" 就像一个魅力，但即使容器只有 125x125，下载的原始图像的分辨率比那个高得多，因此权重也大得多。我可以通过 layout="fixed" 降低分辨率，但这样我就失去了“填充”行为。

有没有办法通过 next/image - 填充父容器来充分利用这两个世界，同时减小下载到客户端设备的文件大小?

Answer 1

您可以配置 next.config.js 中的 deviceSizes 属性以匹配您应用中使用的断点，因为这些断点用于生成 next/image 的 srcsets，并提供正确大小的图像。

If you know the expected device widths of your users, you can specify a list of device width breakpoints using the deviceSizes property in next.config.js. These widths are used when the next/image component uses layout="responsive" or layout="fill" to ensure the correct image is served for user's device.

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

If you are using layout="fill", layout="responsive", or layout="raw" it's important to assign sizes for any image that takes up less than the full viewport width.

For example, when the parent element will constrain the image to always be less than half the viewport width, use sizes="50vw". Without sizes, the image will be sent at twice the necessary resolution, decreasing performance.

例如，假设您的应用使用以下设备断点 [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>

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

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

Fill parent container and reduce image resolution with next/image

css

image

reactjs

next.js

nextjs-image