了解图像格式
图像占网页流量的大部分。选择错误的格式可能会降低网页加载速度。下面介绍最常见的格式。
1. JPEG (Joint Photographic Experts Group)
JPEG 是照片最兼容的格式。它使用有损压缩以实现较小的文件大小。不支持透明度或动画。
2. PNG (Portable Network Graphics)
PNG 是一种无损格式。支持全透明（通道），非常适合徽标、图形和屏幕截图。
3. WebP (Google Web Picture)
WebP 是专为网页设计的现代下一代格式。支持有损和无损压缩、透明度和动画，文件大小比 JPEG/PNG 小 25-35%。
4. SVG (Scalable Vector Graphics)
SVG 是基于数学路径的矢量格式。可以无限缩放而不失真，是徽标和图标的理想选择。
5. GIF (Graphics Interchange Format)
GIF 是用于 256 色简单动画的传统格式。现代网页动画建议使用 WebP 或视频。
对比表格
| 格式 | 类型 | 压缩 | 透明度 | 动画 | 最佳用途 |
|---|---|---|---|---|---|
| JPEG | 位图 | 有损压缩 | ❌ 否 | ❌ 否 | 照片与复杂场景 |
| PNG | 位图 | 无损压缩 | ✅ 是 | ❌ 否 | 徽标、文本、透明图形 |
| WebP | 位图 | 支持两者 | ✅ 是 | ✅ 是 | 通用现代网页资源 |
| SVG | 矢量图 | 无损压缩 | ✅ 是 | ✅ 是 | 图标、徽标、矢量图画 |
| GIF | 位图 | 无损压缩 | ✅ 是 (1-bit) | ✅ 是 | 简单动画表情包 |