前端图片优化策略

1. 前端常用图片格式

图片格式	透明	动画	压缩方式	兼容性	适用场景
jpg	不支持	不支持	有损	所有	所有
gif	支持	支持	有损	所有	简单颜色，动画
png	支持	不支持	无损	所有	需要透明通道
svg	支持	支持	无损	IE8+、所有	简单图形、良好的缩放展示
webp	支持	支持	都有	chrome49+、opera43+、Android4.4+	针对特定平台
bpg	支持	支持	有损	需要专门解码器	对图片大小有要求

2. 文件特点概述

2.1 JPEG

jpeg图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。这意味着JPEG去掉了一部分图片的原始信息，也即是进行了有损压缩。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，用来表达更生动的图像效果，比如颜色渐变。

优点：图片体积较小，兼容性好，色彩还原度较高，解码速度快

缺点：不适合于线条绘图（drawing）和其他文字或图示（iconic）的图形。

2.2 PNG

便携式网络图片（Portable Network Graphics）,简称PNG,是一种无损数据压缩位图图形文件格式。PNG格式是无损数据压缩的,PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式（索引透明和alpha透明）,24位PNG不支持透明,32位 PNG 在24位基础上增加了8位透明通道（32-24===8）,因此可展现256级透明程度。

优点：支持透明，无损

缺点：体积较大，也有一些软件不能使用适合的预测，生成的文件较大(IE6只支持PNG8)

2.3 gif

GIF(Graphics Interchange Format)的原义是“图像互换格式”，GIF文件的数据，是一种基于LZW算法(串表压缩算法)连续色调的无损压缩格式。是目前web网页中十分常用的一种动画文件格式。

优势：

优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小
可插入多帧,从而实现动画效果
可设置透明色以产生对象浮现于背景之上的效果

劣势：由于采用了8位压缩,最多只能处理256种颜色（2的8次方）,故不宜应用于真彩图像。

2.4 webp

2010年谷歌推出的图片格式,专门用来在web中使用, 压缩率只有jpg的2/3或者更低；第一个版本的webp图片格式是有损的, 新版本中webp图片是无损的。
相对于png图片,webp比png小了45%,但是缺点是你压缩的时候需要的时间更久了，同时兼容性较差。

2.5 小结

性能测试对比

3. 图片优化策略

影响图片加载速度的因素主要有：图片大小、网络传输带宽、图片解码、渲染加载快慢。其中解码速率主要取决于图片的质量、分辨率大小、解码算法及物理配置（CPU、GPU、内存...）等。

3.1 异步懒加载

加载图片的过程一般比较费时，应采用异步不阻塞的方式加载，同时引入懒加载，当该图片真正需要被显示时再进行加载，同时缓存之前加载的图片，常用的缓存策略有LRU等。现在常用的图片加载库基本都已实现。

3.2 根据显示图片大小加载

一张图片，在前端显示用到的大小可能不同，例如：针对不同分辨率的手机屏加载不同的图片；列表界面我们只需显示图片的缩略图，而到详情页时需加载图片的大图等。

对于以上场景，就可以根据图片样式来优化图片加载，具体如下：

服务端需存储所需的不同分辨率或不同格式的图片
开放对应样式的URL接口给前端
前端根据不同的场景去加载适合的图片

目前国内已有很多第三方服务提供了这样的图床服务，比如七牛图床。

3.3 IconFont

在很多的响应式网站里一般会采用IconFont，因为可以直接通过font-size和color属性来控制icon的大小和颜色，非常方便，而且由于iconfont本身就是字体文件，会矢量适配各种不同devicePixelRatio，国内常用的有阿里巴巴的FontIcon平台。

具体做法是将一些图标打包到一个字体文件中，然后可通过设置字体的方式来加载图片。
一些工具：

字体制作
Android使用

优点：

缩放不会模糊，告别移动端中2x/3x以及未来nx的问题
一套资源可在web、iOS、Android等多个平台使用
一键换肤、方便更改图片颜色，图片复用
一定程度上减小包体积

缺点：

颜色单一，无法实现多种颜色的图标展示。
因为是通过加载字体的方式实现的，字体间是存在间距的，不能直接根据视觉稿标注来显示图片，同时在图标的对齐上也需有所调整。
在PC上当图标小于等于16px时，或者复杂度高的图标会出现比较严重锯齿，图标无法展示清晰，特别在chrome下的表现尤为严重。为何出现锯齿?
在实际的开发中，图标或界面经常调整变化，制作及更新成本高。

3.4 使用SVG

SVG在IconFont的基础上，增加了动画支持，可以使用多色，兼容性及显示效果上明显优于IconFont。但网上有说，SVG在加载较复杂的图片时，速度很慢，这个未经考证，因为我做不出很复杂的矢量图 :)。但在简单图标的表现上还是不错的，建议使用SVG代替IconFont。

3.5 Webp

Webp格式在移动端的应用较广，在移动端可通过编译加载webp的解码库来解决兼容性问题。如果应用中大图较多的话，带来的优势是很明显的，其可以大幅缩小图片体积的大小，同时在人眼的显示识别上没有太大区别。

实测：APP一张引导页图片727KB，通过webp编码后大小为33KB，而显示上几乎没多大区别。当然并不是所有图片都有这么大的压缩率，平均大概在30%的样子，但带来的优势是明显的。

但是在Web端，由于兼容性问题没法大面积应用，网上有基于webp的js插件，只是很久没有更新了；但目前一些大公司基本是采用如果支持webp就加载webp，不支持就加载jpg或png的策略的，比如淘宝。虽然不清楚他们是怎么实现的，但是通过PageSpeed可以达到这样的效果，参照3.7。

3.6 Guetzli 优化JPG

谷歌最近开源了一个新的JPEG编码器Guetzli，Guetzli通过引入搜索算法来减小JPEG和Guetzli在视觉模型上的差别，试图在最小的质量损失和文件大小之间找到平衡。Guetzli视觉模型用一种更全面和细致的方式来完成色彩感知和视觉遮蔽，以此来代替简单的色彩转换和离散余弦变换。但Guetzli生成更小文件的代价在于，这种搜索算法所需要的时间远远长于现有的压缩方法。

此外，它能兼容现有的浏览器、图像处理应用和JPEG标准。

3.7 PageSpeed优化页面

PageSpeed地址
国内配置参考

图片转换：

pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;