前言在大多数网页中，图片占页面大小的60%-70%。因此，在Web开发中，针对不同的场景使用合适的图片格式，对于网页的性能和体验来说是非常重要的。图片格式有很多种。本文仅对几种web应用中常用的图片格式做一个基本的总结：gif、png、jpg、webp。图片格式分类无压缩。无压缩图像格式不对图像数据进行压缩，可以准确呈现原始图像。BMP格式就是其中之一。无损压缩。压缩算法对图片的所有数据进行编码压缩，可以在保证图片质量的同时减小图片的体积。巴布亚新几内亚是代表之一。有损压缩。压缩算法并不对图片的所有数据进行编码压缩，而是在压缩时去除图片中人眼无法识别的细节。因此，有损压缩可以在同等画质的情况下，大大减小图片的体积。代表之一是jpg。gif使用LZW压缩算法进行编码，这是一种基于索引颜色的无损图像格式。由于无损压缩，尺寸比旧的bmp格式小，并且支持透明和动画。缺点是因为gif只存储8位索引（即最多可以表达2^8=256种颜色），所以颜色复杂、细节丰富的图片不适合保存为gif格式。颜色简单的标志、图标和线框适合用gif格式。jpgJPG是一种有损直接基于颜色的图像格式。由于使用了直接颜色，jpg可以使用多达1600万种颜色（2^24），而人眼能识别的颜色数量只有1w左右，所以jpg非常适合彩色图片和渐变色。jpg有损压缩在去除了肉眼无法识别的图片细节后，可以大大减小图片的体积。但是jpg不适合做图标和logo，因为它和gif/png-8相比在文件大小上没有优势。png-8png-8使用无损压缩，是一种基于8位索引颜色的位图格式。与gif相比，png-8对透明度的支持更好，同等质量下尺寸更小。非常适合作为gif替代品。但是png-8也有一个明显的缺点就是不支持动画。这也是png-8无法完全替代gif的重要原因。如果不需要动画，建议使用png-8而不是gif。png-24png-24使用无损压缩，是一种基于直接颜色的位图格式。png-24的图片质量与bmp不相上下，但是却有着bmp所没有的尺寸优势。当然，相对于jpg、gif、png-8来说，尺寸还是更大了。正是因为它的高质量和无损压缩，非常适合保存源文件或需要二次编辑的图像格式。PNG-24可以像jpg一样表达丰富的图片细节，但不能代替jpg。图片存储为png-24而不是jpg，文件大小至少是jpg的5倍，但图像质量的提升可以忽略不计。所以，除非对质量要求极高，否则推荐彩色网络图片使用jpg。PNG-24也像png-8一样支持透明度。webpWebP图像是一种新的图像格式，由谷歌开发。与png、jpg相比，在相同的视觉体验下，WebP图片的尺寸缩小了30%左右。此外，WebP图片格式还支持有损压缩、无损压缩、透明和动画。理论上可以完全替代png、jpg、gif等图片格式，当然目前webp还没有完全支持。看一下png图片和webp图片的对比：详见pngVSwebp。再看看webp的兼容性：可以看到对webp格式的支持不是很好，但是移动端的支持总体来说还不错。总结结合上面的介绍，我们了解了各种图片格式的优缺点和适用场景。下面通过一张图做一个抽象的总结：格式优缺点适用场景gif文件小，支持动画，透明，无兼容性问题仅支持256色简单logo，图标，动图jpg色彩丰富，文件体积小有损压缩，重复保存图片质量明显下降彩色丰富图片/渐变图片png无损压缩，支持透明，简单图片尺寸小不支持动画，彩色图片大logo/icon/透明图片，小webp文件，支持有损和无损压缩、动画和透明度。浏览器兼容性不好。附上支持webp格式的app和webview。最后附上谷歌选择的图片格式。指导：
