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. 节点与坐标系——Cocos2d-x学习历程(十)

    1.Node Cocos2d-x把渲染树上的每一个游戏元素抽象为一个节点,即Node.一切游戏元素都继承自Node,因此它们都具有Node所提供的特性.Node定义了一个可绘制对象的通用特性,包括位置 ...

  2. JVM学习之对象的状态

    堆中存放着几乎所有的对象实例,垃圾收集器在堆堆进行回收前,首先要确定这些对象哪些还“活着”,哪些已经“死去”.方法有如下两种: (1)引用计数法 算法思想:为对象添加一个引用计数器,每当有一个地方引用 ...

  3. iOS的推送机制APNs:本地推送&远程推送

    本地推送: 本地推送主要应用在备忘录,闹钟等本地的,基于时间定时的消息提醒.本篇不做详细描述. 远程推送:APNS(苹果推送通知服务) iOS远程推送机制的原理及流程: 注册推送(橙色部分):若该Ap ...

  4. QF——iOS的单例模式

    iOS的单例模式: 单例,即为单个实例,确保一个类里只有一个实例,向整个系统提供一个唯一的实例. 甚至为了严格提供唯一的实例,通常只允许该类自己提供实例化的方法,不允许出现其他入口.这时我们通常得重写 ...

  5. php7 不向后的兼容的变更

    php7 不向后的兼容的变更 在php7中,很多致命错误以及可恢复的致命错误,都被转换为异常来处理了. 这些异常继承自Error类,此类实现了Throwable接口(所有异常都实现了这个基础接口) 这 ...

  6. ecshop开发日志之虚拟商品发送邮件通知

    购买虚拟商品,系统会在支付后自动发送邮件到用户填写的邮件地址中,追踪过程如下首先在订单列表中可以获得到处理订单的php文件为flow.php,之后在最后一步url地址显示为http://localho ...

  7. spring 源码之IOC 类图

    Spring IoC容器是spring框架的核心和基础,IoC容器负责spring Bean的生命周期,是spring框架实现其他扩展功能的基础.容器的继承结构比较复杂,这里画出了spring IoC ...

  8. 黑马程序员-- C语言变量作用域与代码块

    这里通过变量作用域的两种错误用法来介绍一下C语言变量作用域 其次对代码块的使用进行了简单说明: #include <stdio.h> 1.变量的作用域(作用范围) 变量定义的那一行开始,直 ...

  9. poj 1141 Brackets Sequence(区间DP)

    题目:http://poj.org/problem?id=1141 转载:http://blog.csdn.net/lijiecsu/article/details/7589877 定义合法的括号序列 ...

  10. 【翻译】MVC Music Store 教程-概述(三)

    Controller 与传统的Web框架,将传入的URL通常映射到磁盘上的文件.例如:一个URL请求“/Products.aspx" 或"/Products.php”是处理一个Pr ...