什么是 WebP 图片 · 语雀

什么是 WebP 格式图片?与 JPEG、PNG、GIF 的优势有哪些?WebP 是由谷歌推出的新一代图片格式,在压缩率上比 JPEG 格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。

其实在网络传播中图片已经必不可少,现在的各个网站也都是图文并茂,图片也就成了流量的大头,不论是 PC 端还是移动端。虽然国民的带宽都在提升,但是与此同时各个网站以及对图片质量更高的追求,同样也使得体验没有较大的提升,这也是很多网站使用懒加载的方式载入图片,间接的可以提升网站的打开速度和用户体验。

但是这一切都还不够,如何保证在图片的高质量不降低的前提下缩小图片体积,成为了一个有价值和值得探索的并改变事情。如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致,而 Google 就给了我们一个新选择:WebP,开辟了一个图片格式的新局面。

WebP,一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用。同时也有一些针对 WebP 的图片格式转换工具,如 智图,iSparta 等。

WebP 格式主要也是针对于网站前端和客户端应用开发等,并不利于正常使用和传播环境。

WebP 除了压缩效果极好,图片质量能否得到保障?对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果。

更多测试及效果可以通过 Chrome 浏览器打开: 查看

总结 WebP 的优势可以有以下三点:

PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

既然是一个相对较新的技术,所以对于目前市面上能否完美的兼容,其可用和实用性就变得很现实了,再好的东西如果没有好的兼容性,也是非常难以普及和被广泛使用的,同时也可能会增加使用和操作的难度。例如前不久子凡在泪雪网科普过的APNG 格式图片一样,没有被广泛使用起来。

根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。PC 端 chorme 10+(14 ~ 16 有渲染 bug)、opera 11+ 、safri 均支持 webp 格式图片,Firefox 也曾拒绝支持 WebP,如果你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库。

目前 WEBP 与 JPG 相比较,编码速度慢 10 倍,解码速度慢 1.5 倍,实际上对于绝大部分的网络应用而言,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。

总结 WebP 大概有以下两个缺点:

编解码速度偏慢兼容性差,浏览器支持不全

至于 WebP 的实际兼容性以及可用性大家还可以深度的去探索,相信很多的前端或者 APP 开发者可能早就已经研究甚至开始使用上 WebP 了,而泪雪网在这里也就只是给普通用户做一个科普,也就不做具体的分析和瞎捣乱了,子凡就装 X 到这里了吧!下次再见。。。

(0)

相关推荐

  • 9.27【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?

    9.27【前端开发】图片文件格式:常见的图片格式对比有何优劣以及如何使用Google的webp格式?

  • 如何让新手10步以内完成Windows部署Swarm!!! · 语雀

    如何让新手10步以内完成Windows部署Swarm!!! · 语雀

  • 丁磊网易未来大会讲话 · 语雀

    尊敬的各位领导.各位来宾: 大家早上好,欢迎大家来到杭州,参加2020网易未来大会. 今年我演讲的主题是"突破数字化的未来",今年发生了很多事情.<柯林斯词典>总结的年 ...

  • YFI和YFII发起的IYO革命 · 语雀

    作者介绍:Alan Tarjan 太长不看 这篇文章会很长,如果你不想读完,这里直接留给你结论. 1.     未经审视的人生是不值得过的,未经审计的合约是不值得薅的.--苏格拉底·鲁迅 目前 YFI ...

  • 3D打印的工作原理 · 语雀

    你有没有想过 3D 打印是如何工作的,3D 打印的类型是什么,或者现在使用什么 3D 打印?您来对地方了:我们将介绍 3D 打印的基本定义,如何使用不同的版本以及增材制造技术所能实现的一些令人难以置信 ...

  • 耳放有什么用 · 语雀

    耳放(Headphone Amplifier) 即耳机功率放大器,是为耳机专门设计的功率放大器,主要用于推动中高端的高阻抗耳机.那么耳放能提高音质吗?有多重要呢?是否需要耳放呢? 耳放这个词也是很多烧 ...

  • 隔离见证是什么 · 语雀

    SegWit(隔离见证)是一种协议升级,它改变了存储数据的方式.它于 2017 年 5 月 10 日在 litecoin 上被激活,在 2017 年 8 月 23 日被激活.开发商 Pieter Wi ...

  • 黑苹果是什么意思 · 语雀

    你可能听过苹果或者红苹果,但是黑苹果和白苹果呢?当然子凡今天在泪雪网所指的苹果是苹果公司的 MAC 操作系统. 自从苹果公司采用 Intel 处理器后,OS X 被黑客破解后就可以安装在 Intel ...

  • 什么是 Alexa · 语雀

    Amazon Alexa,简称 Alexa 是亚马逊公司推出的一款智能助理,最初用于 Amazon Echo 智能音箱.Alexa 是亚马逊语音助理的正式名称,它能够进行语音交互,音乐播放,制作待办事 ...

  • 什么是APNG · 语雀

    APNG 是什么?相对于 GIF 有哪些优势?APNG 是一个基于 PNG 格式的位图动画格式图片,因为对于一直以来的特点就是以动态显示为主的 GIF,为了更好地在网络上传播,它需要牺牲质量来降低体积 ...