格式 | 特点 |
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的背景定位来显示需要显示的图片部分。