Next.js 应该使用啥图像大小？

Posted 2023-03-06

【中文标题】Next.js 应该使用啥图像大小？

【英文标题】：What image size should be used with Next.js?Next.js 应该使用什么图像大小？

【发布时间】：2021-05-26 17:44:25

【问题描述】：

文档说：

图像的宽度，以像素为单位。必须是没有单位的整数。 图像的高度，以像素为单位。必须是没有单位的整数。

https://nextjs.org/docs/api-reference/next/image

不同的设备可以有不同的尺寸。设备可以是台式机或移动设备。发送每张图片的实际尺寸有点繁琐。

我认为我不必发送图像的确切尺寸，但发送的宽度、高度的比例与实际宽度和高度的比例相等就足够了。你同意我的观点吗？

所以如果我看这里的商人：

https://tiket.hu/sell/services

桌面上的商人有 468x346 大小，然后如果我通过 width=100 height=74 则返回的图像将具有最佳大小。正确的？并且加载速度也将是最佳的。

【参考方案1】：

是的，但是您应该传递的宽度和高度必须是您要使用的最大的，例如，使用您的示例，如果您要在桌面上使用的图像是 468x346，您应该传递那个到你的图片组件width=468 height=346

该组件将为较小的设备优化图像大小，但不会为较大的设备优化。您传递的尺寸是组件要返回和渲染的最大尺寸。

【讨论】：

啊，好吧，如果我传递一个较小的尺寸，客户端是否会双重下载不同尺寸的图像？

那么缩小但成比例的尺寸会降低效率吗？

没错，如果客户端宽度变大，客户端只会下载另一个图像大小，这可能在开发之外几乎永远不会发生，即使在这种情况下也会下载一个当时。对于所有其他情况，只会下载每个屏幕的最佳尺寸。

有点，因为组件的想法是您只传递所需的最大尺寸，所有优化都将由组件本身处理，因此，如果您传递的尺寸小于你需要，它不会更优化，但你将处理像素化图像

你可以做的另一件事是使用layout="responsive"，它会根据你的比例放大和缩小你的图像，但它会放大直到填满容器的整个大小。如果您不知道您的最大宽度将是多少，这将很有帮助，例如英雄或全屏图像，但如果您知道最大宽度并希望它在某个时候停止放大，我建议您采用另一种方式