在网站性能优化中使用 Webp

Google开发的一种旨在加快图片加载速度的图片格式,在质量相同的情况下,WebP格式图像的体积要比其他格式的图片小得多。在网站性能优化中,往往需要设置图片的大小,减少HTTP传输体积。Webp是其他图片格式最佳替代者

目前在我实习的公司美团,已经大范围使用Webp图片格式。国外的谷歌、Facebook、ebay,还是国内的淘宝,腾讯都已经在使用这个图片格式。

与其他图片格式的比较

Webp的优势主要在比其他格式拥有更优秀的图片压缩算法,当然这里我们不说明这个算法,这是图像算法工程师的任务。这里只比较在有损和无损压缩下,Webp与其他图片格式的体积减少比例

浏览器兼容问题

并不是所有的浏览器和移动设备就兼容Webp

前端如何处理浏览器不兼容webp的问题

前端页面JavaScript利用userAgent判断用户浏览器类型.
如果浏览器支持Webp,则在请求的图片(.jpg或.png)URl上添加后缀!/format/webp.
如果浏览器不支持,则不加后缀。
图片服务端判定是否有相关的后缀,如果有,则将Webp格式的图片返回.