Foreword
In most web pages, images accounted for 60% -70% of the page size. So in web development, different scenarios for the performance and experience of the web page is very important to use the appropriate picture format. Picture format many types of paper only for several web applications commonly used image formats: gif, png, jpg, webp be a basic summary.
Picture format classification
- No compression. Uncompressed image format does not compress the picture data processing, to accurately render the original picture. BMP format is one of them.
- lossless compression. All data compression algorithm for image compression coding, can reduce the size of the picture in picture quality assurance at the same time. png is one of the representatives.
- Lossy compression. Image compression algorithm will not compress all data is encoded, but when compressed, in addition to the human eye can not recognize the picture detail. Thus lossy compression can significantly reduce the size of the picture in the case of the same picture quality. One of the representatives is jpg.
gif
Using LZW compression algorithm to encode, it is a lossless image format based on an index color. As a result of lossless compression, compared to the old bmp format, smaller size, and support transparency and animation. The disadvantage is gif stores only eight index (that is, up to express 2 ^ 8 = 256 colors), complex color, rich details of the picture does not fit saved as gif format. Simple color logo, icon, gif format suitable for wireframe.
jpg
jpg is a lossy image format based on the direct color. As a result of the direct color, color jpg may have used as many 1600w (2 ^ 24), while the number of people identifying color eye only about a variety 1w, jpg therefore very suitable for color-rich images, gradients. jpg lossy compression after removing the naked eye can not recognize the picture details, it can greatly reduce the size of the picture.
But the jpg is not suitable icon, logo, as compared to gif / png-8, it did not on the file size advantage.
png-8
png-8 lossless compression, the index is based on an 8-bit color bitmap formats. png-8 compared to transparent gif better support, under the same quality, size is also smaller. Gif very suitable as a substitute. Png-8 but also an obvious lack of animation is not supported. This is also an important reason no way to completely replace the gif-8 png. If there is no demand for animation recommended png-8 to replace the gif.
png-24
png-24采用无损压缩，是基于直接色的位图格式。png-24的图片质量堪比bmp，但是却有bmp不具备的尺寸优势。当然相比于jpg，gif，png-8，尺寸上还是要大。正是因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存。
png-24与jpg一样能表达丰富的图片细节，但并不能替代jpg。图片存储为png-24比存储为jpg，文件大小至少是jpg的5倍，但在图片品质上的提升却微乎其微。所以除非对品质的要求极高，否则色彩丰富的网络图片还是推荐使用jpg。
png-24与png-8一样也支持透明。
webp
WebP图片是一种新的图像格式，由Google开发。与png、jpg相比，相同的视觉体验下，WebP图像的尺寸缩小了大约30％。另外，WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式，当然目前webp的还没有得到全面的支持。
看一下png图片与webp图片的对比：
详见png VS webp。
再看一下webp的兼容性：
可以看到webp格式的支持度还不是很好，但是移动端的支持整体还可以。
总结
结合以上的介绍，我们了解了各种图片格式的优缺点及适用场景，我们再来通过一个图表来做一个抽象总结：
| 格式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| gif | 文件小，支持动画、透明，无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 |
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
| png | 无损压缩，支持透明，简单图片尺寸小 | 不支持动画，色彩丰富的图片尺寸大 | logo/icon/透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
最后附上Google关于图片格式的选择指南：
