什么是雪碧图？它的优缺点是什么？

Posted 2021-03-21 lotus3904

1. 雪碧图（Sprites）

   • 雪碧图也叫CSS精灵， 是一种CSS图像合成技术，就是将许多小图标合并在一张背景透明的图片上，使用background-position和background-size来控制图片显示的区域。

2. 为什么要使用雪碧图

   • 网站开发90%会用到小图标， 多小图标调用显示是前端开发常见的问题，如果每个小图标都单独调用一张图片， 即意味着每个小图标的显示都产生一个HTTP请求；每个请求都需要一定的性能开销，主要在请求、以及响应阶段。为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。

3. 雪碧图的优缺点
   • 优点
     • 通过将多张图片合并成一张，可以有效减少 HTTP 请求，提高页面加载的性能
     • 将多张图片合并到一张图片中，可以减小图片的总大小
     • 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
     • 只需要修改一张或少张图片的颜色或样式来改变整个网页的风格
     • 只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率
      
   • 缺点
     • 合成起来麻烦
     • 适应性差
     • 可维护性差
     • 小图标在高清屏幕上可能会失真，另外频繁使用定位会占用比较多的CPU