图像格式

格式	特点
bmp	无压缩，放大后失真
jpg/jpeg	有损压缩，压缩比越大，压缩后的图像质量差
gif	支持无损压缩。可以实现动画效果
png8	多用于网页中的图标设计；支持无损压缩，8位/像素，支持透明效果；
svg	矢量图，随意改变大小，不改变图像质量；属于XML文件，可使用gzip将其压缩得很小；可使用css定义颜色大小
webp	图片体积小，质量好，支持无损和有损压缩，动态化（表情包）
HEIC	压缩性能：相同数量的数据压缩后约是jpeg图像大小的一半（存储、传输）；缺点：兼容性差

png8为256颜色，支持透明；png24为2的24次幂，不支持透明；png32为32次幂，支持透明。

jpg有损压缩，压缩率高，不支持透明；png支持透明，浏览器兼容好；webp压缩程度更好，但有兼容性问题；svg矢量图，代码内嵌，相对较小，用在图片样式相对简单的业务。

目前只Chrome浏览器支持webp格式的图片， webp兼容性判断方法。此外，webp可用在Android（在ios webview有兼容性问题）。

CSS雪碧图，即CSS Sprite，也有人称其为CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。