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