之前处理图片的方式是，小图标通过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. php Closure::bind的参数说明

    publicstatic Closure Closure::bind ( Closure $closure , object$newthis [, mixed$newscope = 'static' ...

  2. CSS选择器之伪类选择器（交互）

    :link 选取未访问链接 :active 选取活动链接(单击某链接,未松开鼠标时). :visited 选取已被访问的链接. :target 链接指定的目标 :hover 当鼠标浮在元素上方时. : ...

  3. PS改变图像颜色

    由于写的一个页面主色调变了,里面的一些图标颜色也要相应改变,自己难得重新去psd里面截图,就想着用ps,看能否直接能变换一下图标颜色.其实方法也很简单的. 1:用ps打开需要改变图标颜色的文件,然后选 ...

  4. android studio使用openssl

    前言 逆向的基础是开发, 逆向分析时很多时候会使用一些公开的加密函数来对数据进行加密,通过使用 openssl 熟悉下. 正文 首先得先编译出来 openssl,然后把它们复制到你的工程目录下. in ...

  5. 润乾报表在proxool应用下的数据源配置

     大多数应用会使用proxool数据连接池,proxool.xml的配置文件如下: <?xml version="1.0″ encoding="UTF-8″?> & ...

  6. Pig脚本 .pig

    pig脚本就是一个文件,保存了多条pig命令,通常后缀是.pig(不强制).       多行注释:/**/     单行注释:--       下面是一个名字是test.pig的脚本的例子: /* ...

  7. Django Redis验证码 密码 session 实例

    1.settings CACHES = { "default": { "BACKEND": "django_redis.cache.RedisCach ...

  8. AWS CSAA -- 03 Identity Access Management IAM

    009 IAM 101 012 IAM Summary 问题汇总: Lab1:对root account进行加固 Lab 2:利用CloudWatch设置BillingAlarm

  9. spring boot(11)-druid监控

    druid druid是和tomcat jdbc一样优秀的连接池,出自阿里巴巴.关于druid连接池参数,参考 https://github.com/alibaba/druid/wiki/DruidD ...

  10. WinForm自定义控件

        [ToolboxBitmap(typeof(PropertyGrid))]//设置在工具箱中显示的小图标 public partial class ServiceManage : UserCo ...