WEB学习进阶之路-之性能优化五

本章学习图片优化

在httparchive中，他会统计网络上资源信息的使用量和请求量，截图时间2020-7-5 10:19

先看总请求量截图，

可以看到，桌面数据请求量是2007.7KB，移动端是1851.9KB。

再看图片请求量截图

前一张是图片请求大小，桌面端是949.6KB，移动端是886.8KB

后一张是图片请求数量，桌面端是29，移动端是27

另外一个很有意思的就是请求量下面的增长率，大家发现没有，页面的请求总量和图片请求大小总理都是正增长，而请求数量却是负增长，说明什么呢？

说明的是我们这一张的内容的必要性，哈哈

为什么要讲图片优化：

1. 图片请求总量在整个网站的请求总量的占比相当恐怖，已经有40%以上的占比。

2. 图片请求次数的下降说明整个行业都在做咋们这章要说的

3. 优化图片，可以提高用户的体验，对于手机端，可以节省用户流量

4. 提高网站的性能，节省宝贵的资源，给公司节省经费。

网页上通常用的图片格式有：

JPEG/JPG，PNG，Webp，SVG，Base64

图片优化的技术有：

CSS Sprites，合理使用相关格式的图片，下面我们就优先学习下几种常用格式的图片的优势和缺点，并且说明比较适合的使用场景

JPEG/JPG

优点：高质量的有损压缩；单个图以24存储，可以表示1600多万中颜色；将压缩比率设置到50%时，原图的质量可以保持60%以上。

缺点：不支持透明图层；处理矢量图，logo等这些线条感强，颜色对比强烈的图片时，由于太模糊无法胜任这种场景。

应用场景：网站的大图展示区，比如向广告，公司介绍等等。

PNG

png可以分为png-8和png-24，png-8顾名思义，最多支持256种颜色，而png-24可以支持1600万种颜色。

优点：无损压缩高保真；支持透明图层；比jpg有更好处理色彩的能力，对线条处理的更加细腻。

缺点：质量太大

应用场景：logo

SVG

优点：质量小，可压缩性强；放大不失真；可以直接写入html网页，减少http请求量；可编程性。

缺点：浏览器渲染性能损害高，可编程性。

可编程性既是优点也是缺点是不是很有趣，对于会的人它是把利器，对于不会的人又要花时间和精力去学习一门新技术，所谓成也萧何败也萧何。

应用场景：适配各种屏幕，从手机到PC，到桌面端一图解决。

Base64

优点：可编码性；可以直接写入html网页，减少http请求。

缺点：编码之后图片质量变大

应用场景：小图标使用场景；图片可直接入库场景（例如通讯录头像）；

WebP

优点：支持透明图层；支持动态图；体积小；

看看官网的介绍：

与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。

缺点：支持的浏览器太少，需要过多的兼容。

应用场景：支持大多数场景，在未来浏览器中，可以尝试多个场景。

Webp的兼容方式

一种是在前端判断是否支持Webp，图片生产时，直接生成多种格式，前端根据情况选择使用图片，比如图片 1.jpg.webp；后台存储两张，一张是1.jpg，一张是1.jpg.webp，前端可以根据支持情况截取字符串，显示图片

另外一种方式就是读取请求头，比如accept-type或者content-type判断是否又image/webp的mime，根据情况返回相关格式的图片。

CSS Sprites

优点：减少http请求；减少图片大小

缺点：使用过程稍微麻烦点，不像其他类型的图片“即插即用”。

应用场景：网站或者管理端页面的按钮等。