用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

1 npm install -g gulp-imageisux             #全局安装
2 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的好像不可以。

时间: 2024-10-22 06:52:20

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

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

gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin 安装成功后你会看到如下信息:(安装时间可能会比较长取决于网络) npm

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

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

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

图片上传时必要将图片进行压缩,不然会上传失败 首先是同系统相册选择图片和视频.iOS系统自带有UIImagePickerController,可以选择或拍摄图片视频,但是最大的问题是只支持单选,由于项目要求需要支持多选,只能自己自定义.获取系统图库的框架有两个,一个是ALAssetsLibrary,兼容iOS低版本,但是在iOS9中是不建议使用的:另一个是PHAsset,但最低要求iOS8以上.兼容到iOS7,可以选择了ALAssetsLibrary 现在我们先说选择一张图的情况 一.单图多图上

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

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

使用 gulp 压缩图片

请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下. gulp 代码 一.安装 gulp-imagemin 模块 提示:你需要使用命令行的 cd 切换至对应目录再进行安装操作和 gulp 启动操作. 在命令行输入 npm install gulp-imagemin

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

在移动端压缩图片并且上传主要用到filereader.canvas 以及 formdata 这三个h5的api.逻辑并不难.整个过程就是: (1)用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式) (2)把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩 (3)获取到压缩后的base64格式图片数据,转成二进制塞入formdata,再通过XmlHttpRequest提交form

Android压缩图片和libjpeg库

前言 Fjpeg使用 Fjpeg 注意 如何使用 如何压缩图片只改变在硬盘的存储大小 如何改变图片分辨率让其Bitmap对象可以加载到内存中 关于重载版本 开始学习之旅 补充知识的结论 修改图片分辨率 防止在Android加载Bitmap的时候oom内存溢出 解决方案1 解决方案2 希望压缩图片方便网络传输 第一种方案利用Bitmapcompress方法压缩 第二种利用libjpeg压缩 在Android50测试两个 图片压缩 在Android60测试两个 图片压缩 解释Android50和60

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-

android压缩图片,解决oom错误

你的ImageView只有128*96像素的大小,只是为了显示一张缩略图,这时候把一张1024*768像素的图片完全加载到内存中显然是不值得的. 所以我们需要一个方法来解决这个问题. [java] view plaincopy public static int calculateInSampleSize(BitmapFactory.Options options, int reqWidth, int reqHeight) { // 源图片的高度和宽度 final int height = op