之前处理图片的方式是，小图标通过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. 云卡门禁苹果SDK_BLEDOOR_SDK_IOS_2016_12_15

    // // BLElib.h // BLElib // // Created by szbosk on 16/8/16. // Copyright © 2016年 szbosk. All rights ...

  2. Android ListView左滑删除、左滑自定义功能

    最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...

  3. spring boot(17)-@Async异步

    验证码的异步机制 上一篇讲过可以用邮件发验证码,通常我们在某网站发验证码时,首先会提示验证码已发送,请检查邮箱或者短信,这就是图中的1和3.然而此时查看邮箱或短信可能并没有收到验证码,往往要过几秒种才 ...

  4. ASP.NET Core 系列[1]：ASP.NET Core 初识

    ASP.NET Core 是一个跨平台的高性能开源框架,是一个用于连接到互联网的基于云的现代应用程序. ASP.NET Core 用于构建如 Web 应用.物联网(IoT)应用和移动后端应用,这些应用 ...

  5. C++虚函数原理

    类中的成员函数分为静态成员函数和非静态成员函数,而非静态成员函数又分为普通函数和虚函数. Q: 为什么使用虚函数 A: 使用虚函数,我们可以获得良好的可扩展性.在一个设计比较好的面向对象程序中,大多数 ...

  6. 1.windows下Redis安装

    参考文档:https://www.cnblogs.com/Leo_wl/p/6392196.html?utm_source=itdadao&utm_medium=referral Redis数 ...

  7. 解决点击cell执行动画导致的重用问题

    解决点击cell执行动画导致的重用问题 说明: 动画的细节都是裸露的,并没有封装,靠看官来优化了. 效果: 源码: https://github.com/YouXianMing/UITableView ...

  8. 将字典或者数组转换成JSON数据或者字符串

    将字典或者数组转换成JSON数据或者字符串 源码: NSDictionary+JSON.h 与 NSDictionary+JSON.m // // NSDictionary+JSON.h // Cat ...

  9. mysql内存评估计算

    这是一个可以评估mysql内存使用大小的网站,根据一些基本的参数,来确定的. 网站:http://www.mysqlcalculator.com/

  10. ZT 查找字符串中连续最长的数字串

    查找字符串中连续最长的数字串 有俩方法,1)比较好理解一些.2)晦涩 1) /* 功能:在字符串中找出连续最长的数字串,并把这个串的长度返回, 并把这个最长数字串付给其中一个函数参数outputstr ...