WebP简单介绍

来源：互联网发布：java swing绝对布局编辑：程序博客网时间：2024/06/07 22:04

WebP是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自视频编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。

- 为什么使用WebP
- 兼容性
- 检测与使用
  - 服务器通过Accept headers的内容与浏览器协商
  - Modernizr
  - HTML5 元素
  - 在自己的 JavaScript 代码中
- 参考文章

为什么使用WebP

WebP主要优势是体积小。根据Google Developers上的这篇文章，WebP格式图片的体积比相同质量的JPEG格式图片小25%-34%。

同时WebP还支持动态图像。在相同色块较多的情况下，动态 WebP的体积甚至只有 gif 体积的20%。
如这个 gif原始大小4.9M，使用阿里云 oss 提供的 Webp 转换 API 进行转换后得到的WebP 格式图片大小仅906K。

兼容性

Caniuse 上的数据显示大约有71%的国内用户的浏览器支持WebP格式，使用WebP格式将带来较明显的效果。

检测与使用

由于不是所有的浏览器都支持WebP，所以要检测浏览器是否支持，然后在不支持的浏览器中使用其他更通用的格式。

服务器通过`Accept headers`的内容与浏览器协商

服务端根据客户端发送的Accept headers的内容是否包含image/webp来决定是否使用WebP格式的图片。

Deploying New Image Formats on the Web
How To Reduce Image Size With WebP Automagically

Modernizr

Modernizr是用于检测浏览器对HTML5和CSS3特性支持情况的 JavaScript 库，其中与WebP相关的属性有Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha和Modernizr.webp.animation。

HTML5 元素

通过HTML5的<picture>元素可以很方便地使用WebP格式，并在不支持的情况下使用默认格式的图片。

<picture>  <source type="image/webp" srcset="images/butterfly.webp">  <img src="images/butterfly.jpg" alt="a butterfly"></picture>

在自己的 JavaScript 代码中

可以用几张极小的WebP图片来检测浏览器是否支持相应的特性。

// check_webp_feature://   'feature'可以是'lossy', 'lossless', 'alpha' or 'animation'中的一个.//   'callback(feature, result)'会在得到检测结果后被异步调用，所以依赖检测结果的代码应该放在回调函数中。function check_webp_feature(feature, callback) {    var kTestImages = {        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"    };    var img = new Image();    img.onload = function () {        var result = (img.width > 0) && (img.height > 0);        callback(feature, result);    };    img.onerror = function () {        callback(feature, false);    };    img.src = "data:image/webp;base64," + kTestImages[feature];}

参考文章

https://developers.google.com/speed/webp/faq
https://developers.google.com/speed/webp/docs/webp_study
http://isux.tencent.com/introduction-of-webp.html

1 0