之前处理图片的方式是，小图标通过gulp配置的spritesmith雪碧图方式，.png会先用ps工具转成.jpg，然后jpg太大则用在线压缩工具来进行压缩（另外gulp系列的gulp-imagemin也用作压缩图片）。

今天看到了一个新的方式，图片为webp格式。以前也有见过但从来没用过这种格式，搜了一下，相信文档说的能大大减少带宽。

什么是WebP格式的图片？

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

以下介绍WebP安装使用   

安装  (用于处理图片)     对应插件安装教程blog

智图API接口已被封装为gulp插件，智图for gulp 。 照github上的教程安装该插件使用

使用
     WebP使用方式  （方案中包含PC、触屏、ios、安卓各版以及兼容版 方案）

图片在线处理 webp!的更多相关文章

  1. 网站图片无缝兼容 WebP/AVIF

    前言 WebP 格式发布已有十余年,但不少站点至今仍未使用,只为兼顾极少数低版本浏览器.至于去年发布的 AVIF 格式,使用的站点就更少了. 然而图片往往是流量大户,与其费尽心机优化脚本体积,可能还不 ...

  2. asp.net实现图片在线上传并在线裁剪

    1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...

  3. jpg、png格式的图片转换成webp后颜色失真的问题

    今天简单的试用了一下 cweb.exe 将 jpg, png 格式的图片转换成 webp 格式. 我今天下载的是当前最新版:1.0.0 cwebp 3.jpg  -q 85 -o 3.webp 发现图 ...

  4. Base64图片编码原理，base64图片工具介绍，图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

  5. jsp版ueditor图片在线管理返回绝对路径

    引用:http://zhengyunfei.iteye.com/blog/2149979 如果你有富文本编辑器的功能需要开发,我推荐你用百度的ueditor.本文将与你分享jsp版ueditor开发中 ...

  6. centos下 将（jgp、png）图片转换成webp格式

    由于项目要求需要将jpg.png类型的图片  转换成webp格式,最开始使用了php gd类库里 imagewebp 方法实现,结果发现转换成的webp格式文件会偶尔出现空白内容的情况.像创建了一个透 ...

  7. C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

    C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...

  8. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

  9. python 图片在线转字符画预览

    文章链接:https://mp.weixin.qq.com/s/yiFOmljhyalE8ssAgwo6Jw 关于python图片转字符画,相信大家都不陌生,经常出现在 n个超有趣的python项目中 ...

随机推荐

  1. react组件（react-grid-gallery）

    react有很多好玩的组件,react-grid-gallery就是其中一个,主要处理图片展示,对图片进行放大与缩小 文档:https://www.npmjs.com/package/react-gr ...

  2. jquery实现复选框全选，全不选，反选中的问题

    今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...

  3. String path = request.getContextPath

    <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+ ...

  4. Pig order by用法举例

    sorted = order data by $0;   数值类型按照数值大小比较 chararray类型按照字符的字典顺序比较 bytearray按照字节的字典顺序比较 复杂类型(map.tuple ...

  5. [WinCE] [Win10] Win10 Creator 升级后 Windows Mobile Device Center 不能打开

    运行 services.msc 找到 Windows Mobile 2003-based device connectivity服务,右键属性,Log On选项卡选择 Local System acc ...

  6. 要提高SQL查询效率where语句条件的先后次序应如何写

    我们要做到不但会写SQL,还要做到写出性能优良的SQL语句. (1)选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句 ...

  7. [C++] 用Xcode来写C++程序[1] 新建C++项目工程

    用Xcode来写C++程序[1] 新建C++项目工程 第一节从新建工程并编译C++源码开始 新建工程 源码: // // main.cpp // YeHelloWorld // // Created ...

  8. Linux sudo详解

    sudo:控制用户对系统命令的使用权限,root允许的操作.通过sudo可以提高普通用户的操作权限,不过这个权限是需要进行配置才可使用. 常用的命令展示 配置sudo的2种方式 1. visodu 编 ...

  9. Linux uname命令详解

    uname常见命令参数 -a, --all print all information, in the following order, except omit -p and -i if unknow ...

  10. 为了让开发者写MaxCompute SQL更爽，DataWorks 增强SQL 编辑器功能

    众所周知,数据开发和分析的同学每天都要花大量时间写MaxCompute SQL:Dataworks作为数据开发的IDE直接影响着大家的开发效率,这次新上线的Dataworks我们在编辑体验上做了很多工 ...