WEB前端程序开发

WebP图片的优势

2018-09-13  本文已影响0人  捷搜索

文章摘自本家网站 捷搜索什么是WebP图片?
什么是 WebP 格式图片?WebP 是由谷歌(google)开发的一种旨在加快图片加载速度的图片格式,并能节省大量的服务器宽带资源和数据空间,在压缩率上比 JPEG 格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。WebP 在各大互联网公司已经使用得很多了,国外的有 Google(自家的东西肯定要用啦,Chrome Store 甚至已全站使用 WebP)、Facebook 和 ebay,国内的有淘宝、腾讯和美团等。

前言

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

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

WebP 的优势

WebP 和PNG、JPG图片在同等质量下压缩到体积最小后,WebP压缩比最大,这样我们来随便来一张网上的实测报告

PNG VS WEBP

我们自己也可以测试一下:

  1. 准备一张体积相对比较大的图片,JPG或PNG格式的都行。

  2. 把原图在压缩网站上压缩一下,个人推荐PNG或JPG图片压缩网站 tinypng ,这个压缩网站一般都是保证质量的同时,把体积压缩到最小。

  3. 把原图通过 又拍云 网站转化成WebP格式图片。

  4. 最后你可以进行原图、压缩图、WebP图的体积和质量的对比了。

在这里给大家介绍几个转成WebP图的网站:又拍云 (推荐) 智图 isparta

需要注意的是,在我测试一些图片的时候,发现个别原图体积比较小的图片(低于10K、或者20K一下,具体什么为界限并不固定)转化成WebP图反而比压缩图体积大,这时我们就没必要使用WebP图了,当然选择质量保证的情况,选择体积相对较小的了。所以说在质量保证的情况下,WebP图也不是绝对比压缩图体积小。

WebP 的兼容性与缺点

既然是一个相对较新的技术,所以对于目前市面上能否完美的兼容,其可用和实用性就变得很现实了,再好的东西如果没有好的兼容性,也是非常难以普及和被广泛使用的,同时也可能会增加使用和操作的难度。根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。PC 端 chorme 10+(14 ~ 16 有渲染 bug)、opera 11+ 、safri 均支持 webp 格式图片,Firefox 也曾拒绝支持 WebP,如果你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库。

总结

WebP是一款比JPG、PNG等在压缩方面更加优越的图片格式,同时也不会影响其图片质量,在未来绝对是值得普及的一款图片格式。当然现在各大浏览器对WebP的兼容性还是有局限的,但是这也不耽误我们使用WebP图片。理论上,我们可以通过判断浏览器支不支持WebP格式的图片来决定我们的平台是放WebP图片还是其它图片。关于这个理论的实现方法日后会更新,敬请关注,谢谢!

上一篇下一篇

猜你喜欢

热点阅读