前端图片优化

在现代互联网整个网站中，图片已经成为每一个网站的侧重点。据统计，图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。因此图片也绝对是成为性能优化的热点和重点之一。从谷歌公司的PageSpeed来看，就把图片优化做为重要的优化手段。下面来阐述一下Web图片优化的方方面面。

记得以前在一个地方看到一句话很是正确：

 图片优化既是一门艺术，也是一门科学，图片优化是一门艺术，是由于单个图片的压缩不存在最好的特定性方案，而图片优化之因此是一门科学，是由于许多开发得很出色的方法和算法能够明显减少图片的大小。要找到图片的最优设置，须要按照许多维度进行认真分析：格式能力、编码数据内容、像素尺寸等。

---

图片真的有那么重要吗？

在当前这个浏览器和Web标准的发展速度极快的时代，不少特效（渐变、阴影、圆角等等）均可以用纯粹的HTML、CSS、SVG等加以实现，实现这些效果少则寥寥数行代码，多则加载额外的库（一张普通的照片比很是强大的效果库也大了许多）。这些效果不但须要的空间很小，并且在多设备、多分辨率下都能很好的工做，在低级浏览器上也能够实现较好的功能降级。所以在存在备选技术的状况下，应该首先选择这些技术，只有在不得不使用图片的时候才加入真正的图片。

---

 图片格式的选择

 

图片格式	压缩方式	透明度	动画	浏览器兼容	适应场景
JPEG	有损	不支持	不支持	全部	全部通用场景
PNG	无损	支持	不支持	全部	须要透明时
GIF	无损	支持	支持	全部	简单颜色，动画
SVG	无损	支持	支持	全部(IE8以上)	简单图形，须要良好的放缩体验，须要动态控制图片特效
APNG	无损	支持	支持	Firefox，Safari，iOS Safari	须要半透明效果的动画
WebP	有损	支持	支持	Chrome、Opera	复杂颜色及形状，浏览器平台可预知

几种文件格式的选用依据

1.颜色丰富的照片，JPG是通用的选择 

2.若是须要较通用的动画，GIF是惟一可用的选择 

3.若是图片由标准的几何图形组成，或须要使用程序动态控制其显示特效，能够考虑SVG格式 

4.若是须要清晰的显示颜色丰富的图片，PNG比较好

前端的图片优化方案

1.使用base64编码代替图片 场景：适用于图片大小小于2KB，页面上引用图片总数很少的状况 原理：将图片转换为base64编码字符串inline到页面或css中 优点：减小http的请求次数，并能够放到后台数据库中，只传输字符串，有较多的构建工具能够直接实现 劣势：这种方法仅限于图片总数较少，并且图片大小小于2KB的状况。不然图片字符串会变得很长很长。 

2.合并图片sprite 场景：任何用到页面图片的场景 原理：将多个页面上用到的背景图片合并成一个大的图片在页面中引用 优点：能够有效的较少请求个数，并且，而不影响开发体验，使用构建插件能够作到对开发者透明。适用于页面图片多且丰富的场景。 劣势：生成的图片体积较大，减小请求个数同时也增长了图片大小，不合理拆分将不利于并行加载。 

3.使用css、svg、canvas或iconfont代替图片css代替图片 场景：适用于移动端或较高级的浏览器，并且绘制的图案较为简单。 原理：css方式能够用来绘制相对简单的团来代替图片，通常使用before或者after伪元素来丰富图案的复杂度。 优点：具备实现简单，图片体积小的特色，能够实现简单的动态效果 劣势：也受限于css的兼容性特色，绘制复杂图案困难svg的描述和适用场景上文已说明。canvas代替图片 场景：须要高性能的图片或动画 原理：适用html5的canvas元素绘制建立图片 优点：整个就是画2D图形时，页面渲染性能比较高，页面渲染性能受图形复杂度影响小，性能只受图形的分辨率的影响，画出来的图形能够直接保存为 .png 或者 .jpg的图形，适合于画光栅图像或者不规则图形 劣势：没有dom操做，必须依赖定时器，文字渲染性能差，不能添加描述(title属性什么的)，兼容性限制iconfont是一种web字体来代替图片的解决方案： 场景：代替页面上色彩单一的图片 优点：兼容性好，应用广，目前使用也很普遍 劣势：可是因为字体的颜色设置单一，只能用于代替颜色单一的图片，对于色彩复杂的图片，iconfont处理起来比较困难， 

4.响应式图片 场景：不一样终端对同一个图片需求不同，能够根据终端加载不一样的图片来节省不必的流量 原理：经过picture元素，picturefill或平台判断来为不一样终端平台输出不一样的图片 优点：减小不必的图片加载，灵活控制，慢速用户加载小图片不至于加载失败，移动端不必加载大尺寸图片等，能够经过不一样方式兼容全部浏览器 劣势：没法避免图片的加载过程，图片自己没优化。 

5.压缩图片 场景：在不得不加载图片的前提下，要进一步提高优化效果，只能经过有损或无损压缩来减小图片的大小， 原理：对图片进行无损、有损压缩或格式转换，转为压缩后图片或压缩率更高的图片格式来实现 优点：减小图片加载流量，效果比较明显 劣势：服务器和浏览器压力增大，并且服务器须要额外的服务支持，格式转换要考虑浏览器的兼容性。

关于图片压缩

1. Kraken (Web) 主页：https://kraken.io/

在免费模式下能够上传图片，优化后打包下载，固然你有须要也能够选择了它的收费服务，效果很好。

2. 智图 (Web)

支持原图png转为jpeg和webp(目前不支持bpg)，并提供各类压缩比压缩，目前在tx内部普遍使用。