WebP是Google新推出的影像技术，它可让网页图档有效进行压缩，同时又不影响图片格式兼容与实际清晰度，进而让整体网页下载速度加快。

如果我们能将其应用在现有的图片上，将可以进一步减少图片大小加快页面的读取速度

但webp也有一定的局限性，目前主流的浏览器只有Chrome和opera 支持，因此实现的时候需要前端根据用户的浏览器类型来动态匹配图片类型。

文件转换方案

推荐3种不同的转换方案(jpeg->webp)

综合各项目测试结果，推荐使用google的方案，在使用性，速度及图片效果都比较好

处理工具

网站

特点

其它

Google

https://developers.google.com/speed/webp/

安装文件小，

不影响现有php环境

多种选项供选用

以命令行执行

ImageMagic

http://www.imagemagick.org/

安装文较大，

不影响现有php环境

多种选项供选用

*比google多一种压缩方案：以源jpeg文件的压缩比来生成目标文件

以命令行执行

Webp php插件

https://github.com/godlovesdog/webp

需要安装PHP插件。

处理速度快，

但没有提供可调整参数（压缩比不可调）

Php 程序执行

*google及ImageMagic 都有提供无损压缩算法（lossless），但测试过之后处理时间(对比90%压缩)及生成文件大小均比源文件多5-6倍。

*还有一种PHP+GD的方案，需要php5.5.0及gd 2.1.0以上版本。但试过php-5.6.2+GD2.1.0测试未能成功

建议在图片处理的时候同时生成webp文件，前端根据用户浏览器的类型动态匹配图片格式

webp 初探的更多相关文章

  1. 关于webp图片格式初探

    前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...

  2. webp图片详解

    WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使 ...

  3. Google最新的图片格式WEBP全面解析

    前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...

  4. webp技术探索

    不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值且值得 ...

  5. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

  6. 初探领域驱动设计（2）Repository在DDD中的应用

    概述 上一篇我们算是粗略的介绍了一下DDD,我们提到了实体.值类型和领域服务,也稍微讲到了DDD中的分层结构.但这只能算是一个很简单的介绍,并且我们在上篇的末尾还留下了一些问题,其中大家讨论比较多的, ...

  7. CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探

    CSharpGL(8)使用3D纹理渲染体数据 (Volume Rendering) 初探 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码 ...

  8. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  9. JavaScript学习（一） —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

随机推荐

  1. sqlite3插入日期时间出错解决

    正确写法 insert into hhf_records(RegistrationNumber,MachinesNumber,InDataTime,Flag,CType) values (11,1,d ...

  2. Docker容器的跨主机连接

    Docker容器的跨主机连接 Docker容器的跨主机连接 使用网桥实现跨主机容器连接 网络拓扑 网络连接使用的是Bridge 操作 修改/etc/network/interfaces文件,分配静态I ...

  3. zendstudio -chinese

    http://archive.eclipse.org/technology/babel/index.php http://www.eclipse.org/babel/downloads.php 注册码 ...

  4. eclipse 快捷方式大全

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  5. Nginx和Nginx+的比较(上)

    Nginx和Nginx+的比较(上) 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 一.Nginx+介绍 Nginx和 ...

  6. MFC渐入渐出框实现方式二

    类似360消息弹出框,实现方式一见http://blog.csdn.net/segen_jaa/article/details/7848598. 本文采用另外的API实现渐入渐出效果. 主要API:S ...

  7. label 标签

    <label> 标签为 input 元素定义标注内容 label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本,就会触发此控件.就是 ...

  8. Python之美[从菜鸟到高手]--生成器之全景分析

    yield指令,可以暂停一个函数并返回中间结果.使用该指令的函数将保存执行环境,并且在必要时恢复. 生成器比迭代器更加强大也更加复杂,需要花点功夫好好理解贯通. 看下面一段代码: def gen(): ...

  9. DataUml Design 教程6-DataUML Design 1.1版本号正式公布（支持PD数据模型）

    从DataUML Design正式公布到如今有两个月了.因为近期比較忙,到如今才公布1.1版本号. 以后本人会一直坚持不断完好DataUML Design软件,希望广大程序员们多多支持. 一.1.1版 ...

  10. 分布式ElasticSearch简单介绍

    这里我们解释一些通用的术语,比如集群(cluster).节点(node)和分片(shard).Elasticsearch的扩展机制,以及它怎样处理硬件故障.在此将探索怎样创建你的集群(cluster) ...