theme: vue-pro
前言
图片在 Web 站点里随处可见，而 JPG 和 PNG 又是使用最广泛的两种图片格式，他们各自有什么特点，又适合在什么场景使用呢？
阅读完本文你将学习到：
- JPG 格式图片特性
- PNG 格式图片特性
- JPG 和 PNG 适用场景
1. 什么是 JPG
JPG 全称为Joint Photographic Expert Group（联合照片专家组），后缀名为.jpg或者.jpeg。是一种有损的基于直接色的图片格式，由于采用直接色，JPG 可使用的颜色有 1600w 之多(2^24)，但是人眼只能识别大约 1w 多种颜色， 因此 JPG 非常适合色彩丰富的图片，JPG 有损压缩去掉肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。
有压缩比，压缩比越高，图片质量越低，但文件越小；但无法保存透明度，不能呈现动画效果。
2. JPG的渐进式加载
JPG 文件格式有两种保存方式，分别是 Baseline JPG（线性加载）和 Progressive JPG（渐进式加载）。这两种格式有相同尺寸以及图像数据，扩展名也相同，唯一的区别是二者显示时加载的方式不同。 Baseline JPG 的存储方式是由上到下的传统存储方式，从上到下依次扫描存储，所以当显示内容时数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完。如果文件较大或者网络速度较慢，那么就会看到图片被一行行加载的效果。而 Progressive JPG 文件包含多次扫描，这些扫描信息存储在 JPG 文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。现在的网站大多数图片使用的都是 Progressive JPG，当在网站上打开一些较大的图片时，就会出现这一现象。
2. 什么是PNG
PNG 全称为Portable Network Graphics（可移植网络图形），PNG 的开发目的是为 GIF 格式创建一种现代的、免费的替代方案。与 GIF 一样，PNG 包含一个 alpha 通道，用于定义图像中的透明区域。但与仅限于 256 色且只允许一种透明颜色的 GIF 格式相比，PNG 提供了一个真正的 Alpha 通道，允许部分透明。
3. JPG 压缩
通常来讲，JPG 格式的图片压缩率越高，质量就越差。但值得注意的是，文件大小和压缩级别之间不是线性关系，在某些情况下，可以几乎不影响图片质量的同时，大幅度缩小文件大小，我们将图片压缩程度指定为图片质量值，值 100 表示没有压缩的 100% 质量，大多数相机和智能手机，以 JPG 格式保存照片的标准质量是95 。例如，下面这张照片的未压缩大小为 5 MB，分辨率为 920 x 1227 像素。此处图片的显示质量为 95，由于 JPG 压缩，文件大小减小到 893k，但可以看到图片画面清晰程度与色彩信息几乎没有影响 。
继续把图片压缩到70的质量，可以看到清晰度还是几乎不受影响，但尺寸缩小到了 258k
继续压缩到30的质量，就会发现尺寸减少的不多(136k)，但是图片开始变得模糊
在压缩 JPG 格式的时候一般压缩率取 70% 至 80% 之间，这样可以在最大程度保证图片清晰度的同时，大幅度缩小图片尺寸。
4. JPG与PNG的压缩方式
JPG 使用的是有损压缩，也就意味着在图片变小的同时，图片中的部分数据会被永久删除。从长远来看，这是不可逆转的，因为每编辑和保存一次文件，都会丢失更多的数据。
PNG 使用无损压缩，这意味着压缩图像时不会丢失任何数据——无论编辑保存文件多少次，质量都保持不变。图像不会变得模糊或扭曲。
如果在低对比，图像颜色过渡平滑，噪声多，且结构不规则的情况下。PNG 格式尺寸会比 JPG 大很多，并且图像质量不会比 JPG 好很多，比如说一些渐变比较多或者色彩丰富的照片等等，用 JPG 格式是最合适的。 相应的，如果用来保存文本、线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG 格式的压缩效果就要比 JPG 好很多，并且不会出现 JPG 那样的高对比度区域图像有损的现象，比如说图表或者 icon 就更适合使用 PNG 格式。
5. JPG 和 PNG 对比
| JPG | PNG | |
|---|---|---|
| 压缩方式 | 有损 | 无损 |
| 加载方式 | 支持渐进式加载 | 不支持渐进式加载 |
| 文件大小 | 相对小，压缩情况 | 相对大 |
| 透明 | 不支持 | 支持，Alpha 通道 |
| 最大图像尺寸 | 65535像素 | 无限制 |
| 无损编辑 | 不支持 | 支持 |
总结
- 在颜色比较丰富，或者渐变色比较多的场景下，使用 JPG 格式，可以在最大程度保证图片质量的同时尽可能地缩小图片尺寸，这也是 JPG 是当前最流行的图片格式的原因。
- 对于诸如 icon 或者图表之类的较小又需要保存图片细节的图像，使用 PNG 格式，因为 PNG 的无损格式可以最大程度的保留图片质量，并且可以无损编辑。
- 对于需要透明度的场景，只能使用 PNG 格式，因为 JPG 格式不支持透明度，但 PNG 支持。
暂无评论内容