gif/jpg/png 图片格式 简单对比

Posted 2020-09-25

本文章来自于艾某人的网易博客。

在网站开发中，我们经常会用到背景图，或者是数据图，这些都是图片，我们常用的图片的文件格式有三种：GIF，JPG，PNG。这三种图片格式具有不同的特点，对动画、透明度支持的情况不同，同时对色彩的处理也不同。我们在开发的过程中只有选择合适的图片格式，才能使我们的开发速度更快。

 

在面试的过程中，发现被问的很频繁的是有关于图片格式的问题，这时候才猛然发觉我对这些问题知之甚少，仅停留在表面的一些认知，可能表面的认知也是需要提一下的，但是对于图片的认识越深，才能在选用的过程中选择最适合当前状况的图片格式。

如果对这些图片格式一无所知，为了单纯追求高清晰度的图片效果，或许会做出单一或者叫错误的选择。

gif图片格式

首先，gif格式的图片支持全透明，意思就是它并不支持半透明，仅可以是全透明或完全不透明，这是相对于png而言的。

其次，gif支持动画。1个gif文件中可以存储多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。

总结起来，gif广泛支持Internet标准，支持无损耗压缩和透明度，支持动画。但同时，gif格式不适合高清晰度图片，也不支持半透明显示。

jpg图片格式

引用一下，“JPG图片以24位颜色存储单个光栅图像。JPG是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式JPG文件支持交错。可以提高或降低JPG文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达100:1。JPG压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPG压缩无法提供理想的结果。有时，压缩比率会低到5:1，严重损失了图片完整性。这一损失产生的原因是，JPG压缩方案可以很好地压缩类似的色调，但是JPG压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。”

对于前端，首先要知道的是jpg格式的图片完全不支持任何透明的显示，因此当图片有透明度的要求的时候，可以先放弃jpg格式。

jpg支持最高程度的压缩，当需要没有透明要求的大图时，可以尝试保存成jpg格式，适当的压缩到人眼舒适的程度。

png图片格式

png图片能够分成png8、png24和png32，在平时的工作中其实png24已经是十分够用了，png相对于gif和jpg格式流行的比较晚，浏览器和相关图片处理软件对png的处理也是随着发展逐步成熟，人们已经意识到png的可贵。

png格式支持半透明显示，这是很重要的。PNG同时还支持真彩和灰度级图像的Alpha通道透明度。

png图片能获得高的压缩比而不损失数据。“PNG文件采用LZ77算法的派生算法进行压缩，其结果是获得高的压缩比，不损失数据。它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。”

具体的关于png图片格式的内容应该还会再稍微详细一点的介绍，毕竟png不是单纯的png。

Photoshop中，如何获取gif图像中的某一帧。