一、三种老格式，各有各的活

判断的逻辑很简单：有丰富的颜色渐变（照片）用 JPEG；有清晰边缘和纯色块（截图、图标）用 PNG；要透明也用 PNG。

GIF 现在的地位很尴尬：256 色、体积大、画质差，唯一的优点是到处都能播。同为动图，WebP 和 AVIF 体积小得多——今天继续用 GIF，多半是历史包袱。

SVG 则完全是另一类：它存的是【画法】而不是【像素】。所以放多大都不糊，而且能用 CSS 改色——图标、logo、图表首选它。代价是照片不能用它。

二、今天该用什么

看网页上的实际使用情况（W3Techs，2026 年 9 月）：

前三名差距不大，是因为很多站同时用好几种格式。 值得看的是方向：WebP、SVG、AVIF 是涨得最快的三个，GIF 和 JPEG 在慢慢退。

体积上的账：同样一张图，WebP 比 JPEG 小约 35%；AVIF 在复杂画面上最多能小 60%。代价是编码更慢、老设备可能不认。

所以实践上的顺序是：默认上 WebP，用 picture 包一层保留 JPEG 或 PNG 兜底，对流量敏感的大图再考虑 AVIF。 这样新浏览器拿小的，老浏览器也不至于看不到图。

三、两条纪律：按显示尺寸切图、为高分屏备 2 倍图

图片优化的收益，一大半来自【不传用不上的像素】。

第一条：布局里显示多宽，就切多宽的图。 一个在页面上显示 800 像素宽的图，不要上传 6000 像素的原图——多出来的像素用户看不见，但每一个都要下载。

第二条：为高分屏准备 2 倍图，用 srcset 交给浏览器自己挑。 在 img 标签里列出 1 倍和 2 倍两个文件，浏览器会按设备像素比和网络状况选一个。这样既不浪费流量，也不在高分屏上糊掉。

回到 7-3 那句【内容是网站的本体】——图片是内容里最重的一块，把图压好，往往比优化代码见效快得多。

四、动手 Demo：同一张图，换格式能省多少

用一张 100 KB 的 JPEG 做基准，把换格式的收益算出来。

size = 100   # KB
print("  100 KB 的 JPEG -> WebP %.0f KB" % (size * 0.65))
print("  再转 AVIF -> %.0f KB" % (size * 0.65 * 0.4))
print("  页面 20 张图，合计省 %.1f MB" % (20 * size * 0.35 / 1024))

实跑输出：

--------------------------------------------------------------------
图像格式——一张图该怎么存
--------------------------------------------------------------------
  先看现在网页上都在用什么格式（W3Techs，2026-09-01）：

  格式     网站使用率
  --------------------
  PNG      75.4%
  JPEG     69.3%
  SVG      68.0%
  WebP     22.4%
  GIF      13.4%
  --------------------
  三者差距不大是因为很多站同时用好几套格式。
  值得看的是增长方向：WebP、SVG、AVIF 是涨得最快的三个，
  GIF 和 JPEG 在慢慢退。

  每种格式各有各的活：

  格式     压缩方式        透明       动画       最适合
  --------------------------------------------------------------------
  JPEG     有损            不支持     不支持     照片、色彩丰富的大图
  PNG      无损            支持       不支持     截图、图标、线稿
  GIF      无损 256 色     支持       支持       老旧的小动图
  WebP     有损 / 无损     支持       支持       通用替代，体积更小
  AVIF     有损            支持       支持       同画质体积最小
  SVG      矢量            支持       支持       图标、标志、图表
  --------------------------------------------------------------------
  体积上的账：同样一张图，WebP 比 JPEG 小约 35%；
  AVIF 在复杂画面上最多能小 60%。代价是编码更慢，
  老设备可能不认——所以要用【picture】包一层做降级。

  落到具体动作，一张图只需要问三个问题：

  是什么图         存成什么
  ----------------------------------------------
  照片、实拍       JPEG 或 WebP（优先 WebP）
  要透明背景       PNG 或 WebP
  图标、标志       SVG（矢量，放大不糊）
  短动画、动图     WebP 或 AVIF；长了就改用视频
  ----------------------------------------------
  最后两条纪律：别再上传 6000 像素的原图（布局里显示多宽就切多宽），
  并为高分屏准备 2 倍图，用 srcset 交给浏览器自己挑。

看第一行：100 KB 的 JPEG 换成 WebP 只要 65 KB——同一张图、肉眼几乎看不出差别。 看第三行：20 张图就省下约 0.7 MB。在手机弱网下，这 0.7 MB 常常就是【打开还是关掉】的差别。 但别只盯着格式：把 6000 像素的原图换成 800 像素的，省下来的是几十倍，比换编码格式管用得多。 先做尺寸，再挑格式。 最后回到那张表：GIF 只有 13.4%——它正在被 WebP 和视频取代。新做的动图，直接用 WebP 或短 MP4。

30 秒实验

1. 找一张你网站上的照片，把它从 JPEG 转成 WebP，比较文件大小。
2. 把一个图标从 PNG 换成 SVG，然后把它放大到很大，看边缘是否还清晰。
3. 数一数你家网站首页一共多少张图，估算一下总体积。

常见误区

1. 错误：PNG 比 JPEG 清晰，所以都用 PNG。——纠正：PNG 是无损，但体积常常是 JPEG 的几倍。 照片用 PNG，等于用三倍流量换几乎看不出的提升。
2. 错误：SVG 是【矢量版 PNG】，所有图都能用。——纠正：SVG 只能画几何图形，存不了照片——照片是几百万个像素，用矢量描述会大到离谱。
3. 错误：格式越新越好，直接全换 AVIF。——纠正：AVIF 编码慢、老设备不支持。 稳妥做法是 WebP 打底 + picture 兜底，AVIF 只用在最重的那几张图上。

• ☐ 下一节（7-11 防止复制保护措施：防复制代码）

相关笔记

• 提供对不同设备的支持 —— 上一节管样式，这一节管图片
• Web网页的主要部分 —— 图片写在 HTML 里
• 02 信息的数字化表示 —— 图像为什么能被压缩
• 制作Web网页 —— HTML 里怎么放图
• 视频和音频文件 —— 另一种【又大又该压缩】的资源
• 🕸️ Web技术原理 · 索引