WonderCSS

将网站的背景图片 Sprites 精灵化

对于网页设计或说网站建设,评价网页优化是否到位有一个硬性标准,那就是是否将网站所有的背景图片 Sprites 精灵化。那么什么是 Sprites 呢:一种网页图片应用处理方式,它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。换句话说就是在一个HTTP请求里加载一个大的图片,而不是若干个请求若干个图片。

background-image-sprites-icon

但有时会遇到这样的问题,并不是所有的图片都可以立即精灵化,可能某一个图标需要将它作为一个弹性宽度元素的背景图像,这种情况你显然不能将直接将其精灵化,因为 sprites 的做法对非固定尺寸元素不起作用。或许你可以在 sprite 中的图像周围放许多空白,但这样在 sprite 中及浪费像素资源又影响了自身性能。

为了解决这种特定元素的不可精灵化,我们需要设定一种称为“精灵元素”的东西。它基本是一个空元素,一般是一个<i>,它的核心工作就是保持空内容并且固定尺寸来加载一个背景图像。

基本的前提是,如果因为一个元素是流态的而不能精灵化,那么你在它里面放置一个空元素解决尺寸的问题,然后就可以精灵化了,例如:


<li>
    <a href="/profile/">
        <i></i>about me
    </a>
</li>

这里我们不能精灵化 <li> 或者 <a> ,所以我们在需要放置icon的地方放置一个空的<i>,用它来加载图标(背景图片)。这是关于性能我最喜欢的事情,你正将聪明的技术整合来改善页面速度,却仍然在使用传统的“坏or旧”标记。想想这是多么的有趣!

By 于湛 发布于 2013.04.21 5,448 次浏览

发表评论

电子邮件地址不会被公开。 必填项已用*标注