网页优化之加速图片显示(CSS Sprite)
作者：一叶千鸟 来源：蓝色理想 发布时间：2007-09-29 21:39:00
原文：http://blog.rexsong.com/?p=746#comments
加速的关键，不是降低重量，而是减少个数。如果重量在200K以内，只要网络不是特别慢，效率都差不多。但是，如果图片个数多一倍，效率将明显低一个档次。
传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按Byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可能性也就越大。因为一张图片的传输时间，通常远小于请求等待的时间。
减少图片的三个技巧(CSS Sprite)：
1. 图片限制(Image Slicing)
典型如文本编辑器，小图标特别多，打开时一张张跑出来，给用户的感觉很不好。如果能用一张图解决，则不会有这个问题，比如百度空间、163博客、Gmail都是这么做的。
Image Slicing’s Kiss of Death
http://www.alistapart.com/articles/sprites
2. 单图转滚(Single-image Rollovers)
触发切换图片的需求，传统方案得重新请求新图片，因为网络问题经常造成停留或等待。如果能把多种状态合并成一张图，就能完美解决，然后再使用背景图技术模拟动态效果。
ColorScheme Ratings
http://demo.rexsong.com/200608/colorscheme_ratings/
3. 延长背景(Extend Background Image)
如果图片的某边可以背景平铺无限延长，则不需要每个角、每条边单独搞出来，图片能少一个就少一个。其实，这个理论还可以扩展到四角容器里，好处是能大大简化HTML Structure。
Extend Background Image
http://demo.rexsong.com/200705/extend_background_image/
综合案例
Google Korea（1和2技巧）
http://demo.rexsong.com/200705/google_korea/
CSS Menus（2和3技巧）
http://demo.rexsong.com/200705/css_background_menus/
0
投稿猜你喜欢
- <％ Function XMLEncode(byVal sText) sText = Replace(sText, "&am
- 一、备份数据库1、打开SQL企业管理器，在控制台根目录中依次点开Microsoft SQL Server2、SQL Server组-->
- 先让我们看一个例子，了解什么是模式化窗口。以下是QQ秀商城在非登录时提示登录的一种状态。当我在非登录状态，通过保存形象的方式买一件衣服时，弹
- 使用 NetBox 可以方便的将 asp 应用编译成为独立运行的执行程序，完全摆脱 iis 的束缚，在几乎所有的 Windows
人们对于那些抄袭模仿的网站有诸多抱怨，但在这篇文章中，却没有冷嘲热讽的意思。但正如他们所说，“模仿是最为忠诚的奉承形式”。“如果你确实需要借- 需要写个js滑动展开折叠（收缩）的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： <
- Access数据库被损坏主要分为以下几种情况：1、严重损坏；2、轻度损坏；3、有些表被损坏或有些表的部分记录被损坏。下面就分情况介绍解决办法
- 今天小池提出一个问题讨论，如何使分页做的更友好。做了一些调研和思考，做了些总结。分页在电商网站3级页、搜索结果页面等信息量大的页面是很重要的
- ExpiresAbsolute 属性指定缓存于浏览器中的页的到期日期和时间语法Response.ExpiresAbsolute [
- 最近一直忙，我们的注册页面还是在持续优化。今天抽时间分析了下数据，依然以主注册表单为例，对表单里3个区块、9个字段做了个小小出错排行；看看哪
- Firefox 的 Jetpack 可以让我们很轻松地创建 Firefox 插件，仅通过已掌握的前端技能（HTML/CSS/JS），估计让人
- 最近正在做首页，处理很棘手的浏览器兼容的问题，主要调试的浏览器为 IE6 ,IE7 ,FF3 ,Opera9.5 ,Safari3.1.2兼
- SQL Server的以前版本在跟踪对象相关性方面做的并不好。原因是所有的对象相关性都是由对象ID来跟踪的，这意味着对象一开始就必须存在。但
- SQL Server 2005 和 2008 有几个关于高可用性的选项，如日志传输、副本和数据库镜像。所有这些技术都能够作为维护一个备用服务
- 1、页签的表达。页签表达很清晰，当前页签突出，且层级包涵关系明确；看下图，一目了然的感觉，不用疑惑我在那部分里。不信？拿当当的对比一下，你感
- HTML 5基本思维概念形成于2003年，之后W3C对页面超文本应用技术工作小组（WHATWG）开发的HTML草图颇感兴趣，这个小组的开发人
- 如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络信息的呈现
- 1. 鼠标的哪个按键被点击？<html><head><script type="text/javas
- 当数据库服务器变得十分繁忙导致性能下降时，你会怎么办?购买更多的硬件升级你的服务器，还是重新考虑数据库服务器设计使得数据库平台具备良好的可升
- javascript动画效果 打开层/关闭层：运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD
