前端图片优化

在现代互联网整个网站中，图片已经成为每个网站的侧重点。据统计，图片内容已经占到了互联网内容总量的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内部广泛使用。

转载于:https://www.cnblogs.com/ifworld/p/8094369.html