JPG和PNG深度对比解析

╰半橙微兮° 2023-10-03 23:52 31阅读 0赞

> 本文转载自[上链易][Link 1]，部分叙述有修改。

图片在生活中随处可见，JPG和PNG又是使用最广泛的两种图片格式，但大部分人都只是停留在使用的阶段，并不了解它们是怎么产生的、有什么特点。本篇文章将深度解析JPG和PNG的标准、对比和使用场景，使您对其有一个清楚的认知。

**主要从以下几个方面进行阐述：**

1、什么是 JPG 或 JPEG

2、什么是 PNG

3、JPG图片质量对画面的影响

4、JPG的两种加载方式5.JPG与PNG的压缩方式

6、JPG 与 PNG在屏幕截图方面区别

7、JPG 与 PNG各方面对比

8、JPG 和 PNG 最适合用于什么

9、JPG和PNG格式扩展

10、JPG和PNG常见问题

![6b84c304e6f3a102770a64e86c913c61.png][]

#### **1.什么是JPG或JPEG** ####

JPG全称为Joint Photographic Expert Group（联合照片专家组），是由国际标准化组织（ISO）制订的面向连续色调静止图像的一种压缩标准，JPEG是JPG的正式扩展名，两者完全相同，使用不同的扩展名称是历史遗留问题。在早期，因为 DOS、Windows 95等系统命名规则只支持最长3字符的扩展名，为了兼容采用了.JPG。而由于 Mac 并不限制扩展名的长度，当时苹果机上都使用了.JPEG的后缀名。虽然现在Windows也可以支持任意长度的扩展名了，但大家已经习惯了.JPG的叫法，也就没有强制修正。也因历史习惯和兼容性考虑，.JPG目前更流行。

#### **2.什么是PNG** ####

PNG全称为Portable Network Graphics（可移植网络图形），由万维网联盟 (W3C) 的一个工作组于 1994 年开发，后来在 ISO 标准 ISO/IEC 15948: 2003 中指定。PNG 的开发目的是为 GIF 格式创建一种现代的、免费的替代方案。与 GIF 一样，PNG 包含一个 alpha 通道，用于定义图像中的透明区域。但与仅限于 256 色且只允许一种透明颜色的 GIF 格式相比，PNG 提供了一个真正的 Alpha 通道，允许部分透明。

#### **3.压缩对JPG图片质量的影响** ####

一般来说，**JPG 格式的图片**的**压缩率**越高，**质量**就越差。但是，压缩级别和文件大小之间的关系不是线性的。几乎不影响图片质量的压缩也可以显着减小文件大小。我们将图片压缩程度指定为图片质量值，值 100 表示没有压缩的 100% 质量，大多数相机和智能手机，以 JPG 格式保存照片的标准质量是95 。例如，下面这张照片的未压缩大小为 20 MB，分辨率为 4,037 x 2,691 像素。此处图片的显示质量为 95，但由于 JPG 压缩，文件大小减小到不到1 MB，但可以看到图片画面清晰程度与色彩信息几乎没有影响 。

![194c2e0fd01fc0096e66c5057c677a5c.jpeg][]

将图片质量压缩到70,图片大小为373k，画面清晰度和图片质量为95时几乎没有差异。

![419c6afeaffd40dfefeb980692fa8f13.jpeg][]

**压缩率过高则会显著降低图像质量**，且文件大小不会减少太多。我们再次将其压缩，这次将图片质量压缩至30，图片内存为200k，内存并没有下降太多，反而可以轻易的看到天空中的蓝色变化不再均匀。

![25d4b8bcff2606f36993c618e71b6bd5.jpeg][]

将质量70的图片进行放大，可以看到清晰度有明显的下降。由此可知，当图片被放大时，JPG的质量差异是明显可见的。这就是为什么在打印JPG图片时不应更改 JPG 质量设置的原因。

![374c58c2ec9b295279083964e8764fcc.jpeg][]

####       **4.JPG的渐进式加载** ####

JPG文件格式有两种保存方式，分别是Baseline JPG（线性加载）和Progressive JPG（渐进式加载）。这两种格式有相同尺寸以及图像数据，扩展名也相同，唯一的区别是二者显示时加载的方式不同。 Baseline JPG的存储方式是由上到下的传统存储方式，从上到下依次扫描存储，所以当显示内容时数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完。如果文件较大或者网络速度较慢，那么就会看到图片被一行行加载的效果。而Progressive JPG文件包含多次扫描，这些扫描信息存储在JPG文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。现在的网站大多数图片使用的都是Progressive JPG，当在网站上打开一些较大的图片时，就会出现这一现象。

#### **5.JPG与PNG的压缩方式** ####

JPG 使用的是有损压缩——这意味着当图像变小时，图像中的某些数据会被永久删除。从长远来看，这可能会影响文件的质量，因为每次编辑和保存文件时，都会丢失更多数据。  
PNG 使用无损压缩。这意味着压缩图像时不会丢失任何数据——无论编辑保存文件多少次，质量都保持不变。图像不会变得模糊或扭曲。  
如果用于低对比，图像颜色过渡平滑，噪声多，且结构不规则的情况下。用PNG代替JPG，文件尺寸会增大很多，而图像质量的提高有限。相应的，如果用来保存文本、线条或类似的边缘清晰，有大块相同颜色区域的图像，PNG格式的压缩效果就要比JPEG好很多，并且不会出现JPG那样的高对比度区域图像有损的现象。

#### **6.JPG 与 PNG在屏幕截图方面区别** ####

