让你的网站支持.WebP格式

Jan 30, 2019

WebP格式

WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。

它是一个开源项目,我们可以在此获取其中源码,以及相关工具。

浏览器支持

显然,Google浏览器Chrome首先引入,此外Opera 11.10也增加对WebP的支持。 如果你能看见下面的图片,说明你的浏览器支持WebP。

让你的网站支持WebP格式

支持更多的浏览器!

WebP的优势显而易见,但缺少主流浏览器的支持,使得它目前仍然无法推广。但这并不妨碍我们尝试!

大多数浏览器自身无法解码WebP格式,但可以交给我们来实现!虽然网页脚本无法胜任,但借助Flash技术,我们完全可以实现高效快速的解码。

并且,几乎所有的浏览器都支持Flash...

WebP插件

如果你的浏览器不支持.WebP格式,那么把以下代码加入到网站里吧!

当前版本文件:WebP.js,在此下载打包文件。

</body>之间插入如下代码,即可使用WebP了。

插件将会捕捉页面中使用WebP格式的img元素,并用Flash进行替换。图像的解码及显示都在Flash中完成,因此目前版本对CSS设置的背景图片无效。

说明

当然,作为JPEG格式的替换,只有对较大的图像使用才有意义,否则过多的解码将消耗大量的资源。

ps:该文根据原作者文章进行了相应的删减,想了解更多原文在这里。

  • WordPress如何修改并自定义前台字体
  • 给Typecho文章页面添加百度谷歌收录检测
  • PHP网站出现Notice: Undefined index的解决方法
  • 实现强制HTTPS的解决方案
  • html动态标题的实现
    1. 这个格式还不够普及,如果个人追求可以自己的地方自己弄,宣传上应该选择通用格式。

      1. @countmeon

        已经很普及了,只是一般人不会关注的,比如:微信公众号

    2. 做展示墙之类的,用WebP真的省很多流量。。。

      1. @Gazzz

        可以考虑用下后台guetzli啊~
        不过内存消耗挺大,小VPS应该吃不消

        1. @Gazzz

          个人网站也用不着吧

      2. @Gazzz

        特别适合移动端...不然微信公众号也不会用它

    3. 是个好的备选方案,我的方法是把webp转码成jpg,会少一些麻烦咯

      1. @小彦

        嗯,数据量大的话还是转码更好一些