返回
数据
分类

WebP 浏览器支持,Webp如何使图片体积减少45%

日期: 2020-01-02 08:13 浏览次数 : 134

WebP 的多功能:做你想做!

导读WebP 是 Google 发明的更小的替代 JPEG 和 PNG 的格式。最近有很多关于WebP 支持的疑惑,细说来就是可以用它做什么,不能做什么,比如说浏览器支持,CMS 支持等等。今天我想清除你所有可能的疑虑。WebP 的支持程度实际上比你想的可能要好得多。

WebP 浏览器支持

并非所有浏览器都支持 WebP,所以很重要的是你得清楚哪些浏览器是支持的,这可能会影响你做决定,是否在你的网站或项目中转换并采用 WebP 图片。下面是所有主流浏览器及其WebP支持程度。

截至 2016 年 7 月,全球浏览器对 WebP 支持率是必赢手机登录网址 ,69.6%– caniuse.com

Chrome WebP

Google Chrome 官方自 Chrome 23 起开始支持 WebP)(最初发布于 2012 年 11 月),自 Chrome 9 起部分支持。部分支持指的是并不支持无损的、支持 alpha 通道的 WebP。

Google 的安卓浏览器从 4.2 版本起开始官方支持 WebP(最初发布于 2012 年 11 月),4 版本起开始部分支持。Google Chrome 安卓版从 Chrome 50 起开始支持 Webp。

Opera WebP

Opera 官方自 Opera 12.1 开始支持 WebP(最初发布于 2012 年 11 月),自 Opera 11.5 起部分支持。部分支持指的是并不支持无损的、支持 alpha 通道的 WebP。

Opera mini 浏览器当前所有版本都官方支持 WebP。

FireFox WebP

Firefox当前不支持 WebP。Mozilla 论坛的bug 856375正在讨论此事。

Internet Explorer WebP

Internet Explorer 和他们新的 Edge 浏览器,都不支持WebP。而且目前并无添加支持的任何打算。不过,已有用户发声讨论,人们要求微软将 Webp 支持加入 Edge。

Safari WebP

Apple 的 Safari 浏览器及其 iOS Safari 浏览器都不支持WebP。不过,最近 HTML5test 有条推文说我们有望在 iOS 10 看到Safari支持 WebP。iOS 10 目前处于 beta 测试阶段,所以时间会说明一切。

你该使用 WebP 吗?

因为全球 WebP 支持度在 70% 左右浮动,使用这种图片格式来替代 PNG 和 JPEG 是极有意义的。还有重要的一点要提到,无论如何实现 WebP,你只是为支持的浏览器提供 WebP 服务,而为其他浏览器提供 PNG 和 JPEG。使用 WebP 并不会破坏你的图片。把这当做增值,而非改变。还有另外一些东西需要考虑,如浏览器市场份额,当前流量,WebP 相对于 PNG 和 JPEG 的文件体积。

浏览器市场份额

决定是否使用 WebP 的时候,记得看下浏览器市场份额,因为 Chrome 和 Opera 支持 WebP,所以有必要看下他们的占比。我们从一些不同来源收集了一些统计数据,它们都有自己不同的数据收集方式:

  • **StatCounter 浏览器市场份额**

StatCounter截至 2016 年 6 月的数据显示,Chrome 占有市场份额为 58% 的,Firefox 以大约 16% 排名第二。

必赢手机登录网址 1

  • W3Counter 浏览器市场份额

W3Counter截至 2016 年 6 月的数据显示,Chrome 占有约 57% 的市场比例,Safari 以约 14% 跻身第二。

必赢手机登录网址 2

  • W3Schools 浏览器市场份额

W3Schools截至 2016 年 5 月的数据显示,Chrome 占有约 71% 的市场份额,Firefox 以约 17% 居于其后。

必赢手机登录网址 3

  • Clicky 浏览器市场份额

Clicky截至 2016 年 7 月的数据显示,Chrome 占有约 50% 的市场份额,Firefox 以约 18% 位居第二。

必赢手机登录网址 4

从上面的数据可以看到,Chrome 平均占有约 59% 的市场份额,所以必须意识到,如果在项目中加入 Webp 图片,大多数访客都会看到 WebP 版本。Opera 仅拥有市场份额的一小部分,但它们的用户也可以看到。

Google Analytics

