web 图片简介及优化策略

目前H5所用的图片格式大多是JPG、png、svg、webp。 今天我们就来介绍一下这几种图片格式，和什么场景下应该用什么样格式的图片。

格式介绍

1. png 支持透明，浏览器兼容好

   格式	说明	字节数
   png8	2^8色+支持透明。 256色，适合颜色简单的图片	8bit
   png24	2^24色+不支持透明	24bit
   png32	224色+28支持透明。适合颜色比较复杂的图片	32bit = 24(颜色索引)+8(支持透明)

2. jpg 有损压缩，压缩率高，不支持透明。

3. webp google出品，压缩程度更高，但是在iOS webview中有兼容问题

4. svg 矢量图，可内嵌到代码里，图片内容比较简单

各种格式的使用场景

1. 通常情况下图片体积： png > jpg > webp
2. 如果图片不需要支持透明，可以用webp或者JPG代替png图片。如果浏览器支持webp，最好用webp

   // 检测是否支持webp格式
   (function isSupportWebp() {
     var hasWebP = false
     var img = new Image();
     img.onload = function() {
       hasWebP = !!(img.height > 0 && img.width > 0);
     };
     img.onerror = function() {
       hasWebP = false;
     };
     img.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=';
   })()
   

3. svg通常用作小的icon， 如阿里的iconfont

压缩方式

1. 雪碧图， 现在通常不用了。 因为如果由于网络原因导致雪碧图没有加载出来，则雪碧图中的多个图片都会显示不出来，导致页面上有很多空白
2. image inline: 转成base64嵌入到HTML中。 比如一个图片只有1kb，那么这个时候单独的发送一个http请求是比较耗时的. 而将其内联到代码里就会比较好。
3. 矢量图，对于icon、简单图片，矢量图压缩效果会比较好。

几个网站

1. 图片压缩tinypng
2. 压缩+转webp
3. svg教程
4. iconfont