zoukankan      html  css  js  c++  java
  • 图片压缩工具:grunt-contrib-imagemin

      我们平时使用Photoshop 切出的图片,都含有一些不需要的信息或者多余的颜色值,这些信息和颜色值,对网页显示并没有用处,反而增加图片大小,Google Pagespeed 建议我们对于JPEG文件,使用jpegtran或jpegoptim(仅适用于Linux;使用--strip-all选项运行)。对于PNG文件,使用OptiPNG或PNGOUT。减小图片大小,就可以减少用户下载的文件大小,加快页面访问速度。

      对于不同格式的图片,我们需要用pegtran/jpegoptim/OptiPNG/PNGOUT 的工具,这样对于前端开发费时费力,grunt-contrib-imagemin封装了这些压缩功能;大大方便了我们优化的工作.

      安装 :npm install grunt-contrib-imagemin --save-dev

      配置 :详细见https://github.com/gruntjs/grunt-contrib-imagemin

      代码例子:

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

      存在的问题:

      1、0.9.2版本,在win7系统32位,64位有问题,无法压缩jpg,运行的时候报错.

      可以在https://github.com/imagemin/jpegtran-bin/releases下载文件后获取里面的

      jpegtran-bin-2.0.2->jpegtran-bin-2.02->vendor-win-x64里的两个文件:

      jpegtran.exe  libjpeg-62.dll,覆盖到node_modulesgrunt-contrib-imagemin ode_modulesimagemin ode_modulesimagemin-jpegtran ode_modulesjpegtran-binvendor下即可

      2、压缩后的png图片,半透明的效果在IE6下显示有问题,压缩前正常,压缩后图片消失不可见,其他浏览器正常。原因不详。0.9.2出现,在最新版本未测试过。

      3、最新版本貌似0.9.4没这个问题,但是默认压缩后的大小却相差很多,具体原因不详。

  • 相关阅读:
    C语言写的trim()函数
    TCP/IP和Socket的关系
    sizeof(数组名)和sizeof(指针)
    字符数组和结束符/0之间的关系
    C语言中二维字符数组的定义和初始化
    异步套接字基础:select函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET
    do{...}while(0)的意义和用法
    Mirror--如何在主库上增加文件
    曲苑杂坛--收缩数据库文件
    常用脚本--SQL Server获取OS日志
  • 原文地址:https://www.cnblogs.com/tellme/p/4368671.html
Copyright © 2011-2022 走看看