短答——2026 年网站最佳的图像格式
2026 年，绝大多数网站的最佳图像格式是 WebP。它是照片、商品图、缩略图、博客图和许多透明图形的实用默认值——通常比 JPEG 或 PNG 更小，同时能在所有现代浏览器里正常工作。
但这并不意味着"把所有图都转成 WebP"是一份好的迁移计划。大幅视觉素材上 AVIF 的文件可以胜过 WebP；老浏览器、邮件、CMS 导入和第三方上传表单，JPEG 依然是最稳的回退；截图、示意图，以及边缘或透明必须精确的位图素材，PNG 仍然是对的选择；标志和图标若本身是矢量，SVG 优于以上所有格式。
2026 年真正的答案是：
| 场景 | 首选格式 | 理由 |
|---|---|---|
| 网站里的大多数照片 | WebP | 现代浏览器广泛支持，体积节省明显 |
| 大幅英雄图或图库图 | AVIF，配 WebP／JPEG 回退 | LCP 与带宽敏感时字节最省 |
| 邮件、老 CMS、原生应用导入 | JPEG | 兼容性最高，上传时最少意外 |
| 截图或界面图 | PNG 或无损 WebP | 保持文字和硬边干净 |
| 标志或图标 | SVG，需要位图时再退回 PNG／WebP | 缩放干净、体积极小 |
| 带透明的商品抠图 | 带 Alpha 的 WebP；工作流需要时用 PNG | 保透明又不臃肿 |
| iPhone 上传的 HEIC | 发布前先转成 JPEG 或 WebP | HEIC 不是对外发布的安全网页格式 |
这件事为什么仍然重要
图像格式决定访客要下载多少字节，会影响页面速度、移动流量以及 Largest Contentful Paint，尤其当图片在首屏之上时。Chrome 的 Lighthouse 指南也一直把 AVIF 和 WebP 视为现代格式，认为它们在许多网页图片上比旧的 JPEG 和 PNG 有更好的压缩和质量表现。
不过格式只是图像 SEO 的一部分。一个编码得再好的 AVIF，若宽 4000 px 却挤在 700 px 的位置上，性能仍会崩；一张小小的 WebP，若图片没有有意义的 alt、页面内容也很单薄，同样不能拉升排名。先选格式，再做尺寸调整、压缩，设置 width 与 height，写清晰的 alt，提供响应式源图。
有个简单的思路模型：先选对像素，再选对格式。
把 WebP 作为日常默认
对 2026 年绝大多数网页图像工作而言，WebP 是最好的默认值。它同时支持照片的有损压缩、图形的无损压缩、透明和动画。Google 公布过，无损 WebP 比 PNG 小 26 %，在同等质量下有损 WebP 比 JPEG 小 25–34 %。
WebP 适合：
- 博客和帮助中心的图片。
- 商品列表图和缩略图。
- 分类页图片。
- 团队合影和作者头像。
- 不需要 AVIF 级节省的背景图。
- CMS 与目标浏览器都能稳定处理 WebP 时的透明图形。
从操作层面看，WebP 也很省心。大多数图像编辑器、构建工具、CMS 插件、CDN 和浏览器端转换器都能生成它。小团队想只用一种现代格式、又不想为每张图维护多套回退，WebP 是麻烦最少的答案。
只在节省抵得上流水线代价时才上 AVIF
只有当图片重量确实成为业务问题时，AVIF 才值得测试：一张大幅英雄图、一个高流量落地页、一份全宽摄影作品集，或移动端会全部加载的商品图库。MDN 把 AVIF 描述为高性能、免版税，支持透明、动画、更高色深、HDR 与广色域的格式。日常最大的实际好处，是在很多摄影素材上文件更小。
问题在于工作流。AVIF 编码可能更慢，某些老浏览器、应用内 Webview、CMS 工具或上传门户对它的支持不如 JPEG 或 WebP 那么顺畅。因此 AVIF 通常是回退链上的第一位，而不是你唯一要保存的文件。
以下情况用 AVIF：
- 图片大到字节节省真正有意义。
- 资源在构建时或通过 CDN 生成。
- 你能在发布前先目视检查质量。
- 你能提供 WebP 或 JPEG 的回退。
- 分析显示访客大多用现代浏览器。
别对每张小缩略图都盲目上 AVIF。若一张 14 KB 的 WebP 变成 10 KB 的 AVIF，但生成变慢、流水线更复杂，收益未必划算。
保留 JPEG 用于兼容、回退和非网页工作流
JPEG 没有死，只是不再是以性能为重的网页配送的最佳默认。
以下场景兼容性比"最强压缩"更重要，就继续用 JPEG：
- 邮件通讯与邮件附件。
- 文件校验严格的老 CMS 导入或素材库。
- 只接受 JPEG 的原生应用或上传门户。
- 反正会把所有图片再压一次的社交工具。
- 老浏览器、应用内浏览器、自助终端、嵌入式设备。
<picture>元素里的回退图。
如果页面本身图不多、性能也没有卡点，用 JPEG 也没问题。经过合理缩放、合理质量的 JPEG，比尺寸错误的巨型 WebP 更好。大多数糟糕的图像性能来自过大的像素尺寸，不是 JPEG 本身。
需要像素保持精确时用 PNG
PNG 不是现代的照片配送格式，它是精度格式。当无损边缘、文字或透明比文件体积更重要时才用它。
适合 PNG 的场景：
- 含小字号的 UI 截图。
- 图表、示意图、线稿。
- 没有 SVG 备用时的标志。
- 设计工作流里的透明位图素材。
- 会被反复编辑的文件。
不适合 PNG 的场景：
- 相机照片。
- 英雄图背景。
- 没有透明的大幅商品照。
- 换成 WebP 或 AVIF 也无妨的装饰图。
照片型的 PNG，可能比看起来相近的 JPEG／WebP／AVIF 大好几倍。若图片是摄影素材、又不需要透明或严格像素保留，PNG 通常是错误的导出。
标志与图标别忘了 SVG
大多数"最佳格式"文章只比较 JPG、PNG、WebP、AVIF，但网站的标志和图标常常更适合 SVG。SVG 是矢量，在任何尺寸下都清晰，通常也比位图版的标志小得多。
SVG 适合：
- 网站标志。
- 简单图标。
- 界面符号。
- 本就是矢量的扁平插画。
需要改用 PNG 或 WebP 的情况：素材是复杂的位图；平台会剥离 SVG；SVG 的来源不可信。SVG 可以携带类代码的标记，只用来自可信流程的 SVG 素材。
按页面类型决定格式
不同页面配得上不同的格式选择。首页英雄图和帮助文章里的截图，不应该被同等对待。
| 页面或素材 | 推荐组合 | 说明 |
|---|---|---|
| 首页英雄图 | AVIF 第一，WebP 第二，JPEG 回退 | 若是 LCP 图则预加载或提高优先级 |
| 博客文章图 | WebP，必要时加 JPEG 回退 | 按实际显示的内容宽度缩放 |
| 商品列表网格 | WebP 缩略图 | 保持尺寸一致，避免布局位移 |
| 商品详情图库 | 大图用 AVIF／WebP，回退用 JPEG | 发布前测试放大的细节视图 |
| 文档中的截图 | PNG 或无损 WebP | 避免文字周围出现有损伪影 |
| 标志 | SVG | 仅在必需时用 PNG 回退 |
| 作者头像 | WebP | 若 CMS 不支持 WebP，JPEG 也够 |
| 邮件图片 | JPEG 或 PNG | 邮件类工作流通常比浏览器更严 |
| 可下载的媒体宣传图 | JPEG 加可选的高分辨率源图 | 用户往往更需要兼容性而非最小体积 |
如果本周只能做一件事，从首屏之上最大的图片，以及访问量最高的图片密集模板开始。先把每一个小图标都换掉看着很有成就感，却几乎推不动性能指标。
正确的回退模式
上线的页面里，<picture> 元素让浏览器挑选第一个它支持的格式。web.dev 推荐 AVIF 第一、WebP 第二、JPEG 回退的模式。嵌套的 img 继续承担 alt、width、height 和回退 src。
<picture>
<source
type="image/avif"
srcset="/images/hero-1200.avif 1200w, /images/hero-2400.avif 2400w"
sizes="100vw"
/>
<source
type="image/webp"
srcset="/images/hero-1200.webp 1200w, /images/hero-2400.webp 2400w"
sizes="100vw"
/>
<img
src="/images/hero-1200.jpg"
width="1200"
height="800"
alt="装修完成的厨房，胡桃木橱柜与自然采光"
/>
</picture>
把 JPEG 回退放在 img 元素里；有意义的 alt 也放在这里。别把唯一有意义的描述藏在 source 标签里——浏览器不会从 source 读 alt。
对 LCP 英雄图还要考虑加载优先级。主英雄图别懒加载，首屏之下的图则可以借助懒加载。
真正有用的质量设置
质量数值并不通用。WebP 的 80、AVIF 的 50 和 JPEG 的 85 并不是同一个意思，不同编码器的行为也各不相同。
请把下面的值当作起点，而不是规则。
| 格式 | 起始质量 | 用途 |
|---|---|---|
| JPEG | 80–88 | 兼容回退或邮件里的照片 |
| WebP | 78–85 | 内容照片与英雄图备选 |
| WebP | 70–78 | 缩略图与网格图 |
| AVIF | 45–65 | 需要减重的大幅照片 |
| PNG | 没有有损质量滑杆 | 截图、示意图、透明、精确素材 |
导出的图片一定要在它实际出现在页面上的尺寸下比较。若一张图显示宽度只有 600 px，却在 4000 px 全放大下评判，会把访客其实看不到的无害压缩放大成缺陷。也要试试暗色渐变、肤色、商品纹理和文字叠层——比一块平的蓝天更能暴露压缩问题。
现实可行的迁移计划
如果你在整理一个已经上线的站点，别一开始就把整个媒体库都转掉，从能量化影响的地方开始。
- 导出访问量最高页面上最大的图片清单。
- 标出哪些位于首屏之上或可能是 LCP 图。
- 把每张图缩到它实际显示的最大尺寸。
- 先把照片转成 WebP。
- 在最重的英雄图或图库上测试 AVIF。
- 需要兼容老浏览器、邮件或 CMS 的模板保留 JPEG 回退。
- 截图、示意图、精确图形留作 PNG 或无损 WebP。
- 补齐
width、height、srcset、sizes和有描述性的alt。 - 在改动前后各跑一次 Lighthouse 或你的性能监控。
这套流程没有"AVIF 最好"那句口号响亮，但在真实站点上更容易见效。
用 PhotoTools 转换格式
PhotoTools 可以在浏览器里转换 JPG、PNG、WebP、AVIF 和 HEIC 文件。拖入图片、选择目标格式、对有损输出调整质量，然后转换、下载结果。批量转换在迁移一整包商品图或博客图时很好用。
批量上手前的一个简单测试：
- 挑一张明亮的、一张昏暗的、一张有人脸的、一张有细节的照片。
- 导出 WebP 和 AVIF 版本。
- 按实际显示尺寸比较。
- 检查文件体积的节省。
- 上传一份到 CMS，确认平台接受。
iPhone 的 HEIC 文件在发布前先转成 JPEG 或 WebP。HEIC 作为拍摄和保存格式很有用，但不是可以直接对外发布的安全网页格式。
2026 年推荐的参考来源
本推荐基于当前的浏览器与性能文档以及真实的网页发布工作流：
- MDN 图像文件类型指南介绍 AVIF、WebP、JPEG、PNG、SVG、浏览器支持以及何时应该回退。
- Chrome Lighthouse 文档解释为什么 AVIF 和 WebP 能相对旧的 JPEG 和 PNG 减轻图像重量。
- Google WebP 文档公布无损与有损 WebP 相对 PNG、JPEG 的体积节省。
- web.dev 关于图像性能说明现代格式与
<picture>元素如何嵌入图像加载与 LCP。
一句话总结：日常网页格式用 WebP，图像重量真正影响性能的地方补上 AVIF，兼容性场景保留 JPEG，真需要 PNG 或 SVG 的素材就让它保留。