尽管浏览器市场份额对大多数人来说可能倾向于 Chrome,并不意味着你的网站/项目也是如此。确认数据总是很重要的。做起来很容易,点击 Google Analytics 的 “浏览器与操作系统”(“Browser & OS”)部分就能看到。在下面的例子中,可以看到将近 70% 的流量来自 Chrome。在这种情况下,WebP 是很有利的,这意味着 70% 的访客会看到更小体积的文件。

必赢手机登录网址 5

还有,别忘了移动端!可以在 Google Analytics 的“设备”(“Devices”)部分看到。如你所见,大部分流量来自苹果设备。所以如果 iOS 10 完全支持 WebP 的话会颇有意思,这样一来会大量的移动端流量将会有戏剧性的不同。

必赢手机登录网址 6

WebP 文件体积

已经有大量研究比较了 WebP 与 PNG、JPEG 的文件体积。一定要去看看它们。

  • JPG 转 WebP – 压缩大小比较
    • **WebP 平均减小了 85.87% 的文件提交。加载时间降低了 11%,页面整体大小减少了 29%。**
  • PNG 转 WebP – 压缩大小比较
    • WebP 平均减小了42.8% 的文件提交。加载时间降低了 3%,页面整体大小减少了 25%。
  • WordPress 缓存开启下的 WebP
    案例研究

还需要考虑成本效益比cost-benefit ratio。对 WordPress 这样的 CMS 来说,现在有两种图片,一个是 JPEG 或 PNG,还有一个 WebP。因此使用 WebP 会占用服务器更多的硬盘空间。但事实是,更小体积的图片带来的是更快的加载时间。不应忽略节省下来的流量:取决于不同项目,积累下来的数量相当可观。

其他人正在使用 WebP,虽然你可能没注意到。Dollar Shave Club 可以将其 App 的大小由 230 MB 减少到 30 MB!结果就是,使用 WebP 格式将体积减少了七倍。

必赢手机登录网址 7

CMS WebP 支持

接着平台支持的问题就来了,不管你是使用 WordPress 或 Joomla 这样 的 CMS,或者仅仅是像 Laravel 这样的 PHP 框架搭建的简单的静态站点。下面我们将会介绍一点关于如何在在不同平台上支持 Webp 图片的内容。

WordPress WebP

事实上,WordPress 很容易实现 WebP 支持。你可以使用我们的集成图片优化(Image Optimizer)插件,在将图片上传至 WordPress 媒体库时候自动转换为 WebP 格式。

必赢手机登录网址 8

然后你可以使用免费的WordPress Cache Enabler插件来为访客提供 WebP 图片。

必赢手机登录网址 9

重点是,Cache Enabler 做的其实是判断浏览器支持,为支持的浏览器提供 WebP,而为其他浏览器提供 JPEG 或 PNG。它实际上已经自动为你做好了切换工作。

Joomla WebP

Yireo 的免费的WebP Joomla 扩展,允许在浏览器支持的情况下启用 WebP 支持。其侦测浏览器对 WebP 的支持,基于 user-agent 简单检测(这样就能正确匹配 Chrome)以及额外的 JavaScript 检测。如若检测到支持 WebP,扩展会解析输出的 HTML,确保那些支持图片(png,jpg,jpeg)的链接被 Webp 图片替换掉。

Magento WebP

Yireo 的免费的WebP Magento 扩展,允许在浏览器支持的情况下启用 WebP 支持。其侦测浏览器对 WebP 的支持,基于 user-agent 简单检测(Chrome)以及额外的 JavaScript 检测(这样也能够匹配其他浏览器)。如若检测到支持 WebP,扩展会解析 HTML 输出,确保那些支持图片(png,jpg,jpeg)的链接被 Webp 图片替换掉。

其他平台上的 WebP

对于其他平台,你应该去看看我们的这篇如何提供 WebP (how to deliver WebP)。某些平台启用 WebP 支持,可能需要修改你的

.htaccess

文件或者 Nginx 配置。

小结

如你所见,WebP 的支持程度可能比你最初想的要好得多。当然应该讲浏览器市场份额以及当前的浏览数据纳入考虑中。比方说,如果 70% 以上的流量都来自 Chrome,那使用 WebP 来加速网站意义重大。如果你在使用 CMS,一切都很简单,因为有很多插件来帮你完成 WebP 的转换。


原文来自:

本文地址:

的多功能:做你想做! 导读 WebP 是 Google 发明的更小的替代 JPEG 和 PNG 的格式。最近有很多关于WebP 支持的疑惑,细说来就是可以用它做...

