前端图片优化的方案
1:将图片转换为base64编码字符串inline到页面或css中,适用于图片大小小于2KB,页面上引用图片总数不多的情况。
2:将多个页面上用到的背景图片合并成一个大的图片在页面中引用 ,可以有效的较少请求个数。但是合并的大图也不要太大。
3:对应图片比较多的页面,可以考虑通过js来实现图片的延迟加载,先让一部分图片优先请求下来,当用户滚动页面的时候进一步加载图片。
4:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。使用css,svg,iconfont减少图片尺寸,请求数据少。
5:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量 。
6:默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签。
7:使用webp、bpg、sharpP等新图片格式来替代原始格式,这些具有更好的压缩比。
请爱好前端技术的朋友,联系我,有问题大家一起讨论