最好以 PNG 格式创建屏幕截图，这是几乎所有屏幕截图工具的默认设置。手机端一般会自动将屏幕截图保存为 PNG 格式。主要是因为屏幕截图一般包含具有清晰对比度的精确直线和没有颜色渐变的单色区域。这些都是JPG 格式的主要弱点。下面比较一下JPG和PNG在屏幕截图上的效果差异。

![fc1b92b2ae95df25f653163ab8a9e780.jpeg][]

JPG格式的截图，色块区域出现了明显的伪影

![44de07e240ef3fb9dbc300226505888e.png][]

PNG格式的截图与原界面几乎完全相同

#### 7.JPG 与 PNG各方面对比 ####

<table> 
 <tbody> 
  <tr> 
   <td></td> 
   <td>JPG</td> 
   <td>PNG</td> 
  </tr> 
  <tr> 
   <td>压缩方式</td> 
   <td>有损</td> 
   <td>无损</td> 
  </tr> 
  <tr> 
   <td>文件大小</td> 
   <td>小，取决于压缩</td> 
   <td>明显大于JPG</td> 
  </tr> 
  <tr> 
   <td>加载方式</td> 
   <td>支持渐进式加载</td> 
   <td>不支持渐进式加载</td> 
  </tr> 
  <tr> 
   <td>透明</td> 
   <td>不支持</td> 
   <td>Alpha 通道</td> 
  </tr> 
  <tr> 
   <td>无损编辑</td> 
   <td>不支持</td> 
   <td>支持</td> 
  </tr> 
  <tr> 
   <td>图像中元数据</td> 
   <td>EXIF 和 IPTC 标准</td> 
   <td>可能存在，但未标准化</td> 
  </tr> 
  <tr> 
   <td>最大图像尺寸</td> 
   <td>长边：65,535 像素</td> 
   <td>理论上无限制</td> 
  </tr> 
 </tbody> 
</table>

#### **8.JPG 和 PNG 最适合用于什么** ####

JPG格式适合用于照片，在风景或人物图片中几乎看不到压缩伪像。由于尺寸小，适合在网站中使用和网络传输。

![8904cb3ac312da903ee0ead4a00932f4.jpeg][]

PNG适用于所有包含锐边和纯色的图形。用于保存屏幕截图、图标和需要透明背景的图片。

![99dec1b3ec45ac071ecec97f7d511e27.png][]

#### **9.JPG和PNG格式扩展：** ####

JPEG 2000

此格式与原始 JPEG 格式不兼容，可在相同质量级别或无损压缩下实现更好的压缩。图像的某些细节区域可以比不太重要的区域以更好的质量显示。这种格式允许每个颜色通道超过 8 位和更大的图像尺寸。可以选择多种渐进方式加载图片，元数据可以包含任何XML格式的信息。可能的文件扩展名是 .jp2、.j2k、.jpf、.jpg2、.jpx 和 .jpm。

JNG

JPEG 网络图形 (JNG) 扩展了 JPEG 格式以包含一个alpha 通道，该通道可以以无损 PNG 数据流的形式集成。

APNG

APNG 扩展了 PNG 格式以提供对动画的支持，类似于 GIF 格式。

PNG +

PNG 格式的扩展，允许图像层和多页布局。未获得认可。

#### **10.JPEG 与 PNG 常见问题** ####

**JPEG 或 PNG 文件是否支持动画？**

不支持，JPEG 和 PNG 文件都不支持动画图像。

**JPEG 和 PNG 是位图文件还是矢量文件？**

JPEG 和 PNG 都是位图文件类型。它们由固定数量的彩色像素组成。

**JPEG 或 PNG 文件是否与 CMYK（印刷四色模式）兼容？**

PNG 不支持 CMYK 颜色模式，因为它们的设计更多地考虑了网络，而不是打印。JPEG 通常支持 RGB 而不是 CMYK。

[Link 1]: https://zhuanlan.zhihu.com/p/442365019
[6b84c304e6f3a102770a64e86c913c61.png]: https://img-blog.csdnimg.cn/img_convert/6b84c304e6f3a102770a64e86c913c61.png
[194c2e0fd01fc0096e66c5057c677a5c.jpeg]: https://img-blog.csdnimg.cn/img_convert/194c2e0fd01fc0096e66c5057c677a5c.jpeg
[419c6afeaffd40dfefeb980692fa8f13.jpeg]: https://img-blog.csdnimg.cn/img_convert/419c6afeaffd40dfefeb980692fa8f13.jpeg
[25d4b8bcff2606f36993c618e71b6bd5.jpeg]: https://img-blog.csdnimg.cn/img_convert/25d4b8bcff2606f36993c618e71b6bd5.jpeg
[374c58c2ec9b295279083964e8764fcc.jpeg]: https://img-blog.csdnimg.cn/img_convert/374c58c2ec9b295279083964e8764fcc.jpeg
[fc1b92b2ae95df25f653163ab8a9e780.jpeg]: https://img-blog.csdnimg.cn/img_convert/fc1b92b2ae95df25f653163ab8a9e780.jpeg
[44de07e240ef3fb9dbc300226505888e.png]: https://img-blog.csdnimg.cn/img_convert/44de07e240ef3fb9dbc300226505888e.png
[8904cb3ac312da903ee0ead4a00932f4.jpeg]: https://img-blog.csdnimg.cn/img_convert/8904cb3ac312da903ee0ead4a00932f4.jpeg
[99dec1b3ec45ac071ecec97f7d511e27.png]: https://img-blog.csdnimg.cn/img_convert/99dec1b3ec45ac071ecec97f7d511e27.png