➣ 智图平台是什么?

智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传图片自动选择最优的图片格式。同时,智图平台还会为用户转换一份webp格式的图片。

➣ 如何使用智图平台?

您只需要将要优化的图片拉至首页的拖拽区域后,系统会自动上传图片并经过智图压缩,返回新的图片。您也可以根据自己的实际使用情况选择不同的压缩率。

➣ 智图好在哪里?

智图能够自动为您选择压缩率压缩并且在合适的情况下为您选择正确的图片格式。与此同时,智图也会为您上传的图片转换一份webP格式的图片。

➣ 什么是WebP格式的图片?

WebP是Google在2010年发布的一种新型图片格式,支持无损和有损压缩。在无损压缩方面,同质量的WebP图片比PNG的体积小26%,而在有损压缩方面,同质量的WebP图片比JPEG小25-34%。WebP在不降低图片质量的同时,减少了约三分之一的体积。详细可参考谷歌官方

➣ 我能用WebP格式的图片?

这里为大家总结下使用WebP时需要注意的地方以及如何兼容性地使用WebP格式的图片,点击查看


首先安装gulp

1 npm install -g gulp                   #全局安装
2 npm install --save-dev gulp       #局部安装

然后安装gulp-imageisux

 npm install -g gulp-imageisux             #全局安装
npm install --save-dev gulp-imageisux #局部安装
  1. 声明图片地址,例如放在img目录下面gulp.src(['img/*'])
  2. 指定参数,压缩图片导出目录/dest/和是否同时导出webp格式。

然后新建文件gulpfile.js

var imageisux = require('gulp-imageisux');

gulp.task('imageisux', function() {
return gulp.src(['img/*'])
.pipe(imageisux('/dirpath/',true));
});

API 两个参数,dirpath目标目录以及enableWebp是否同时导出对应WEBP格式图片。(就是imageisux(dirpath,enableWebp))

  • dirpath: 如果未定义,会自动生成两个目录:'/dest/'目录放压缩后图片,'/webp/'目录放对应的webp格式压缩图片。

  • enableWebp : 若为true,则会同时输出webp图片;若为false,则只会有压缩后原格式图片。

智图官网:http://zhitu.isux.us/

智图github:https://github.com/targetkiller/gulp-imageisux

注明:实验证明jpg、png的图片可以正常压缩,不过gif的好像不可以。

用gulp-imageisux智图api压缩图片的更多相关文章

  1. 续Gulp使用入门三步压缩图片

    gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...

  2. Tool-图片压缩-腾讯智图:腾讯智图

    ylbtech-Tool-图片压缩-腾讯智图:腾讯智图 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传 ...

  3. iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片

    图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...

  4. 使用tinypng对需要上传Gitee图床的图片进行压缩

    目录 背景 Tinypng简介 Tinypng使用 手动上传图片 使用API 调用API自动上传超过1MB图片 安装tinyfy 自动上传脚本 其他 背景 在使用Gitee作为图床时(使用Typora ...

  5. Android 高清加载巨图方案 拒绝压缩图片

    Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...

  6. Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...

  7. 使用 gulp 压缩图片

    请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ ...

  8. 使用canvas 的api 实现 图片的显示 及 压缩

    在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...

  9. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

随机推荐

  1. PHP笔记:单引号与双引号区别

    PHP笔记:单引号与双引号区别 php中使用字符串时,可以使用单引号或者双引号,这里总结一下二者的不同: 一.解析字符内容 双引号中的变量会会经过编译器解析 单引号中的变量不会被解析 如下: < ...

  2. C# IIS站点管理--Microsoft.Web.Administration.dll

    Microsoft中提供了管理IIS7及以上版本一个非常强大的API - Microsoft.Web.Administration.dll,利用该API可以让我们很方便的以编程的方式管理和设定IIS的 ...

  3. Go依赖模块版本之Module避坑使用详解

    前提 对于Go的版本管理主要用过 glide,下面介绍 Go 1.11 之后官方支持的版本管理工具 mod. 关于 mod 官方给出了三个命令 go help mod.go help modules. ...

  4. MongoDB数据库(二):增删查改

    MongoDB数据库的增删查改 1.插入数据 语法: db.集合名称.insert(document) db.table_name.insert({name:'gj',gender:1}) db.ta ...

  5. 微信小程序开发01 --- 微信小程序项目结构介绍

    一.微信小程序简单介绍: 微信官方介绍微信小程序是一个不需要下载安装就可使用(呵呵,JS代码不用下载吗?展示的UI不用下载吗?)的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. ...

  6. layUI实现可选项 弹框

    需求描述:点击插入,会让选择,插入的类型,选择之后,点击确定,执行后续的一些操作.先摆效果图. 代码: //html代码<style> #imp{ display: none; }< ...

  7. springboot 错误求解决

    最近再学习springboot这个好东西,结果给当成白老鼠了,我使用的是idea 2018  来测试  一个简单的界面跳转  ,结果报错了,在网上搜了好半天没搜到相应的解决方案,很头疼,希望哪位大神能 ...

  8. window 服务器 安装 sql server 2008 r2 express 并启用远程访问

    目前市面上的数据库服务器虽然好,但是并不便宜,一个月数千RMB, 我们可以通过在已有的数据库上自建数据库来解决 目前已知的SQL Server 2008 R2的版本有: 企业版.标准版.工作组版.We ...

  9. OPPO F9 Pro在哪里打开usb调试模式的完美方法

    经常我们使用pc通过数据线连接到安卓手机的时候,如果手机没有开启USB调试模式,pc则没能够成功读到我们的手机,此情况我们需要找处理方法将手机的USB调试模式开启,今天我们介绍OPPO F9 Pro如 ...

  10. react安装 项目构建

    1.nodejs安装 下载安装包,解压.如果是已编译文件,在/etc/profile中设置PATH(/etc/profile文件中的变量设置,所有用户可用,但需求重启服务器),并source /etc ...