前端优化之图片压缩

那么为什么要做图片压缩呢？

因为减少图片文件的大小可以减少请求的带宽，从而加快页面加载的速度。

除了代码的压缩外，网页中使用最多的资源文件就是图片，在一般的网站中，图片资源占有的比重还是挺大的。图片压缩工具主要是在线工具和本地应用程序，还没有好一点的编辑器插件可用。好在一般项目中，图片的变化并不是很大，所以图片的自动化压缩工具的需求并不是很迫切。

图片压缩工具也很多，以在线工具居多。在线工具中，推荐使用 tinypng 工具压缩PNG格式图片，推荐使用 JpegMini 压缩JPG格式图片。本地应用程序，则推荐 ImageOptim 。这是一款强大的工具，集成了多种压缩工具，所以可以压缩多种格式（如：PNG、JPEG及GIF动画）的图片，支持拖放操作，使用也非常方便。

以上就是网站发布时可以使用的各种资源压缩工具。除了在项目中使用合适压缩工具之外，何时压缩代码也很重要。因为压缩后的代码会影响代码的调试，使得开发者不易确定出错代码的位置，调试JavaScript代码时也不易设置断点，所以推荐在开发后期，甚至是在网站的发布阶段做代码和资源的压缩。如果放在网站发布阶段压缩，则开发者在开发过程中不需要考虑代码压缩的问题，方便了开发者的开发与调试。发布阶段压缩代码的方案也很成熟，比如使用ANT工具。ANT是一个基于Java™ 的构建工具，在这个工具中可以构建代码和资源压缩的任务：使用 YUI 压缩程序合并和压缩 JavaScript和CSS、使用 jpegtran和optipng优化JPG和PNG文件、使用htmlcompressor压缩 HTML及移除调试代码。

目前很流行的前端自动化构建工具 Grunt 也可以集成代码和资源的压缩工具。在Grunt的插件列表页面上，有很多的压缩代码和资源文件的插件可用。比如，压缩JavaScript的 grunt-contrib-uglify 插件、压缩CSS代码的 grunt-contrib-cssmin 插件及压缩图片的 grunt-contrib-imagemin 插件等。

1. TinyPNG

简介： TinyPNG 是一个网页版 PNG 图片专业压缩优化工具，可以在线批量压缩PNG图片，在保持alpha通道的情况下对PNG的压缩可以达到1/3之内，而且用肉眼基本上分辨不出压缩的损失。
它的原理是通过合并图片中相似的颜色，通过将 24 位的 PNG 图片压缩成小得多的 8 位色值的图片，并且去掉了图片中不必要的 metadata（元数据）。
TinyPNG支持上传png图片到官网上压缩下载。同时开放Developers API，基于HTTP，免费版可以每个月压缩500图片，收费版支持每个月3500张图片以上。
特点： 除了图片压缩，Tinypng 还支持对图片做缩放，裁切等处理
优点：

支持在线上传压缩
支持API压缩

2. 智图

简介： 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台，其功能包括针对png,jpeg,gif等各类格式图片的压缩，以及为上传图片自动选择最优的图片格式。同时，智图平台还会为用户转换一份webp格式的图片。
将要优化的图片拉至首页的拖拽区域后，系统会自动上传图片并经过智图压缩，返回新的图片。
特点：支持离线压缩、目录批量压缩、跨按平台压缩
优点：

支持webp格式
支持客户端（Win&Mac）
API封装gulp插件