HTML 图片格式

在构建网页时，图片用于视觉吸引力和信息传递。

然而，并非所有的图片都是生而平等的。了解不同的图片文件格式有利于优化网站性能和确保视觉效果。

就像你在上一章学到的使用 <img> 标签及其 src、alt、width 和 height 属性来嵌入图片一样，为这些图片选择正确的文件格式直接影响加载时间、图片质量，甚至影响图片在不同背景下的显示效果。

1. 理解图片压缩

在深入研究具体格式之前，你必须先理解压缩（Compression）。

压缩是减小图片文件大小的过程。文件越小，网页加载越快，用户体验就越好。压缩主要有两种类型：

1.1 有损压缩 (Lossy Compression)

有损压缩通过永久删除图片中的某些数据来减小文件大小。

• 原理：它会丢弃人类肉眼不太可能注意到的数据。当你查看图片时，你的大脑会自动“填补”缺失的信息。
• 后果：图片看起来与原图几乎一样，但文件小得多。但是，如果你反复保存有损格式的图片，质量会越来越差。
• 适用场景：照片、色彩复杂的图像。

1.2 无损压缩 (Lossless Compression)

无损压缩在不丢弃任何图像数据的情况下减小文件大小。

• 原理：它通过识别数据中的模式来工作。例如，如果一行有 100 个蓝色像素，它不会记录 100 次“蓝色”，而是记录“100 个蓝色像素”。
• 后果：当你打开图片时，它是原图的精确副本。
• 适用场景：Logo、图标、带有文字的截图。

2. JPEG (Joint Photographic Experts Group)

JPEG 是网络上最常见的图片格式，专为照片和色彩复杂的图像设计。

2.1 JPEG 的特点

• 有损压缩：它会丢弃一些数据。你可以选择压缩级别（例如 0-100 的质量），质量越高文件越大。
• 数百万种颜色：支持 1670 万种颜色，非常适合现实世界的照片。
• 不支持透明：JPEG 不支持透明背景。透明区域通常会被填充为白色或黑色。

2.2 何时使用 JPEG

• 照片：风景、人像、产品图。JPEG 擅长表现色彩和色调的细微渐变。
• 复杂图形：带有平滑颜色过渡或渐变的数字绘画。

2.3 何时避免 JPEG

• 有文字或锐利边缘的图像：JPEG 的压缩会在锐利线条周围产生“伪影”（模糊或块状噪点），让文字变得难以阅读。
• Logo 或图标：这些通常需要清晰的线条。
• 需要透明背景时：绝对不要用 JPEG。

3. PNG (Portable Network Graphics)

PNG 的开发是为了替代 GIF，它以其卓越的功能（尤其是透明度）迅速流行起来。

3.1 PNG 的特点

• 无损压缩：保存时不会丢失任何数据，画质完美还原。
• 支持透明 (Alpha 通道)：这是 PNG 的杀手级功能。它不仅支持完全透明，还支持半透明（例如阴影效果）。
• 颜色：支持数百万种颜色。

3.2 何时使用 PNG

• Logo 和图标：保证边缘清晰锐利。特别是当 Logo 需要放在不同颜色的背景上时，透明度至关重要。
• 包含文字或锐利线条的图形：截图、图表、带有文字的 Banner。
• 需要复杂透明度的图像：例如带有阴影的对象。

3.3 何时避免 PNG

• 大型照片：虽然 PNG 也能存照片，但因为它是无损的，文件体积会比 JPEG 大得多，这会严重拖慢网页加载速度。

4. GIF (Graphics Interchange Format)

GIF 是最古老的格式之一，以其动画功能而闻名。

4.1 GIF 的特点

• 无损压缩 (颜色受限)：虽然是无损的，但它最多只能包含 256 种颜色。
• 支持动画：可以在一个文件中存储多帧图像，形成简单的动画。
• 二值透明：支持透明，但不支持半透明。一个像素要么完全透明，要么完全不透明（没有边缘羽化效果）。

4.2 何时使用 GIF

• 简单动画：加载时的旋转图标、简单的装饰动画。
• 极小的图标：颜色很少的小图标。

4.3 何时避免 GIF

• 照片：256 色的限制会让照片看起来有很多噪点，像旧报纸一样（色调分离）。
• 需要高质量透明时：因为它不支持半透明阴影。

5. WebP：现代全能选手

由 Google 开发的 WebP 是一种现代图像格式，旨在为网页提供更优秀的压缩性能。

你可以把 WebP 看作是图像格式界的“瑞士军刀”。它的目标是同时替代 JPEG、PNG 和 GIF，在保持高质量的同时，显著减小文件体积。

5.1 WebP 的特点

1. 超强压缩（更小的体积）
1. WebP 支持有损和无损压缩。
2. 根据 Google 的数据，WebP 无损图像比 PNG 小 26%。
3. WebP 有损图像比同画质的 JPEG 小 25-34%。
4. 这意味着网页加载速度更快，大大节省用户的流量。
2. 全功能支持
1. 它支持 透明度（像 PNG 一样）。
2. 它支持 动画（像 GIF 一样）。
3. 它支持 丰富的色彩（像 JPEG 一样）。
3. 浏览器支持
1. 目前，所有现代浏览器（Chrome, Firefox, Edge, Safari）都已完全支持 WebP。
2. 注意：只有非常古老的浏览器（如 Internet Explorer）不支持它。

5.2 何时使用 WebP

几乎所有场景：如果你希望网站加载速度快，WebP 是目前绝大多数图片（照片、Banner、透明图）的首选格式。

5.3 如何使用 WebP

用法和普通图片一模一样

<img src="images/photo.webp" alt="风景照" width="600" height="400">

6. 格式选择总结表

7. 总结

• JPEG, PNG, GIF 是经典的老三样，依然随处可见。
• WebP 是现代的新标准，它集众家之长于一身：体积更小、功能更全。
• 作为一名现代 Web 开发者，尽可能优先使用 WebP 是提升用户体验的最简单方法之一。