网页图片格式完整选择指南

网页图片格式的演进历史

网页图片格式的发展跨越了 30 多年。1990 年代：GIF（1987）和 JPG（1992）是主导格式，GIF 用于简单图形，JPG 用于照片。PNG 于 1996 年发布，提供了无损压缩和透明度支持，逐渐取代 GIF 用于静态图形。2000 年代：JPG 和 PNG 成为标准，SVG（矢量图形）出现。2010 年代：Google 推出 WebP（2010），引入了更高效的压缩。2020 年代：AVIF（2019）基于 AV1 视频编解码器出现，提供了迄今最高的压缩效率。

六种主要 Web 图片格式详解

JPG：适合照片，有损压缩，无透明度，文件小，兼容性最好。PNG：适合图形和 UI，无损压缩，支持透明度，文件较大。WebP：全能型，同时支持有损/无损和透明度，比 JPG/PNG 更小，97% 浏览器支持。AVIF：次世代格式，压缩最强，支持 HDR，90%+ 浏览器支持但编码较慢。GIF：只用于简单动画，有 256 色限制，可被 WebP 动画或视频替代。SVG：矢量图形，任意缩放不失真，适合 Logo、图标和插图，不适合照片。

决策树：为你的图片选择正确格式

图片是矢量图/Logo/图标?
Is it a vector/logo/icon?
  是/Yes → SVG
  否/No ↓

需要动画?
Need animation?
  是/Yes → WebP 动画 or MP4 视频 (优于 GIF)
  否/No ↓

是照片/自然图像?
Is it a photo/natural image?
  是/Yes → WebP(lossy) > AVIF > JPG
  否/No ↓

需要透明背景?
Need transparent background?
  是/Yes → WebP(lossless) > PNG
  否/No ↓

是 UI/截图/图表?
Is it UI/screenshot/chart?
  → WebP(lossless) > PNG

需要最广泛兼容性（邮件/打印）?
Need widest compatibility (email/print)?
  → JPG (照片/photos) or PNG (图形/graphics)

SVG 的特殊地位

SVG（可缩放矢量图形）是一个独特的存在，它不是光栅图（不由像素组成），而是 XML 格式的矢量描述。SVG 的优势：任意缩放不失真（在 Retina 屏和 4K 屏上完美显示）；文件通常很小（特别是简单图形）；可以用 CSS 动画化；可以内联在 HTML 中，减少 HTTP 请求；可以用 CSS 控制颜色（方便主题切换）。

SVG 的局限：不适合照片或复杂自然场景（文件会非常大）；复杂的 SVG 渲染可能比光栅图更占 CPU；某些旧版邮件客户端不支持 SVG。对于网站的 Logo、图标系统和插图，SVG 是首选。

响应式图片的格式选择

在响应式 Web 设计中，图片需要适应不同屏幕尺寸和分辨率。最佳实践是同时提供多种尺寸和格式：使用 srcset 提供不同分辨率的版本（1x、2x 用于 Retina 屏幕），使用 picture + source 提供 WebP 和 JPG/PNG 回退，使用 sizes 属性指定在不同视口宽度下使用的图片大小。

图片格式与 Core Web Vitals

Google 的 Core Web Vitals（核心网页指标）直接受图片格式选择影响。LCP（Largest Contentful Paint，最大内容绘制）是最重要的指标之一，通常由页面上最大的图片决定。优化 LCP 的图片策略：对英雄图（Hero Image）使用 WebP 或 AVIF；在 HTML 中设置正确的 width 和 height 属性（防止布局偏移，改善 CLS）；对首屏图片使用 fetchpriority="high" 提升加载优先级；对非首屏图片使用 loading="lazy" 延迟加载。

选择格式的终极决策原则

一句话总结：在 2025 年，对于网站所有光栅图片，将 WebP 作为首选格式，JPG/PNG 作为回退（使用 picture 元素），SVG 用于所有可以用矢量描述的图形（Logo、图标、插图），AVIF 作为锦上添花的进一步优化（对支持的浏览器）。遵循这一原则，可以在性能、兼容性和开发复杂度之间取得最优平衡。