如何使用图片精灵优化你的网站
作者:opipa 来源:译言 发布时间:2009-07-21 11:35:00
在我之前写的几篇网站优化的文章中,着墨最多的是减少HTTP请求。通过减少请求数目,你的浏览器必须能对你的网站所有内容成功检索,总的HTTP请求延迟减少,从而加速了网站的加载时间。如果你要对这种优化方法做个类比,那莫过于硬盘文件传送。复制1000份kB级的文件比复制单个G级文件用时更少。这是由于启动和暂停1000次小的传送工作量比只对一些大文件来得多。
使用图片精灵是在你尽可能地使用其他的优化策略后最后的一招。它将你的所有图片放在一张图中,即你的一张图片精灵由10张图片组成,那将避免9次HTTP请求,这减少的9次请求时延,正是加速的加载时间。这也有问题,跟每个HTTP请求的服务器开销一样,需由Apache的子进程管理,占用20MB的内存。你最好帮你的服务器进程减少HTTP请求:卸载媒体到Web前端Amazon S3,诸如此类。
图片精灵和CSS联袂才能让你的图片精灵得以显示。下面是两个图片精灵,一个是Google的,一个是我的。
创建图片精灵
照猫画虎,把你网站上经常使用的web图片元素打包——比如你的logo,RSS图标,还有其他不会经常变更的东西。用Photoshop或者你的图片编辑工具,把它们放在单个的图片里。你可以尽贴着放置图片,但要是你稍微留点白再下一步选中会更简单些,然后保存图片。
编写CSS代码
有了图片精灵,你将要用CSS选择器对每个只显示精灵中部分图片的链接进行处理:只要你需要的那部分。你需要知道待显示图片的精确大小以及位置。这步用到Photoshop中的切片工具并选出你要用的那部分的图。对新切片右键单击,选择编辑切片。在弹出的窗口会有图片的分辨率和位置。
在这个示例中,我选用精灵中大小为42×42px的图,它有336px的偏移(译注:是指左偏移)并紧贴着顶部。这样便形成了相应的CSS:
a.stammy, a.stammy:hover{
background:#fff url(path/to/sprites.png) -336px 0 no-repeat;
display:block;
height:42px;
width:42px;
text-indent:-9999px;
overflow:hidden;
}
CSS选择器对所有含 class="stammy" 属性的链接都有效。背景属性载入精灵图片,然后设置背景图位置为负值(其必为负)。如果图片离顶部有10个像素,那背景位置应该是“-336px -10px”。之后在CSS中设置了宽和高。我对悬停伪类(hover pseudoclass)也进行了设置,因为有一次当我悬停在该类的链接上时,会改变链接的悬停状态的颜色,从而背景图会消失。
设置溢出隐藏“解决当你选择要替换的文本的时候,那高亮部分会一直延伸到屏幕左侧的烦人问题”,正如Rob所说。
对其他所有精灵中的图片如法炮制,并对每个选择器命名。
编写XHTML代码
目今你已经对每个精灵中的图片有一些CSS选择器。至此你已经搞定了大问题,还差最后一步(译注:原文是“home stretch”)。现在只需对每个选择器创建链接。下面是“stammy”选择器(图是我的证件照)的链接的样子:
<a class="stammy" href="http://link/to/whatever.com" title="Paul Stamatiou">Paul Stamatiou</a>
相当简单吧?用CSS和链接设置类,将精灵的信息组合起来,只显示精灵的一部分。虽此,因为我们甚至没使用一个img标签,我们不能设置alt属性,而这对移动用户、搜索引擎、屏幕阅读器之类的来说至关重要。将文字写在链接中,再用CSS文本缩进将其移出屏幕范围,这样你就无需吧文字叠在图片上而同样具有可用性。
简言之
过多HTTP请求不好。
使用多张图片造成上述问题。
精灵管用。
精灵很易实现,像Google一样的大块头多年来都用它节省带宽。
猜你喜欢
- 一.概念简介 脚本:script是使用一种特定的描述性语言,依据一定的格式编写的可执行文件,又称作宏或批处理文件。 二.背景 近来在Wind
- 现在大部分网站都使用asp+access构建,这样的话通过下载access数据库简单就可以对网站进行破坏! 而很多的网站都不太重
- 在创建SQL Server 2000 故障转移群集之前,必须配置 Microsoft 群集服务 (MSCS) 并使用 Microsoft W
- oracle命令行删除用户: connect / as sysdba; shutdown abort; startup; drop user
- 1. 排序有什么用“排序”这个专业名词原本是来源于计算机程序操作中的,是一种很常见的算法设计,当然,对交互设计来说,探讨冒泡排序和堆排序之间
- 听说最近流行JQ风格的语法,不流行EXT风格了一.//ajax类fw=window.fw||{};fw.ajax = { &nbs
- 在给客户做个程序时,突然遇到个问题,就是产品页用户提交视频播放文件时,如何根据提交的网址内的视频格式进行正确的播放呢....郁闷了一会,想好
- 互联网充斥着枯燥的设计,惠普、IBM、戴尔、微软,以及其他数不尽的网站(相似的布局,相似的配色)。可能有人会说通过这样一种标准化的界面可以使
- 在IE进行文档链接时,如果遇到OLE支持的文档,IE会自动调用相应程序打开它,有时候这种功能并不是我们所需的,虽然我们可以提醒用户用鼠标右键
- 首先我们知道这个效果应该是一个老话题了。今天整理文件的时候,发现自己以前的一些布局的解决方法躺在文件夹里很长时间了,翻翻老底吧。需要说明的是
- 挖坟 交互设计(Interaction Design)产生于二十世纪八十年代,在1984年一次设计会议上,大名鼎鼎的英国交互设计师比尔·莫格
- 一、软件准备:以下均为截止2005-4-20的最新正式版本PHP(5.1.2):http://www.php.netMySQL(5.0.19
- 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则,除此之外,JavaScript和CSS也是我们页
- 功能是:以一个关键字为索引,搜索整个数据库,然后返回那个关键字所在的表名和列名。(很赞...特别是入侵的时候找不到用户名与密码所在的表的时候
- 如何使用MsChart?MsChart是微软出品的一款功能强大的制作图表工具,用它可以很方便的建立各种图表。下面我们举例来说明:submit
- 水平线对于制作网页的朋友来说一定不会陌生,它在网页的版式设计中是非常有作用的,可以用来分隔文本和对象。
- 在mysql安装目录的bin下, 运行mysql --install MYSQL5查看服务中, 会多一个MYSQL5的服务XAMPP的控制面
- 因为即将开始淘宝的项目,在前端方面必然要深入了解taobao ued规范,规范还是比较全的,只是对taobao.com的编码和字符集的选择有
- 在我们开始一个项目的设计的时候,脑子里肯定有无数的构想。是做视觉冲击强烈、夺人眼球的绚丽风格?还是复古的拼贴风?又或者目前最in的极简主义设
- 我想把存在数据库里的每天24小时来访者数另放到一个Excel文件中去,可以吗?可以,其实就是将数据库里面的内容生成一个Excel文件:toe