合并图片,用CSS切割以减少图片请求次数

原创 2007年09月29日 09:44:00

      为了加快页面访问速度,我们可能会想到多种可行的办法:如提升硬性条件方面的性能、减少HTTP请求次数,使用Cache,合并文件(aoao总结的把js和css合并成一个文件非常好玩)等等。

      这里主要讲一下如何节省图片的请求次数,至于如何能减少图片请求,不外乎就是减少实际图片的数量和代码的编写质量。

      我们可以把一些不经常变动的框架图片由原来分割成的多张小图合并成一张,然后通过CSS背景切割来加快完成渲染,这样就减少了实际图片的数量,也就减少了部分图片请求。

      如下面这个圆角框架的处理:

    [效果演示:http://www.doyoe.com/model/xhtmlcss/style/cssimg/1.htm

CSS部分:

html,body,h3 {
 font-family:Verdana,Arial;
 font-size:12px;
}
div {
 overflow:hidden;
}
#list {
 width:198px;
}
.top {
 background:url(skin/bg_01.gif) left top no-repeat;
}
.top h3 {
 margin:0;
 height:30px;
 line-height:30px;
 text-indent:5px;
}
.mid {
 border-left:1px solid #aaa;
 border-right:1px solid #aaa;
 padding:5px;
}
.bot {
 height:6px;
 background-position:left bottom;
}

XHTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="飘零雾雨|edzmaster@gmail.com" />
<title>DY Css图片切割</title>
</head>
<body>
<div id="list">
 <div class="top"><h3>顶部边框(标题)</h3></div>
 <div class="mid">正文<br />大段正文内容</div>
 <div class="bot top"><!--底部边框--></div>
</div>
</body>
</html>

     以往做圆角的东东,一般可能会做成2,3张图片。而可以看到,这个例子仅用了一张图片,所以也会减少不少图片请求。

      先看一下CSS是如何写的:首先在.top中定义了背景图片,这是自然的,要用背景肯定得定义背景图片,这是天经地义的,这里肯定没有什么出采的地方。主要看底部的边框是如何定义的:可以看到,我为底部边框单独定义了一个.bot样式,但可以发现,里面只一个控制背景图的position样式和高度的东东,甚至连背景图也没定义,此疑问一?

      暂且放下css不看,先看xhtml部分的底部是如果写的,可以看到,我为底部赋了两个样式class="bot top"。这也就解了疑问一的惑,为什么.bot里面连背景图也不定义,只定义一个位置和高。这是因为.top里面已经定义了背景图,所以只需要在底补同时引用.top和.bot两个样式就行了,它会同时被这两个样式渲染。

      这样写就省下了在.bot里再定义一次背景,减少了一次图片请求,也减少了不少字节哦:)

      再一个疑问就是中间部分是如何解决边框问题的。可以看到,只需要定义左右两边的border就可以搞定。

      至此,关于合并图片,并利用CSS进行背景切割以减少请求的简单例子就搞定了。

 

css sprite技术 – 减少网站图片请求次数

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢...
  • u011144211
  • u011144211
  • 2015年07月07日 11:15
  • 842

CSS Sprites---减少HTTP请求次数 构建高性能网站

CSS Sprites---减少HTTP请求次数 构建高性能网站
  • u014593098
  • u014593098
  • 2014年09月11日 15:09
  • 816

图片合并 减少 http 请求

代码如下:  复制代码 代码如下:                 注意:这五个按钮分别使用了五张图片  那么,五张图片就意味着你的该页面又多了五...
  • JackieLiuLixi
  • JackieLiuLixi
  • 2014年08月14日 11:20
  • 895

Web项目性能优化之减少HTTP请求次数优化

本文适合的读者为刚刚毕业,技术实力不是很好,没有考虑过自己编写程序的系统性能的读者。本文简单的介绍了,Web项目中常见的性能问题:请求HTTP次数过多,以及优化的思路。...
  • yangkang029
  • yangkang029
  • 2015年12月05日 15:20
  • 2092

尽量减少HTTP请求次数

尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少 HTTP请求的次数。这是提高网页速...
  • zhaifengmin
  • zhaifengmin
  • 2013年08月30日 17:30
  • 1143

前端性能优化的方法和工具,减少http请求的次数和速度

一、前端性能优化的方法和工具 cdn:Content Delivery Network内容分发网络 二、代码优化 cookie:减少cookie大小 css:将样式置顶,避免样式表达式...
  • u012841667
  • u012841667
  • 2016年10月22日 20:44
  • 2837

两种方法实现用CSS切割图片只取图片中一部分

http://www.jb51.net/css/150036.html 切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是...
  • zunguitiancheng
  • zunguitiancheng
  • 2016年07月14日 21:35
  • 7724

实践项目十一:Python批量图片切割(PIL)

将一张图片均匀向右移动,向下移动,每移动一次,切割出一个固定面积的图片。 思路: 我们知道图片实际上是有一个二维数组组成的,所以先控制横坐标不变,纵坐标截取,一直到纵坐标的边界,然后向下移动横坐标...
  • xunalove
  • xunalove
  • 2017年08月17日 18:34
  • 1986

CSS分割图片

一张图片,用CSS分割成多个小图标。 css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; li...
  • adsdassadfasdfasdf
  • adsdassadfasdfasdf
  • 2012年04月20日 15:38
  • 4833

CSS切割图片只取图片中一部分

转载自 脚本之家 http://www.jb51.net/css/150036.html 方法一:(已验证) background: url(123.jpg) no-repeat  -140p...
  • u010174173
  • u010174173
  • 2016年09月23日 19:04
  • 1380
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:合并图片,用CSS切割以减少图片请求次数
举报原因:
原因补充:

(最多只允许输入30个字)