WebP、AVIF或PNG用于车辆图像

车辆图像是压缩的尴尬图像类别：光滑的光学渐变、锋利的切割边缘，以及必须完好无损的alpha通道，无论汽车被合成到哪个自定义背景上。一般的网络图像建议大多适用，但边缘情况正是车辆图像所在的地方。这是一次性正确的格式决策。

实际使用的三种格式

每一个都有其优势

PNG：归档和合成格式

PNG 精确地赚取两倍的字节：当图像进入会重新压缩的打印或设计管道时，以及当下游合成需要数学上干净的 alpha 通道时。作为网页的交付格式，它是一种习惯，而不是一种决定。通常是五倍的传输，但没有可见的差异。

WebP：默认格式

带有alpha通道的WebP在合理质量下是工作马: 透明剪切的重量仅为PNG的一小部分，通用浏览器支持，并且每次请求都可以控制质量。对于列表网格或VDP画廊，format=webp 结合显式 width 是整个策略。

AVIF：更细的铅笔，同一幅画

AVIF 在相同质量下压缩更强，其支持情况现在也很好。真正的问题是边际收益：在合适尺寸的车辆剪切图上，从 PNG 到 WebP 的步骤是显著的，从 WebP 到 AVIF 的步骤是微调。在构建管道之前，请查看 /api/options 以获取当前提供的格式。

超越格式选择的错误

• 将高分辨率图片放入小槽中。存在宽度参数，使用它们
• 向将车辆放在白色背景上的页面发送PNG透明度
• 在自己的管道中重新压缩已经损失的图像，在切边上堆叠伪影
• 忽略质量参数：车辆渲染图像压缩效果很好，默认质量参数会浪费很多字节。

格式选择值得花一个会议时间。尺寸规范每季度花一个会议时间，永远如此。

一個實例

取一个展示48张车辆卡片的列表网格。作为全尺寸的PNG，页面发送数十兆字节的图像，移动用户在蜂窝网络上根本无法完成加载。相同的网格在600像素宽度的WebP通常每张图像小两个数量级。设计没有改变，网格从无法使用变为在大多数购物者实际拥有的连接上瞬间加载。

将格式选择与 srcset 配对，浏览器完成其余工作：小屏幕拉取小变体，视网膜屏幕拉取清晰的版本，没有人下载看不到的像素。由于尺寸是请求参数，整个响应式设置是三个 URL，只差一个数字。

透明度和阴影变体的用途及其组合方式，请参阅阴影、反射和透明度；交付参数位于API 文档中。