之前处理图片的方式是，小图标通过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. CSS 属性-webkit-tap-highlight-color的理解

    1.-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的 ...

  2. opencv3.2.0实现读取多张图片的方法（利用sprintf()函数）

    简介: 将连续的图片转换成视频时,首先需要把图片全部读入,然后再做相应处理,该程序利用sprintf()函数,实现连续图片的读入 /*********新建QT控制台程序,实现多张连续图片的读取**** ...

  3. Python解析SWAN气象雷达数据--（解析、生成ASCII、Image、netCDF）

    解析   from datetime import * import time import calendar import json import numpy as np from struct i ...

  4. 2018-10-13 21:30:51 conversion of number systems

    2018-10-13 21:30:51  c language 二进制.八进制和十六进制: 1) 整数部分 十进制整数转换为 N 进制整数采用“除 N 取余,逆序排列”法. 十进制数字 36926 转 ...

  5. java String类 trim() 方法源码分析

    public String trim() {        int arg0 = this.value.length;   //得到此字符串的长度        int arg1 = 0;   //声 ...

  6. zookeeper应用 - leader选举 锁

    模拟leader选举: 1.zookeeper服务器上有一个/leader节点 2.在/leader节点下创建短暂顺序节点/leader/lock-xxxxxxx 3.获取/leader的所有子节点并 ...

  7. Oracle数据库通过DBLINK实现远程访问

    什么是DBLINK? dblink(Database Link)数据库链接顾名思义就是数据库的链接  ,就像电话线一样,是一个通道,当我们要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中就 ...

  8. Array类型

    Array类型 Array也是ECMAScript中常用类型之一,其特点是数组中的每一项都可以保存任何类型的数据,数组的大小可以动态调整. 创建数组 方式1:使用Array构造函数 var books ...

  9. Azure Cosmos DB 使用费用参考

    之前在学习Cosmos DB 中SQL API(DocumentDB) 的时候,也就是之前做的一些笔记,看到有使用费用的一些介绍,就有兴趣的去了解了下,做了一下简单的总结. 想了解更多或是购买使用的还 ...

  10. NSArray排序方法讲解

    NSArray排序方法讲解 给数组排序有着多种方式 最麻烦的是sortedArrayUsingSelector:,其次是sortedArrayUsingDescriptors:,最容易使用的就是sor ...