对于网站来说,图片始终扮演着重要角色。图片大小直接影响网站速度、流量、运营成本以及用户体验。因此,减少图片大小成为网站优化最重要的一个环节。
如果你对优化还不甚了解,推荐阅读如下文章:
1.网站优化实战
2.网站优化工具
3.CSS 渲染原理以及优化策略
4.网站性能指标 - FMP
5.聚焦 Web 性能指标 TTI
6.Web「性能测试」知多少?
一、背景
当我们在做网站性能优化的时候,减少图片大小,意味着减少了网络传输,提升了网站加载速度,而这部分也是性价比最高的。
我们可以通过压缩图片来减少体积,但压缩比例一直是前端开发和设计师争执的焦点。压缩比例大的话,可以有效减少图片体积,对页面加载有利,但是却损失了像素,是设计师无法容忍的。
在这种矛盾的场景下,我们既要最大程度的压缩图片又要保持足够的清晰,WebP
便应运而生。
值得注意的是:WebP 并不是新技术,而是受限于兼容性而未全面普及。
二、目标与意义
1.时间成本
我们先来看一组数据对比图,如果你做过 Gif
动图,你肯定知道下面这样的处理意义有多大:
在肉眼无法识别差异的前提下,图片大小减少了 88%。
2.带宽成本
YouTube
的视频略缩图采用WebP
格式后,网页加载速度提升了10%
;- 谷歌的
Chrome
网上应用商店采用WebP
格式图片后,每天可以节省几TB
的带宽,页面平均加载时间大约减少1/3
; Google+
移动应用采用WebP
图片格式后,每天节省了50TB
数据存储空间。
目前 Google
、Facebook
、阿里、京东的等国内外互联网公司广泛应用了 WebP
,超过 70%
的浏览器已经支持 WebP
。
三、什么是 WebP ?
WebP 格式,谷歌开发的一种旨在加快图片加载速度的图片格式。
优势在于它具有更优的图像数据压缩算法,在拥有肉眼无法识别差异的图像质量前提下,带来更小的图片体积,同时具备了无损和有损的压缩模式、Alpha
透明以及动画的特性,在 JPEG
和 PNG
上的转化效果都非常优秀、稳定和统一。
在尝试一些技术前,我们必须要充分了解他的兼容性,如下图:
可以看出来,绝大多数浏览器已经有了较好的支持。当然,除了 Safari
和 IE
!我们来看看浏览器市场占有率吧:
Safari 和 Foxmail 也在进行支持 WebP 的测试。
四、应用场景
WebP
看起来不错,那么它究竟适合什么样的场景呢?不着急,我们先来看下面的图例:
从上面我们可以看出,适合 WebP
场景的站点不外乎如下几种场景:
1.网站图片比重大
如果你的网站 80%
甚至更多依赖图片资源,那么请使用 WebP
,资源成本可以较少 50%
以上。
2.细节要求不高
图片起到占位目的,不需要毛孔级别,那么请大胆使用!
3.流量运营推广
运营推广都是抢占先机,我们不但要和竞品比拼用户,更要快速响应,提高转化率。
4.视频首图
视频内容形式的网站,资源存储必是一大难题。如何做到稳准狠,速度必不可少,大量的视频占位图也便成为了重中之重。
五、实践方案
相信到这里,你已经对 WebP
有了足够的了解,快来看看实际项目中我们是如何使用的吧~
方式一:HTML5 Picture
Picture
元素允许我们在不同的设备上显示不同的图片,一般用于响应式。
1 |
<picture> |
Picture
算是最简单易行的方案了,但是需要注意以下两点:
1.兼容性,IE
不支持,可以查看