一次有意义的网站图片压缩之旅

2015-11-06 散崖 1718人已阅读

      在PC端的时候,往往在处理图片的时候我们更多的是通过ctrl+shift+alt+s的方式来保存图片以达到优化的目的:

01

      这种方式往往需要调节品质,设置相对而言比较麻烦,对于png24的图片更是束手无策!因为需要找出一个可行批量和高效的图片压缩方式,下面用一个简单的实例来进行我们方案的测试!

一、demo实例原图片的大小

2

二、图片压缩的方案

       1.基于grunt-contrib-imagemin的构建工具压缩

      提高批量压缩,第一个想到的必然是基于grunt构建工具的的图片压缩,这样可以很多好的和css和js压缩一起工作,配置gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    imagemin: {
    	weiGame:{
    		options: {
	            optimizationLevel:7 // png图片优化水平,3是默认值,取值区间0-7
	        },
	        files: [
	            {
	                expand: true, // 开启动态扩展
	                src: ["*.{png,jpg,gif}"], // 要出处理的文件格式(images下的所有png,jpg,gif)
	                dest: "imagemin/" // 输出目录(直接覆盖原图)
	            }
	        ]
    	}
       
    }
  }) 
  require('load-grunt-tasks')(grunt);
  grunt.registerTask('default',["imagemin:weiGame"]);
}

      我们在Git Bash上执行我们的任务grunt,结果如下:

3

      提示两种图片总共被压缩的大小,才5.04kb,似乎没有达到预期的要求?下面我们采用第二种方式来佐证到底压缩彻不彻底!

 

  2.通过在线工具tinyPng(https://tinypng.com/)压缩

      tinypng提供了在线上传压缩的功能,我们将图片进行了压缩,结果如下图:

4

      优点: 压缩比例大,tinypng压缩节省了86kb,在图片不失真的情况下压缩的比例真是杠杠的,远超过grunt的方式!

      缺点: 要一个上传,一个个下载,操作相当麻烦(当然可以通过安装photoshop插件的形式快速进行压缩)

 

  3.通过google pagespeed 提供的工具:jpegtran.exe的方式来压缩图片:

$ jpegtran -copy none -progressive bg.jpg bg1.jpg;
$ jpegtran -copy none -progressive icon_prize1.png  icon_prize2.png;

      结果如下图:

5 (1)

      很明显压缩的结果还是没有达到预期的要求,不是理想的选择!到这里方案已经是有了,只是没有比较便捷的方式,所以需要寻找另外一种方式来觉得问题。这个时候发现了一个很好的photoshop的插件(TinyPNG 1.1.42 For PSCC 2014,也就是第四种方式:

 

  4.通过photoshop的插件的相识来完成图片的压缩:

      很明显压缩的结果还是没有达到预期的要求,不是理想的选择!到这里方案已经是有了,但是没有比较便捷的方式,这时候我们需要寻找另外一种方式来觉得问题。这个时候发现了一个很好的photoshop的插件(TinyPNG 1.1.42 For PSCC 2014)比较理想的方式,操作如下:

      步骤一:下载安装包:TinyPNG 1.1.42 For PSCC 2014.rar

      步骤二:解压下载安装包,里面有三个文件夹:1.Registry Entry(点击里面的PhothoshopCC.reg安装),2.Install(点击里面的TinyPNG-v1.1.exe)安装,3.For PSCC 2014,将里面的文件拷贝到你photoshop的安装目录,如果安装成功会看到:

008 (1)

      步骤三:通过上面“tinyPng Image Processor"打开文件夹,就可以将文件夹中的png图片压缩,并保存在源文件当中!

      这种方式很明显只需要选中文件夹就可以,很方便,但是遗憾的是只能压缩png的图片,对jpg的图片,没有提供压缩!所以如果要快速压缩的时候,建议通过方案四将png格式的图片压缩,然后通过tinyPng 的官网上传jpg格式的图片进行压缩,以达到图片格式最小化!这算比较笨,但对于未使用构建工具前端人员和设计师算是最好的方式了!

      能想到的就这些方式,如果有更好的方案和工具,欢迎留言!

     

交换友情链接