前端优化之图片压缩

前端优化之图片压缩

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

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

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

图片压缩工具也很多,以在线工具居多。在线工具中,推荐使用 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插件

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×