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. 《CSAPP》读书杂记 - Chapter 2. Representing and Manipulating Information

    1. 一段查看地址内容的代码 代码: #include <stdio.h> typedef unsigned char *byte_pointer; void show_bytes(byt ...

  2. Eclipse用法和技巧二十五:eclipse图标的含义

    用了eclipse很久,在使用断点调试的时候才开始关注图标的含义.这才发现eclipse的图标还是很丰富的,熟悉的知道每个图标的含义还是蛮不错的,尤其是在断点调试中.eclipse自带了详细的图标说明 ...

  3. 对原生js的一些小尝试

    意图仿造JQ操作以及弄个个人工具箱,不断完善中,代码均为个人摸索,所以肯定会有不少不足的地方,希望读者们能提出来. var xzhUtils = { //-----DOM对象添加类----- //-- ...

  4. 用Servlet实现聊天室设计

    实验一   Servlet编程 一.实验目的 1.熟悉Java EE编程环境JDK和NetBeans的安装,配置和使用: 2.掌握Servlet的编写及部署: 3.掌握Servlet的工作原理和编程接 ...

  5. java面向对象之 多态 Polymorphism

    多态(Polymorphism):用我们通俗易懂的话来说就是子类就是父类(猫是动物,学生也是人),因此多态的意思就是:父类型的引用可以指向子类的对象. 1.多态的含义:一种类型,呈现出多种状态 主要讨 ...

  6. U盘装centos7系统过程

    1. 使用最新版UltraISO将ISO镜像刻录到U盘 一定要是最新版,试用版都可以,按下图操作: 2. U盘启动电脑进入安装界面 正常情况下你应该会看到下面的这个界面: 选择第一项,然后按TAB键, ...

  7. java实现发送短信

    本程序是通过使用中国网建提供的SMS短信平台实现的(该平台目前为注册用户提供5条免费短信,3条免费彩信,这足够用于我们测试用了.在使用前需要注册,注册地址为http://sms.webchinese. ...

  8. oracle字符集查看修改

    一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...

  9. Eclipse debug ‘Source not found’

    用Eclispe进行Debug时一直被一个问题所困扰:Source not found. 问题产生的原因是调试进入了一个没有源代码的jar包里. 简短说明: Edit Source Lookup Pa ...

  10. VBA 开发学习--基础语法

    MsgBox "开始学习VBA" '提示框 Dim str As String '声明str变量是string类型 Let str = "一起来看流星雨" '给 ...