使用grunt来无损压缩图片

作为一个前端工程师,或者web开发工程师,图片是你无法忽视的一个东西,没有一本优化方面的书不会提及图片的优化。

pagespeed里面,首当其冲的也是提示你的图片需要优化。

之前有做过很多尝试,处理png图片等,可以查看以前的博客:优化png图片的历程

但是之前的方法有两个问题:

1、主要是优化PNG图片

2、效率低下,不适合批量操作

为了解决上诉问题,现在使用一个新的方法去批量压缩图片。

这个方法就是,噔噔噔噔,Grunt-contrib-imagemin

操作步骤如下:

1、首先你得有nodejs环境,如果你没有,请参考:https://nodejs.org/

2、然后打开node.js command prompt

3、通过npm安装grunt,如果你没有grunt的话。要安装,请参考:http://www.gruntjs.net/

4、然后新建一个文件夹,我的个人看法是,你所新建的这个文件夹将作为你压缩图片的一个寄存地,也就是一个缓存区。当你要压缩某些图片的时候,可以把图片复制过来,然后运行一下压缩命令即可。而不用每次都在你的项目目录中安装imagemin

安装Grunt-contrib-imagemin,需要系统中已经安装grunt的,所以你首先要参考第3条。

输入了安装imagemin的命令后,会从远程服务器中下载这个包到你的新建的目录中了。

5、新建Gruntfile.js文件,打开你刚才新建的目录,我这里是gruntImgmin

然后在这个根目录中,新建上述js文件,然后新建grunt任务:

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [
                       {
                    expand: true,
                    cwd: 'images/',
                    src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                    dest: 'images/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
                    }
                    ]
                }
            },
            });
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('img', ['imagemin']);
};

上面的任务中,我是把原图片文件夹和目标文件夹写成了同一个,也就是要覆盖原图片,如果你不想这样,可以自己更改路径就可以了。

6、把图片放在相应的文件夹之后,在nodejs的命令行中输入命令:

7、文件对比

压缩前总文件大小为535k,压缩后为508k,减少了47k。

因为压缩的图片大部分为jpg,所以压缩率可能不是特别高,当png比较多,或者整体文件比较多的时候,这种差异会更大。减少了47k已经减少了很多,为你的网页的性能呢个又优化了一步。

参考:

http://www.zfanw.com/blog/gruntjs-optimize-image-size-loseless.html

http://www.gruntjs.net/

https://nodejs.org/

时间: 2024-10-11 21:31:33

使用grunt来无损压缩图片的相关文章

Grunt中批量无损压缩图片插件--Grunt-contrib-imagemin

Photoshop 切出的图片,无论是 PNG 还是 JPEG/JPG 格式,都含有许多相关信息,又或多余的颜色值,这些信息和颜色值,对网页前端并没有用处,反而增加图片大小,所以 Google Pagespeed 最佳实践建议我们用 jpegtran 或 jpegoptim (仅限 Linux 平台) 对 jpeg/jpg 图片进行无损压缩,如果是 PNG 格式,则使用 OptiPNG 或 PNGOUT 压缩.减小图片大小,就可以减少用户下载的文件大小,加快页面访问速度. 不过上面提到的几个工具

无损压缩图片

/// <summary> /// 无损压缩图片 /// </summary> /// <param name="sFile">原图片</param> /// <param name="dFile">压缩后保存位置</param> /// <param name="dHeight">高度</param> /// <param name="

C#无损压缩图片

/// <summary> /// 根据指定尺寸得到按比例缩放的尺寸,返回true表示以更改尺寸 /// </summary> /// <param name="picWidth">图片宽度</param> /// <param name="picHeight">图片高度</param> /// <param name="specifiedWidth">指定宽度&

无损压缩图片,有没有什么好的在线方法

如今在网络上无论是写文章,聊天,写网页几乎都离不开图片,因为图片可以带动气氛,像皮卡丘动漫类型的图片往往都能逗人笑,但是有的图片面积过于庞大,导致上传至网页或平台内失败,而且图片保留至电脑或手机内过多的话,会影响了他们的运行操作,之前我尝试过下载软件去压缩图片,但是清晰度有点问题,有没有什么在线方法可以无损压缩图片呢.步骤一:打开电脑进入浏览器后找到迅捷在线压缩的首页.步骤二:进入在线压缩的界面后,会发现下方有三个功能选项分别是PDF压缩,图片压缩,以及视频压缩,我们选择我们所需要的图片压缩.步

Grunt中批量无损压缩图片插件--grunt-sprite

这是什么 这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具,它的主要功能是: 使用二叉树排列算法,对css文件进行处理,收集切片序列,生成雪碧图 在原css代码中为切片添加background-position属性 生成用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码 在引用雪碧图的位置打上时间戳 在样式末尾追加时间戳 安装依赖 grunt-sprite 使用 spritesmith 作为内部核心算法,根据官方文档中提到的基本依赖,须要安装Graphics Magic

C#图片无损压缩

/// 使用方法:本方法由于内部统一设置dHeight,dWidth和原图片的长宽一致,所以图片的大小一样. /// flag:压缩率,这里仅仅压缩像素,不改变图片的外观大小(既长宽) /// 无损压缩图片 /// <param name="sFile">原图片</param> /// <param name="dFile">压缩后保存位置</param> /// <param name="dHeigh

Grunt压缩图片

今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install --save-dev gulp-imagemin 然后引入依赖: var gulp = require("gulp"); 在引入插件: var imagemin = require('gulp-imagemin');//压缩图片 var uglifyJS = require('gulp-

C# 无损图片压缩—— 基于Framework.40 类库实现

转载来自:http://write.blog.csdn.net/postedit/7715729 一.测试代码 private void button1_Click(object sender, EventArgs e)     {       string newSourcePath = ImgPath;//源图存放目录      string newNewDir = MakePath;   //新图存放目录 string sourceFile = Path.Combine(ImgPath,

c# 无损高质量压缩图片代码

最近,项目上涉及到了图像压缩,发现原有的图像压缩功能,虽然保证了图像的大小300K以内,但是压缩后的图像看的不在清晰,并且,限定了图片的Height或者是Width. 在CSDN上看到了一个压缩算法:http://blog.csdn.net/qq_16542775/article/details/51792149 进过测试这个算法,发现,将原始图像的大小进行对半处理,然后迭代跳转压缩质量参数,可以得到不错的效果. 修改后的算法如下: /// <summary> /// 无损压缩图片 /// &