标签:
这将造成两个问题:
1)浏览器进行前端渲染时会压缩图片尺寸,消耗性能。
2)图片尺寸过大造成流量浪费,增加了资源下载时间。
该问题可通过pageSpeed插件能检测到:
目前会场页面顶部一般由一张前景图片和一张背景图片组成,背景图片比前景图片更宽,但高度相同,背景图片比前景图片宽的部分的图案正好与前景图片契合。可以理解为前景图片就是将背景图片裁剪掉两边一定的宽度。(一般优化前的背景图片200KB以上,前景图片100KB以内。)
这里的背景图片很明显有优化空间,它不需要显示中间前景图片部分,可以把中间部分改为纯色以压缩图片体积。如下图,如下修改后因为前景图片覆盖了背景图片,所有背景图片的中间去掉的部分不受影响,并且背景图片可以压缩到50KB以内。
为了提高页面性能,一般会对非首屏的图片做懒加载(可能会对第二屏做延迟加载),如果非首屏图片未实现懒加载,将会响应页面首屏的打开速度。
这个问题用chrome或者firefox的F12就能观察到。
标签:
原文地址:http://www.cnblogs.com/xiaogangfan/p/5613129.html