姚丽冰  学号:16050120089

原文链接 segmentfault.com

【嵌牛导读】:除了视频,图片占据了 PC 和 App 的大部分流量,为运营方带来高额的成本支出,同时过多的图片加载会影响到网站与 App 的加载速度。因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情。目前,传统的图片格式如 JPEG、PNG、GIF 等格式的图片已经没有太多可以优化的空间,而 Google 推出 WebP 格式在图片压缩方面有了新的突破。

【嵌牛鼻子】:Webp,VP8 视频编码,有损压缩和无损压缩,格式兼容

【嵌牛提问】:WebP 的诞生及原理,Webp如何使图片体积减少45%,WebP 应用效果如何,如何开启 WebP 图片格式

【嵌牛正文】:

WebP 的诞生及原理

WebP 的诞生是因为最初 Google 开发了一种基于 VP8 视频编码格式的 WebM 视频格式,Google 的工程师意识到 WebM 格式非常适合压缩关键帧,由此开发了 WebP 图片格式。

WebP 最初发布于 2010 年,主要目标是使图片质量和 JPEG 格式质量相同的情况下,减少图片文件的体积,籍此减少互联网上图片的发送时间和流量消耗。发布不久之后,WebP 便被整合到 Chrome 以及 Android 系统中,并且 Google 发布了函数库,让 iOS 应用等其他工具支持 WebP 格式。

WebP 图片格式派生自 VP8 视频编码,同时提供有损压缩和无损压缩:

有损 WebP 压缩使用的图像编码方式与 VP8 视频编解码器中压缩视频关键帧的方法相同。利用图像已编码部分预测未编码部分,将图像细分来进行预测处理,分块越细预测越准确。获取编码数值后将原图像数据减去预测数据得到差值,仅对差值进行编码,以此控制大小;

无损 WebP 压缩使用已知的图像片段来精确地重建新的像素,在无法找到相应的匹配值的情况下,使用本地调色板进行优化。

Webp使图片体积减少45%

与其他图片格式相比,WebP 集合了多种图片文件格式的特点。它像 JPEG 一样适合压缩照片和其他细节丰富的图片,像 GIF 一样可以显示动态图片,像 PNG 一样支持透明图像。根据 Google 的测试,WebP 无损压缩图片比 PNG 图片少了 45% 的文件体积,即使这些 PNG 图片在使用 pngcrush 和 PNGOUT 处理后,WebP 依旧可以减少 28% 的文件体积。

必赢手机登录网址 10

WebP 图片格式与其他图片格式对比

WebP 应用效果

随着浏览器对 WebP 支持的普及,目前也有越来越多的互联网开始使用 WebP,这里分享几个数据:

YouTube 的视频略缩图采用 WebP 后,网页加载速度提升了 10%;

Google Chrome 应用商店采用 WebP 后,每天可以节省几 TB 的带宽,页面加载时间减少了30% 左右;

花瓣网在 2017 年 5 月开启 WebP 后,在网站总体请求量没有减少的情况下,整体带宽下降了近 50%。

WebP 格式兼容情况

虽然 WebP 的使用给实际应用带来了很多好处,且 Google Chrome 和 Opera 浏览器以及许多其他工具和软件库都支持 WebP,但是到目前为止也并非所有浏览器都支持 WebP, IE、Edge、Firefox、Safari 就均未支持 WebP 格式。

必赢手机登录网址 11

WebP 支持的情况

如何开启 WebP 图片格式

WebP 凭借优异的图片压缩性能,以及兼备无损和有损两种压缩算法,迅速在各大网站、App 普及。那么要如何在网站中开启 WebP 格式呢?

必赢手机登录网址 12

又拍云控制台 WebP 自适应开启方式

WebP 浏览器支持,Webp如何使图片体积减少45%。又拍云目前已经支持 WebP 图片格式转换,而且还支持 WebP 自适应功能。在又拍云后台一键开启 WebP 自适应功能,即可通过 CDN 平台智能判断客户端浏览器是否支持 WebP 解码,如果支持则返回 WebP 格式图片,如果不支持则会返回原图,在客户端以及源站无需任何改动。

参考文章:

WebP—维基百科 ...

A new image format for the Web ...

推荐阅读:

都说 WebP 厉害,究竟厉害在哪里?

移动端如何使用 WebP