按图片必须完成的工作来选择
先从素材本身出发，而不是只看扩展名。照片是连续色调内容，在显示尺寸下某些有损是可接受的。截图、图表、徽标或线条绘制有清晰边缘和文字，伪影会非常显眼。对这些素材应保留无损输出或经过严格审批。可用时对矢量徽标或图表使用 SVG。
然后识别所需功能。Alpha 表示按像素透明度。动画是帧序列。所需的浏览器覆盖范围、发布数量和构建时间是交付约束，可能会压倒对更小格式的偏好。
先测试有损的 AVIF 和 WebP。当需要广泛兼容的不透明回退时，保留 JPEG。
保留无损母版。在实际显示比例下，将 PNG 与无损 WebP 或 AVIF 进行比较再决定。
使用 AVIF、WebP 或 PNG；不要选择 JPEG，因为它不携带 alpha 通道。
了解每种格式的贡献点
AVIF 在 HEIF 框架中存储 AV1 编码的图像。其规范包含静态图像、图像序列和 alpha 图像项。它支持有损和无损编码、透明度与动画。节省量不是固定的：源内容、编码器、速度、目标质量和元数据都会改变结果。
WebP 支持有损和无损模式、透明和动画。JPEG 是一种有损的静态图像格式，具有非常广泛的历史支持，适合作为不透明照片的回退。PNG 是无损并支持 alpha 的格式，是精确图形的可靠回退，尽管用于照片时通常效率低。普通 PNG 是静态的；需要运动时应单独测试动画格式。
适合对栅格图像价值较高且可通过更小传输体积抵消额外编码和回退工作的场景。
作为现代通用栅格选项很有用，支持透明和动画序列。
用于不透明照片的回退，不用于带透明的徽标或抠图。
用于无损、有透明需求的栅格回退，或对像素保真度优先于最小字节数的资源。
构建回退路径，而不是押注于单一格式
picture 元素让浏览器评估多个替代方案。将 AVIF 放在首位，然后是 WebP，再用 img 回退到 JPEG 或 PNG，并指定正确的 MIME 类型。浏览器会跳过不支持的 source，当没有可用 source 时使用回退。除非故意更改裁剪，否则保持相同的有意义替代文本。
格式回退不能替代响应式尺寸。为不同宽度提供候选资源并在插槽变化时使用真实的 sizes 值。包含宽度和高度以便浏览器能够预留空间。小文件如果带 oversized 的像素尺寸仍然浪费字节。
AVIF 优先，WebP 次之；对于不透明照片使用 JPEG，若回退需要透明或无损边缘则使用 PNG。
如果服务器根据请求能力而非 picture 标记选择格式，请正确配置缓存变体测试，确保每个客户端收到可解码的表示。
使用不具备首选解码器的客户端或在预发布中有意禁用某个 source；确认图片、尺寸和替代文本保持正确。
把编码时间预算化并保护视觉质量
现代压缩把更多工作放到编码阶段。AVIF 的参考编码器提供从 0（最慢）到 10（最快）的速度范围；WebP 也在编码工作量、时间、输出体积和质量之间权衡。把批量重编码或按需转换当作运营决策，而不是免费的设置改动。
按资源类别设定可重复的策略，并在常见显示尺寸下审查原始图。检查面部、渐变、文字、边缘和透明边界。保留母版并记录编码器版本与设置，以便能重现并回滚缺陷。
更快的编码可以减轻构建压力，但可能产生更大的文件或更低效的压缩；对自己的素材集进行基准测试。
评分或预设无法替代对对访客具有意义的图像区域的人工视觉检查。
把图片格式变更作为主动的可靠性实践
对于 Status Is UP，图像优化是主动的可用性工作，可以在它防止发布降低关键页面质量时发挥作用。清点关键图片 URL，在预发布环境对代表性转换进行分阶段验证，并在站点范围迁移前核实内容类型、CDN 行为与缓存失效。
以可逆的批量方式部署。在发布候选版本上比较渲染与传输行为，然后在新路径被验证之前保留旧表示。如果转换或缓存规则失败，恢复已知的良好源。这是一条有韧性的交付方向，而不是对 AVIF 或多格式的普适强制。
优先处理首图和影响首个有用视图的内容图片，而不是一次性改动所有归档图片。
保留确定性的资源命名或版本映射，以便能快速恢复到先前的 JPEG、PNG 或 WebP 路径。