33. 图像格式：JPEG、PNG、GIF、WebP

本节目标：了解四种常用图片格式的特点，学会根据场景选择合适的格式。

不同的图片格式有不同的”性格”。用对了，图片又小又清晰；用错了，要么模糊要么臃肿。

JPEG：照片的首选

JPEG（Joint Photographic Experts Group）是最常见的图片格式。

优点：压缩率高，文件小。适合色彩丰富、渐变细腻的照片
缺点：有损压缩，每次保存都会损失一点质量。不支持透明

<img src="sunset.jpg" alt="日落时分的海滩" />

适用场景：照片、电商商品图、banner 大图。

Note

JPEG 不支持透明背景。如果需要透明，选 PNG 或 WebP。

PNG：需要透明的选它

PNG（Portable Network Graphics）支持透明背景和半透明效果。

优点：无损压缩，质量高。支持 alpha 通道（透明度）
缺点：文件比 JPEG 大，尤其不适合照片这种大图

<img src="logo.png" alt="公司 Logo（透明背景）" />

适用场景：Logo、图标、需要透明背景的截图、文字较多的图。

GIF：简单动画

GIF（Graphics Interchange Format）支持动画，但只支持 256 色。

优点：支持动画，所有浏览器都支持
缺点：颜色少，大图文件臃肿，不支持半透明

<img src="loading.gif" alt="加载中动画" />

适用场景：简单小动画、表情包。

Tip

如果需要更高质量的动画，可以用 <video> 代替 GIF。同样的动画，视频格式的文件只有 GIF 的十分之一。

WebP：现代综合之选

WebP 是 Google 开发的现代格式，兼顾 JPEG 和 PNG 的优点。

优点：有损和无损都支持，支持透明和动画。同等质量下文件比 JPEG/PNG 小 25-35%
缺点：旧版本浏览器（IE）不支持——不过 IE 已经淘汰了

<img src="hero.webp" alt="首页大图" />

适用场景：几乎所有场景，尤其适合追求性能的 Web 项目。

格式选择速查表

场景	推荐格式	原因
照片、大图	JPEG 或 WebP	压缩率高，文件小
需要透明	PNG 或 WebP	支持 alpha 通道
Logo、图标	PNG 或 SVG	无损，清晰
简单动画	GIF 或视频	GIF 兼容性最好
通用首选	WebP	兼顾质量和体积

什么时候用 SVG

SVG 是矢量格式，和上面四种位图完全不同。

<img src="icon.svg" alt="搜索图标" />

适合：Logo、图标、简单图形、需要缩放到任意尺寸的图。不适合照片。

Tip

现代 Web 开发中，能用 SVG 做图标就用 SVG，比 PNG 图标清晰得多，而且一个文件适配所有屏幕。

AVIF：下一代格式

AVIF 是比 WebP 更新的格式，压缩率更高。

同等质量下比 WebP 还小 20%
现代浏览器支持度不错，但比 WebP 差一些

如果追求极致性能，可以考虑 AVIF。不过目前 WebP 的兼容性更好，是更稳妥的选择。

格式选择决策树

你的图片需要透明吗？
├── 是 → 需要动画吗？
│       ├── 是 → WebP（或 GIF 保底）
│       └── 否 → PNG 或 WebP
└── 否 → 是照片/色彩丰富吗？
        ├── 是 → WebP 优先，JPEG 保底
        └── 否 → SVG 或 PNG

下一节学习 SVG 矢量图的基础知识。