webp 初探

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文件,前端根据用户浏览器的类型动态匹配图片格式

时间: 2024-10-10 05:04:22

webp 初探的相关文章

webp图片详解

WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小. 2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube.Gmail.Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了

性能分析初探

而对于测试场景,对于不同 App,选取的场景肯定有所不同,不过可以统一的是,性能测试场景一定是 App 业务的主流程或者核心功能场景. 比如支付宝的转账.缴费,微信的聊天.拍照发朋友圈.更新朋友圈. 性能分析初探: 内存占用过大时应该查看是否有内存泄露.是否有对象使用了不合理的数据结构: (1)内存泄露可以借助 MAT.Leakcanary 等工具来分析定位: (2)不合理的数据结构需要针对内存占用排名靠前的类型进行分析,需要研究 Java 不同集合类的使用场景和实现原理的区别: 启动时间太慢,

进阶之初探nodeJS

一.前言 在"初探nodeJS"随笔中,我们对于node有了一个大致地了解,并在最后也通过一个示例,了解了如何快速地开启一个简单的服务器. 今儿,再次看了该篇随笔,发现该随笔理论知识稍多,适合初级入门node,固萌生一个想法--想在该篇随笔中,通过一步步编写一个稍大一点的node示例,让我们在整体上更加全面地了解node. so,该篇随笔是建立在"初探nodeJS"之上的,固取名为"进阶之初探nodeJS". 好了,侃了这多,那么我们即将实现一个

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

前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数据. 273这个M站点是产品推荐我看的.第一眼看这个产品时我就再想他们这个三次加载和翻页按钮的方式,那么小分页的pageIndex是怎么计算的.所以就顺便看了下源码. 提到看源码时用到了Chrome浏览器的格式化工具(还是朋友推荐我的,不过这个格式化按钮的确不明显,不会的话自行百度). 三次加载和分

[转载]HDFS初探之旅

转载自 http://www.cnblogs.com/xia520pi/archive/2012/05/28/2520813.html , 感谢虾皮工作室这一系列精彩的文章. Hadoop集群(第8期)_HDFS初探之旅 1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开发的,可以运行于廉价的商用服务器上.它所具有的高容错.高可靠性.高可扩展性.高

MongoDB初探系列之二:认识MongoDB提供的一些常用工具

在初探一中,我们已经可以顺利的将MongoDB在我们自己的机器上跑起来了.但是在其bin目录下面还有一些我们不熟知的工具.接下来,将介绍一下各个小工具的用途以及初探一中MongoDB在data文件夹下创建的文件的用途. 1.bin目录下面的各种小工具简介及使用方式 bsondump.exe 用于将导出的BSON文件格式转换为JSON格式mongo.exe mongoDB的客户端 mongod.exe 用于启动mongoDB的Server mongodump.exe 用于从mongodb数据库中导

Asynchronous Pluggable Protocols 初探

Asynchronous Pluggable Protocols,异步可插入协议,允许开发者创建可插协议处理器,MIME过滤器,以及命名空间处理器工作在微软IE4.0浏览器以及更高版本或者URL moniker中.这涉及到Urlmon.dll动态链接库所公开(输出)的可插协议诸多功能,本文不进行深入的原理讲解,只对它其中之一的应用进行解析,那就是如何将一个应用程序注册为URL协议. 应用场景: tencent协议: 当我们打开"tencent://message/?uin=要链接的QQ号 &qu

重新认识HTML,CSS,Javascript 之node-webkit 初探

今天我们来系统的.全面的 了解一下前端的一些技术,将有助于我们写出 更优秀的 产品 出来. 什么是HTML? HTML 是用来描述网页的一种语言. HTML 包含一些根节点,子节点,文本节点,属性节点,组成, 它通过一系列预定义标签来描述网页结构,如: <title>This is title</title> ,这个表明该网页的标题是 This is title. 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets),它描述浏览器显示如何显示htm

java进阶06 线程初探

线程,程序和进程是经常容易混淆的概念. 程序:就是有序严谨的指令集 进程:是一个程序及其数据在处理机上顺序执行时所发生的活动 线程:程序中不同的执行路径,就是程序中多种处理或者方法. 线程有两种方法实现 一:继承Thread 覆盖run方法 package Thread; public class Thread1 { public static void main(String[] args){ MyThread1 thread1=new MyThread1(); thread1.setName