📚 课程目录第2章基础概念

2. 基础概念

做前端这么多年，我见过太多因为图片格式选错导致的性能灾难。有一次，一个活动页面的首屏加载时间硬生生被几张 PNG 大图拖到了 8 秒——用户早跑了。所以今天咱们就把这六种主流格式掰开揉碎，讲清楚它们各自适合什么场景。

下面这张 SVG 图，是我自己梳理的格式选择决策树。你可以把它当作本章的导航地图，后面每个小节都会对应到图上的某个分支。

JPEG 是历史最久、兼容性最好的有损格式。它用离散余弦变换把图像里的高频细节丢掉，换来极小的文件体积。

核心特点

我的习惯：产品详情页的轮播图，我一般用 JPEG 质量 75-85。低于 70 会出现明显的块状伪影，高于 90 体积翻倍但肉眼几乎看不出区别。

PNG 是无损压缩的代表。它用 DEFLATE 算法压缩，不会丢掉任何像素信息。但代价就是——文件大。

核心特点

我曾经踩过的坑：有一次设计师给了张 4000×3000 的 PNG 截图，足足 12MB。我直接扔到页面上，结果移动端加载花了 15 秒。后来用 TinyPNG 压缩到 2MB，再配合懒加载才解决。记住：PNG 适合小尺寸图标或需要透明通道的 UI 元素，千万别拿它存大照片。

GIF 诞生于 1987 年，只支持 256 色。但它有一个杀手锏——动画。而且兼容性极好，所有浏览器都认识它。

核心特点

我的建议：现在做动画表情或短循环动图，我优先用 WebP 或 APNG。GIF 只保留在需要兼容老旧系统的时候。你想想看，一个 5 秒的 GIF 动图动辄 3-5MB，换成 WebP 可能只有 500KB。

WebP 是 Google 在 2010 年推出的格式。它同时支持有损和无损压缩，还支持透明和动画。说白了，它想一统天下。

核心特点

实际效果：我在一个电商项目中，把首页的 JPEG 轮播图全部转成 WebP 有损模式（质量 80），总体积从 2.3MB 降到了 1.4MB，首屏加载时间缩短了 0.8 秒。而且用户完全看不出画质差异。

AVIF 基于 AV1 视频编码，压缩率比 WebP 还高 20%-30%。它是目前压缩效率最高的图片格式。

核心特点

注意：AVIF 编码速度较慢，服务端转换时会有 CPU 开销。我一般只在图片 CDN 开启自动转码的场景下使用，或者提前在构建阶段批量转换。

SVG 不是位图，它是用 XML 描述的矢量图形。放大缩小都不会失真，而且文件通常很小。

核心特点

我的习惯：所有图标、Logo、简单插画，我都用 SVG。而且我会把多个 SVG 合并成 SVG Sprite，减少 HTTP 请求。你想想看，一个 20KB 的 SVG Sprite 能装下 50 个图标，换成 PNG 图标集至少 200KB。

说了这么多，到底怎么选？我总结了一个简单的决策流程：

我的推荐组合：目前生产环境最稳妥的方案是「WebP 为主 + JPEG/PNG 兜底」。用 <picture> 标签做格式降级，浏览器会自动选择它支持的最优格式。下一章我会详细讲 <picture> 的用法，这里先记住这个原则。

嗯，格式对比就到这里。每种格式都有自己的脾气，选对了事半功倍，选错了用户买单。记住：没有最好的格式，只有最合适的场景。