css sprites 详解

93 阅读2分钟

前言: 我们在打开一个网页的时候,你会感觉到右很多的图片闪过来。其实浏览器在家在一个网站的时候,首先会把个网站的主资源也就是Html文件拉取出来,然后解析网页中的标签,之后再去拉取图片和资源。
对于浏览器来说,这些方式都是发起http请求,经历三次握手,一般的浏览器内核网络请求并发数量只有4,5个。如果你的网页加载需要大量的小图片,就会很影响性能,影响网页加载速度。那么该怎么解决这个问题呢?答案就是雪碧图!

1.什么是雪碧图

** 雪碧图:实际是指CSS中的图片拼合技术,将多个背景图拼合在同一张图片上,在使用时按照需求对图片位置进行改动。**

其实就是通过ui技术(ps等),将一个网页需要加载到的图片,合理有序的整合成一张图片。我们在开发过程中,通过css的background属性,将图片做为背景图去处理。借此减少下载图片文件数量,提高网页性能。

2.雪碧图的优缺点

2.1 优点

  • 利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因
  • CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
  • 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

2.2 缺点

  • 在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂。
  • 至于可维护性,这是一般双刃剑。可能有人喜欢,有人不喜欢,因为每次的图片改动都得往这个图片删除或添加内容,显得稍微繁琐。而且算图片的位置(尤其是这种上千px的图)也是一件颇为不爽的事情。
  • 由于图片的位置需要固定为某个绝对数值,这就失去了诸如center之类的灵活性。

2.3 如何制作雪碧图

雪碧图制作一般是由ui去完成,通过photoshop去制作,也有专门的雪碧图制作软件或者网址去实现。