Next.js 带有强烈的图像观点，车辆网站测试其中的每一个：每页数百张远程图像，不得移动的纵横比，以及已经放置在资产前的 CDN。使用得当，框架和车辆图像 API 相互增强；使用得愚蠢，它们会优化相同的字节两次，并为此收费。这是一个在生产中有效的设置。
让一个优化器获胜
Image 组件想要通过自己的管道重新调整大小和重新编码所有内容。来自参数化 API的车辆图像已经调整好大小，并且已经是 WebP 格式，因此双重优化增加了延迟和计算，却毫无意义。干净的模式是：从 API 请求精确宽度，让组件处理布局、懒加载和优先级，而不重新处理，或者将其远程模式的范围缩小，并传递已经最优的内容。
- 按断点从 API 请求渲染宽度
- 为图像主机配置远程模式，一次性紧密配置
- 使用 fill 或显式尺寸来锁定纵横比框
- 为顶部折叠的英雄保留优先权，其他什么都不要
按页面类型的渲染策略
汽车网站按数据新鲜度自然分割。实时库存的详情页需要服务器渲染和短期重新验证，以保持价格和可用性的真实性。类别和着陆页可以容忍更长的静态生命周期，它们的图像 URL 稳定且参数化，因此在每一层都能完美缓存。图像系统在各种策略下保持一致；只有重新验证窗口不同，这使得心智模型保持简洁。
画廊、网格和折叠
三个汽车网站表面清晰地映射到框架原语上。搜索网格使用固定比例的单元格，并在折叠以下进行延迟加载，正好如搜索指南所规定。详细画廊优先预加载其第一张图像，并将角度集推迟到交互。比较视图依赖于 API 的相同框架，因此大小相等的单元格无需每张图像调整。这一切都不复杂；所有这些都是一次决定并将决定编码到组件中。
值得拥有的 VehicleImage 组件
只需包装框架的 Image 一次：稳定的车辆 ID、角度、宽度提示和替代文本的属性，URL 构建在内部，应用大小和加载默认值。然后每个表面通过一个组件渲染车辆，当您更改参数约定时，只需更改一个文件。添加固定比例的骨架和品牌化的缺失回退，边缘情况就被设计出来，而不是被发现。
框架奖励一次决定图像策略并编码的团队，惩罚每页决定一次的团队。
对于底层的缓存架构，缓存策略 直接与此设置配对，React 和 Vue 指南 则涵盖了 Next 之外的组件模式。
部署、缓存和稳定 URL 的红利
最后一个生产笔记：因为 API 的 URL 是稳定且参数化的，它们在你的部署中保持不变，这使得 CDN 缓存在发布之间保持温暖，并让框架的优化器不必重新处理未更改的目录。从本地存储资产迁移的团队在第一次部署后会注意到这一点：图像层不再是发布的一部分，构建时间和缓存命中率都会反映出来。
