你的图片（可能）太大了

Are you setting the sizes attribute on your <img/> tags?

你是否在 <img/> 标签上设置了 sizes 属性？

No?

不？

Then you're most certainly serving images that are larger than they should be. Even for large-width (e.g. desktop) screens.

那么你几乎肯定在提供比应有尺寸更大的图片。即使对于大宽度（例如桌面）屏幕也是如此。

Oh, you're using NextJS's <Image/> component and you're telling me you don't need to worry about it? Oh my sweet summer child.

哦，你在用 NextJS 的 <Image/> 组件，然后告诉我你不需要操心这些？哦，我天真的小宝贝。

You're implementing a beautiful landing page your designer just created, and like most landing pages, it has a hero section with a prominently featured image, something like this:

你正在实现设计师刚刚完成的一个精美落地页，和大多数落地页一样，它有一个 hero 区域，其中突出展示了一张图片，大致如下：

In the example above, the hero image stretches both horizontally and vertically (but of course, always maintaining its original aspect ratio) covering almost the entire screen, and thus, its rendered size will depend directly on the dimensions of the user's device.

在上面的示例中，hero 图片在水平和垂直方向上都进行了拉伸（当然始终保持原始宽高比），几乎覆盖整个屏幕，因此其 渲染尺寸 将 直接取决于用户设备的尺寸。

Thankfully, your designer also understands that, and to ensure that this image looks good on any screen size, they send you a very high resolution image, let's say 3600x2400 pixels. With that many pixels, it will look sharp even on the largest monitors.

值得庆幸的是，你的设计师也明白这一点，为了确保图像在任何屏幕尺寸上都看起来不错，他们会发送一张非常高分辨率的图像，比如 3600 × 2400 像素。拥有这么多像素，即使在最大的显示器上也会显得锐利。

The problem, however, is that the majority of your users won't have screens that are big enough to make use of all those pixels, so having them download an image this big is essentially a waste of both bandwidth and compute, which could be better utilized for other things.

然而问题在于，大多数用户的屏幕并没有大到能够利用所有这些像素，因此让他们下载如此巨大的图片，实际上是在浪费带宽和计算资源，而这些资源本可以更好地用于其他用途。

Ah! But I use NextJS <Image> component, so I won't have this issue, as it will optimize my images so that they are never bigger than they should be.

啊！但我用的是 NextJS 的 <Image> 组件，所以不会有这个问题，因为它会优化我的图片，确保它们永远不会比应有的尺寸更大。

So, without a second thought you summon the fabled NextJS <Image/> component and use it like this:

于是你毫...