AVIF 图像审核

转换 JPEG 为 AVIF：仅在页面加载更快时

AVIF 最有效的用法是作为图像审核，而非一刀切的导出设置。本指南帮助你筛选适合 AVIF 的 JPEG，选择审核流程，避免发布体积虽小但视觉效果差的文件。

快速结论

只转换例外文件，不转换整个媒体文件夹

最佳 JPEG 转 AVIF 决策始于页面影响。转换调整尺寸后仍拖慢页面的大型照片，常规缩略图、UI 截图、图表和已小资源则走更简单路径。

强力候选 大型摄影 LCP 图像

当主图或落地页照片在调整尺寸和 WebP 导出后仍占较大体积时，使用 AVIF。

可能 重要但非主导

仅当当前文件仍较大或页面存在明显速度问题时测试 AVIF。

避免 微小、图形或未审核资源

图片较小、主要是 UI、文本较多或无法发布前检查结果时，跳过 AVIF。

先做图像审核

选择 AVIF 前请问自己这些问题

AVIF 效果可能出色，但不是万能修复。格式重要性取决于图像尺寸是否正确、角色是否合适，以及是否在访客实际看到的布局中审核。

问题 重要原因 操作
渲染尺寸是否已正确？ AVIF 无法修复 4000 像素图像在 900 像素显示时的问题。 先调整尺寸，再比较格式。
这张图片是否影响 LCP 或第一印象？ 大幅首屏照片比深层页面装饰更具影响力。 优先处理主图、落地页和活动视觉图。
内容是照片类吗？ AVIF 通常适合照片，不适合扁平 UI 或标志类图形。 当锐利边缘更重要时，使用 PNG、SVG 或 WebP。
能否在实际环境中审核结果？ AVIF 可能掩盖压缩痕迹，直到图像置于真实布局中才显现。 检查移动端宽度、渐变、人脸和裁剪。
你有备用方案吗？ 不同环境对现代格式的支持不尽相同。 使用 picture 标记或框架等效方式发布。

候选选择

哪些 JPEG 图片适合转换为 AVIF？

寻找那些文件更小且能改变页面表现的图片，而非仅文件管理器中的大小。最佳候选通常是摄影类、视觉重要且足够大以影响加载感知的图片。

最佳候选

LCP 主图

定义首屏且调整大小后仍然较大的大型摄影主图，通常是 AVIF 最佳应用场景。

良好候选

落地页活动图片

当活动或产品照片位于页面顶部且需保持视觉精致时，额外的审核是合理的。

选择性候选

编辑特色图

当图片足够大且重要时使用 AVIF，而非仅因每张文章图片都重新导出。

不佳候选

文本密集型截图

截图、界面捕获、图表和图标在受益于 AVIF 压缩前，常因文本清晰度不足而失败。

质量审核

不要在不同 AVIF 工具间复制质量数值

AVIF 质量滑块参数不通用。某编码器下效果好的数值，可能在另一编码器下过软或过重。建议从工具默认或中等质量开始，再在真实页面判断效果。

目标不是最小的 AVIF 文件，而是最小且能支持页面的文件：细节足够清晰，渐变可接受，无干扰纹理丢失，无明显色彩偏移。

审核顺序
  1. 与调整大小后的 JPEG 或 WebP 比较，而非原始相机文件。
  2. 检查图像在桌面渲染尺寸和移动端宽度下的效果。
  3. 检查人脸、天空、渐变、阴影、小纹理和品牌色彩。
  4. 确认文件能在计划发布的页面正常加载。

视觉失效模式

发布前值得检查的 AVIF 压缩痕迹

优质的 AVIF 导出效果出色，劣质的则可能悄无声息地失败：文件更小，但图像在用户最先注意的页面部分显得平淡、模糊或噪点明显。

天空或渐变中的色带现象 平滑背景在压缩过度时可能出现色阶断层。
蜡质皮肤或产品纹理 人像和产品表面即使文件初看清晰，也可能丢失自然细节。
细节模糊 叶子、织物、头发和小重复图案可能出现模糊，视觉质量下降超过节省的字节数。
颜色或对比度偏移 活动图和产品照片转换后需进行品牌色彩安全检查。
裁剪与焦点错误 如果响应式裁剪隐藏了图片中吸引用户的部分，文件更小并不算优势。

交付

发布 AVIF 时保留备用方案，避免盲目替换

对于重要页面图片，保持交付稳定可预期。支持时优先使用 AVIF，保留 WebP 或 JPEG 备用，设置宽高，避免浏览器延迟发现布局尺寸。

仅在 AVIF 确实是 LCP 图像时预加载。预加载所有转换资源可能导致页面更繁忙，反而不利于加速。

HTML带 AVIF 备用方案的 picture 标记
<picture>
  <source srcset="/images/landing/hero.avif" type="image/avif">
  <source srcset="/images/landing/hero.webp" type="image/webp">
  <img
    src="/images/landing/hero.jpg"
    width="1600"
    height="900"
    alt="Product photo in the landing page hero"
    loading="eager"
    fetchpriority="high">
</picture>

隐私与控制

避免未发布的活动图片进入随机上传流程

大型 JPEG 照片通常非中性文件，可能包含未发布产品、客户作品、地点线索、策划活动素材或暴露内部信息的文件名。上传转换应是慎重决定，而非默认操作。

本地工作流程能将源文件、输出名称和审核步骤紧密结合项目，尤其适合同一落地页需多次导出以达到视觉平衡的情况。

实用工作流程

可重复的 JPEG 转 AVIF 流程，无需将每张图片都当作项目处理

  1. 01
    仅收集体积较大的候选图

    从一份经过正常调整尺寸和 WebP 导出后仍重要的大型 JPEG 照片短名单开始。

  2. 02
    单独导出 AVIF 变体

    将 AVIF 输出保存在专用文件夹，便于与源 JPEG 和常规 WebP 文件对比。

  3. 03
    在实际页面中审核

    将候选图放入真实组件或模板中检查实际效果，而非仅看转换器预览。

  4. 04
    使用备用标记发布

    支持时提供 AVIF，保留 WebP 或 JPEG 备用以保证交付稳定。

  5. 05
    记录规则

    记录哪些图像角色使用 AVIF，避免下次更新时猜测。

格式边界

以 WebP 为基础，AVIF 作为升级方案

良好的工作流程通常包含默认路径和例外路径。WebP 是常规网站图片的默认格式，因其实用且支持广泛。AVIF 则用于大型照片仍然过大的情况。

该界限保持文章工作流程高效，同时为你提供救援占用较大体积或 LCP 的图片的途径。

常规文章图片 除非特定文件仍过大，否则使用 WebP。
大型摄影主图 调整尺寸后尝试 AVIF 并比较视觉效果。
截图与界面 文本和硬边缘重要时，优先使用 PNG 或 WebP。
未审核的批量导出 不要仅因文件夹更小就盲目发布 AVIF。

发布前检查清单

替换 JPEG 为 AVIF 前请检查此项

源图像已调整尺寸 AVIF 文件尺寸接近最大显示尺寸，而非相机原始尺寸。
页面使用 AVIF 通过网络或页面源代码检查确认新文件已实际加载。
存在备用方案 WebP 或 JPEG 仍可用于你使用的交付路径。
已审核质量 最终页面在桌面和移动端均检查了压缩痕迹。
元数据仍有意义 替代文本、Open Graph 图片和 JSON-LD 图片引用未被意外破坏。
保留原始文件 源 JPEG 文件保留以便未来裁剪、调整尺寸和重新导出。

常见问题

常见问题解答

JPEG 转 AVIF 发布决策的实用解答