css sprites 和 base64
一、css sprites(雪碧图或精灵图)
网页图片处理的一种方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中,当访问页面时,载入的图片就不会像以前那样一副一副的慢慢的显示出来了。
原理:使用background-image属性,background-position属性定位某个图片位置,来达到在大图中引用某个部位小图片的效果。
优点:减少网页的http请求,提升网页的加载速度;合成多张小图为大图,能减少字节总数(大图大小<=多张小图大小)
缺点:前期需要处理图片将小图合并多工作量;对于需要经常改变的图片维护起来麻烦
使用场景:一些不需要多变动的小图、表情、标志等;应用于小图片,太大的图片不利于合并,且定位麻烦,一次加载时间过长,导致全部推片出现延迟。
二、base64
是网络上最常见的用于传输8Bit字节代码的编码方式之一,要求把每3个8Bit的字节转换为4个6Bit的字节。就是:将资源原本的二进制形式转成以64个字符基本单位,所组成的一串字符串。
比如图片转换之后,直接以base64形式嵌入文件中。
生成base64编码:webpack中的URL-loader可以转换,或者一些在线工具
优点:base64图片会随着HTML或者css一起下载到浏览器,减少了http请求。可以避免跨域问题
缺点:老版本的IE浏览器不兼容;体积会比原来的图片大一点;使用过多的base64图片会使得css过大,不利于加载
应用场景:用于小的图片几k的,用于处理雪碧图不利于处理的小图片。
相关推荐
pythonjw 2020-11-17
hedongli 2020-09-01
浪味仙 2020-08-17
IT兄弟团 2020-08-01
凉白开 2020-07-19
kjh00abc 2020-07-08
Skyline 2020-06-28
苦咖啡flask 2020-06-18
万物weiyi 2020-06-16
半纸药笺 2020-06-14
chenhaimeimeng 2020-06-13
JF0 2020-06-13
逍遥友 2020-06-02
kyelu 2020-06-02
northwindx 2020-05-31
tengyuan 2020-05-30
singer 2020-05-30
GreatZhou 2020-05-28
coolhty 2020-05-20