您在此处:
响应式图像和现代图像格式(AVIF 和 WebP)
使用现代浏览器加载 AVIF 和 WebP 以获得较小的文件大小,并使用 JPEG(或 PNG 表示无损或透明)作为后备。DIS 的输出格式、质量以及 URLUtils 和 MediaFile 规则位于 Dynamic Imaging Service主题中。
支持的转换 表包含完整的格式、扩展名和质量详细信息。本主题介绍 何时 在标记中使用每种格式,以及 HTML 图片 和 源 元素 如何 引用 DIS URL。
何时使用每种格式
| 格式 | 典型用途 | 备注 |
|---|---|---|
| 阿维夫 | 浏览器支持时的高压缩产品摄影 | 通常是最小的;支持取决于购物者的浏览器和版本。 |
| WebP | 平衡的规模和对现代客户端的支持 | 比 AVIF 更广泛的支持;在非常老的客户上仍然不通用。 |
| JPEG / PNG | 默认、 img 回退或通过 PNG 的透明度 |
将 URL 中的文件扩展名与所需的格式对齐。 |
带 图片的渐进式增强
首先提供 AVIF 或 WebP ,然后是基线图像。确切的 DIS URL(扩展名和 sfrm 值)必须遵循 支持的转换 表和 URLUtils 或 MediaFile 调用。示例(与 Internet Store Markup Language (ISML) 无关)模式:
<图片来源>
<srcset=“<your AVIF DIS URL”> type=“image/avif” /
<>source srcset=“<your WebP DIS URL”> type=“image/webp” /><
img src=“<your JPEG DIS URL”> alt=“...” />
</图片 >
在实践中,您可以从具有 格式 /文件扩展名的相同 viewType 或 路径 生成脚本中的每个 URL,并为您的站点 转换 对象,而不是在 HTML 中硬编码 sw= 字符串。
性能和缓存卫生
- 保持转换参数 的稳定 和 最小化 :相同的逻辑大小和参数映射到单个缓存键,这可以提高 CDN 的命中率。请参阅 Dynamic Imaging Service 中的映像准则和动态映像缓存。
- 当 80 已经是您的用法中的 默认值 时,请省略
q=80,以避免在文档已声明默认值时在字符串中使用不必要的q。 - 监控图像重量和 4xx 速率;尖峰通常与错误的
OIMG值、无效的sw=/sh=对或未进行URL 编码的覆盖 URL 相关。请参 阅 疑难解答和迁移 。

