加速的关键,不是降低重量,而是减少个数。如果重量在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/
蓝色经典 http://www.blueidea.com/tech/site/2007/4750.asp
分享到:
相关推荐
在google中搜索一下css sprites这个名称,会查出很多信息,并且随着SEO越来越被人们重视,采用这种技术来进行图片优化的网站越来越多,国内几家大型门户网站无不仿效。如新浪,网易,搜狐。... 加速图片显示
CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. CSS Sprites最适合用来做的, 恩, 比如: 清单导航的CSS鼠标翻转效果 大量小图标集中的...
1.css的概述 1.问题 HTML属性修饰有一定局限,是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点:将css样式定义在HTML标记中 语法: 样式声明:用样式属性和值组成(属性:值;) ...
由于客户端每显示一张图片都会向服务器发送请求,所以在使用图片时能少则少,能合则合,譬如文本编辑器中的小图标或鼠标事件出发的切换图片都可以用一张图解决,不过你可能会有这样的疑问:图片的合并不是又
它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入...
自定义CSS样式:添加自己的css样式 自定义头部和底部代码:添加自己的头尾代码,如广告联盟等 网站统计代码:说多了等于扯淡 WordPress主题:XIU主题 v5.6 更新日志 新增文章打赏功能,支持支付宝和微信二维码,...
把背景图片都整合到一张图片中,然后用CSS的background-image和background-position属性来定位要显示的部分。 图像映射:可以把多张图片合并成单张图片,总大小是一样的,但减少了请求数并加速了页面加载。图片...
图片按固定的宽高显示。宽高的值可设置,宽度不能大于略缩图的宽度。如果略缩图的高度大于设置的高度, 大于的部分将被隐藏,图片不会拉伸变形。小于的话就按略缩图的高度显示。 分页模式适合大部分的图片高度...
图片按固定的宽高显示。宽高的值可设置,宽度不能大于略缩图的宽度。如果略缩图的高度大于设置的高度, 大于的部分将被隐藏,图片不会拉伸变形。小于的话就按略缩图的高度显示。 分页模式适合大部分的图片高度...
支持CSS文件、文章附件自定义链接,实现CDN加速 全站Pjax、Ajax评论、Ajax翻页、HTML压缩、CSS文件压缩 支持自定义Favicon图标,自定义头部跟随或固定,自定义标题或LOGO,自定义导航栏显示内容 支持自定义文章缩略...
图片、CSS、JS文件使用作CDN加速。 主页封面图片使用bing每日壁纸,调取API为:https://api.isoyu.com/bing_images.php,基于 聊天窗口集成 演示视频托管于 API文档使用生成。 复用 如果你对这个项目中的文档和模板...
横向循环(加速代码)记录,数字分页; jQuery Html5 CSS3元素打造(全程浮动ajax无刷新体验); 数据库调用管理全程物理关联: 支持联动删除(服务器零资源储存,如果你删除了数据库记录,物理图片也会删除); ...
目标站主要CSS和图片本地化,减少目标站读取次数,加快载入速度。 增加伪静态功能,对搜索引擎更加友好,增加收录速度,防止动态采集时网址出现的“/?/”标识符。 ----------------------------------------------...
特点:横向循环(加速代码)记录,数字分页;jQuery Html5 CSS3元素打造(全程浮动ajax无刷新体验);数据库调用管理全程物理关联: 支持联动删除(服务器零资源储存,如果你删除了数据库记录,物理图片也会删除);...
-Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
每个目录支持不同比例缩略图效果,用户可以随意选择设计标题列表,标题描述列表,图文列表,二列橱窗列表,三列橱窗列表,多列橱窗列表等显示效果。操作简单、灵活、实用。企业网站管理系统还内置强大的Web编辑器...
Feature 显示页面图片链接自动启用CDN加速 Bugfix 预览页面目录样式一处显示问题 Feature 安装Exif扩展判断 Feature 引导安装提示用语不当 Feature 引导安装程序添加PHP7支持 Feature 头像PNG支持 ...
每个目录支持不同比例缩略图效果,用户可以随意选择设计标题列表,标题描述列表,图文列表,二列橱窗列表,三列橱窗列表,多列橱窗列表等显示效果。操作简单、灵活、实用。企业网站管理系统还内置强大的Web编辑器...
每个目录支持不同比例缩略图效果,用户可以随意选择设计标题列表,标题描述列表,图文列表,二列橱窗列表,三列橱窗列表,多列橱窗列表等显示效果。操作简单、灵活、实用。企业网站管理系统还内置强大的Web编辑器...