WEB学习进阶之路-之性能优化五
本章学习图片优化
在httparchive中,他会统计网络上资源信息的使用量和请求量,截图时间2020-7-5 10:19
先看总请求量截图,
可以看到,桌面数据请求量是2007.7KB,移动端是1851.9KB。
再看图片请求量截图
前一张是图片请求大小,桌面端是949.6KB,移动端是886.8KB
后一张是图片请求数量,桌面端是29,移动端是27
另外一个很有意思的就是请求量下面的增长率,大家发现没有,页面的请求总量和图片请求大小总理都是正增长,而请求数量却是负增长,说明什么呢?
说明的是我们这一张的内容的必要性,哈哈
为什么要讲图片优化:
1. 图片请求总量在整个网站的请求总量的占比相当恐怖,已经有40%以上的占比。
2. 图片请求次数的下降说明整个行业都在做咋们这章要说的
3. 优化图片,可以提高用户的体验,对于手机端,可以节省用户流量
4. 提高网站的性能,节省宝贵的资源,给公司节省经费。
网页上通常用的图片格式有:
JPEG/JPG,PNG,Webp,SVG,Base64
图片优化的技术有:
CSS Sprites,合理使用相关格式的图片,下面我们就优先学习下几种常用格式的图片的优势和缺点,并且说明比较适合的使用场景
JPEG/JPG
优点:高质量的有损压缩;单个图以24存储,可以表示1600多万中颜色;将压缩比率设置到50%时,原图的质量可以保持60%以上。
缺点:不支持透明图层;处理矢量图,logo等这些线条感强,颜色对比强烈的图片时,由于太模糊无法胜任这种场景。
应用场景:网站的大图展示区,比如向广告,公司介绍等等。
PNG
png可以分为png-8和png-24,png-8顾名思义,最多支持256种颜色,而png-24可以支持1600万种颜色。
优点:无损压缩高保真;支持透明图层;比jpg有更好处理色彩的能力,对线条处理的更加细腻。
缺点:质量太大
应用场景:logo
SVG
优点:质量小,可压缩性强;放大不失真;可以直接写入html网页,减少http请求量;可编程性。
缺点:浏览器渲染性能损害高,可编程性。
可编程性既是优点也是缺点是不是很有趣,对于会的人它是把利器,对于不会的人又要花时间和精力去学习一门新技术,所谓成也萧何败也萧何。
应用场景:适配各种屏幕,从手机到PC,到桌面端一图解决。
Base64
优点:可编码性;可以直接写入html网页,减少http请求。
缺点:编码之后图片质量变大
应用场景:小图标使用场景;图片可直接入库场景(例如通讯录头像);
WebP
优点:支持透明图层;支持动态图;体积小;
看看官网的介绍:
与 PNG 相比,WebP 无损图像的尺寸缩小了 26%。在等效的 SSIM 质量指数下,WebP 有损图像比同类 JPEG 图像小 25-34%。 无损 WebP 支持透明度(也称为 alpha 通道),仅需 22% 的额外字节。对于有损 RGB 压缩可接受的情况,有损 WebP 也支持透明度,与 PNG 相比,通常提供 3 倍的文件大小。
缺点:支持的浏览器太少,需要过多的兼容。
应用场景:支持大多数场景,在未来浏览器中,可以尝试多个场景。
Webp的兼容方式
一种是在前端判断是否支持Webp,图片生产时,直接生成多种格式,前端根据情况选择使用图片,比如图片 1.jpg.webp;后台存储两张,一张是1.jpg,一张是1.jpg.webp,前端可以根据支持情况截取字符串,显示图片
另外一种方式就是读取请求头,比如accept-type或者content-type判断是否又image/webp的mime,根据情况返回相关格式的图片。
CSS Sprites
优点:减少http请求;减少图片大小
缺点:使用过程稍微麻烦点,不像其他类型的图片“即插即用”。
应用场景:网站或者管理端页面的按钮等。
- 点赞
- 收藏
- 关注作者
评论(0)