用gulp-imageisux智图api压缩图片
➣ 智图平台是什么?
智图是腾讯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 #局部安装
- 声明图片地址,例如放在img目录下面
gulp.src(['img/*'])
。 - 指定参数,压缩图片导出目录
/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
,则只会有压缩后原格式图片。
智图github:https://github.com/targetkiller/gulp-imageisux
注明:实验证明jpg、png的图片可以正常压缩,不过gif的好像不可以。
用gulp-imageisux智图api压缩图片的更多相关文章
- 续Gulp使用入门三步压缩图片
gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...
- Tool-图片压缩-腾讯智图:腾讯智图
ylbtech-Tool-图片压缩-腾讯智图:腾讯智图 智图是腾讯ISUX前端团队开发的一个专门用于图片压缩和图片格式转换的平台,其功能包括针对png,jpeg,gif等各类格式图片的压缩,以及为上传 ...
- iOS 使用AFN 进行单图和多图上传 摄像头/相册获取图片,压缩图片
图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项 ...
- 使用tinypng对需要上传Gitee图床的图片进行压缩
目录 背景 Tinypng简介 Tinypng使用 手动上传图片 使用API 调用API自动上传超过1MB图片 安装tinyfy 自动上传脚本 其他 背景 在使用Gitee作为图床时(使用Typora ...
- Android 高清加载巨图方案 拒绝压缩图片
Android 高清加载巨图方案 拒绝压缩图片 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/49300989: 本文出自:[张 ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
- 使用 gulp 压缩图片
请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ ...
- 使用canvas 的api 实现 图片的显示 及 压缩
在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用file ...
- 一篇迟到的gulp文章,代码合并压缩,less编译
前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...
随机推荐
- 清北学堂学习总结day2
今天是钟皓曦大佬讲课,先来膜一波 %%%%% •数论 数论是这次培训的一个重点,那么什么是数论呢? 数论是研究整数性质的东西,所以理论上day2不会涉及小数QwQ (切入正题) •整除性: 设a, ...
- JVM学习资料
java虚拟机学习-深入理解JVM(1) java虚拟机学习-慢慢琢磨JVM(2) java虚拟机学习-慢慢琢磨JVM(2-1)ClassLoader的工作机制 java虚拟机学习-JVM内存管理 ...
- C++入门篇十一
单例对象:为了让类只有一个实例,实例不需要自己释放掉 不管创建多少个实例对象进行访问,访问的都是同一个值 #include "pch.h" #include <iostrea ...
- Android6.0以上系统动态获取权限
动态权限的申请方法: 1.首先,需要在AndroidManifest.xml静态申请权限,否则无法动态申请权限: <uses-permission android:name="andr ...
- 五 Zabbix全网监控
监控的作用 我们的职责 1.保障企业数据的安全可靠. 2.为客户提供7*24小时服务. 3.不断提升用户的体验.在关键时刻,提前提醒我们服务器要出问题了当出问题之后,可以便于找到问题的根源 ...
- Scyther-manual ------BNF
1.Scyther 协议安全模型的验证实例 第一部分: 打开协议模型 ,设置攻击变量的参数执行分析 Scyther is a tool for the formal analysis o the ...
- 一个Tomcat下部署两个,甚至多个项目
是的這是我粘過來的 Tomcat目录下的结构如图: 第一步:Tomcat默认空间webapps,中已经存在一个项目了,此时要增加一个项目运行可以将原本webapps目录copa一份, 改名为webap ...
- RabbitMQ开启服务却无法登录
我之前无聊之际修改了我的电脑名,后来发现我的rabbitmq服务无法开启,后来我又把电脑名改回去了还是不行,我从网上看了很多教程都没有成功,后来看到了这个方法,出处忘记了,不好意思,发出来记忆一下 包 ...
- C++11 带来的新特性 (4)—— 匿名函数(Lambdas)
1 语法 Lambdas并不是新概念,在其它语言中已经烂大街了.直接进入主题,先看语法: [ captures ] ( params ) specifiers exception attr -> ...
- 小程序-组件component和模版template的选择和使用
小程序提供了组件component和模版template那什么时候 选择哪一个使用呢?我总结了一下 template主要是模版,对于重复的展示型模块进行展示,其中调用的方法或者数据data都是需要引用 ...