咨询QQ:865885740    邮箱:support@ccqyj.com咨询热线:158 2330 1928
信息中心 / news
当前位置: 首页 > 信息中心 > 网站设计 >

重庆网站设计中如何实现图片合并

日期: 2014-09-09来源: 重庆网站设计[www.ccqyj.com]关键字: 重庆网站设计 图片合并    阅读量:
许多网站的美化,都是靠绚丽的图片达到的,图片恰恰是占用带宽的元凶 。每个 IMG 标签,浏览器都会试图发起一个下载请求。我们知道,图片是一个网页使用最多的资源,现在一个网页至少有几个图片,多则上百个。对于一个拥有一堆的图标的网页,我们想到的是怎么减少他们?先不考虑每一个图标的 HTTP 请求,就是图标的命名都困扰了不少的网页设计师。其实,重庆网站设计想到的最直接的方式就是将图片合并。
 
合并后的图片, 会产生一个问题: 我们如何将图片中所需的部分显示出来呢?其实,使用 CSS Sprites 可以得到很好的解决这个问题。CSS Sprites 可以处理页面的图片,又称为 CSS 精灵。其中,它可以处理一幅大图,这张图片包括了一个页面中全部小图片。于是,在访问这网页时,所有的图片就一下子就显示出来了。就目前的网络带宽而言,加载低于 200KB 的单张图片消耗的时延相差无几。因此,不需要考虑这个问题。
 
图片合成可以加快速度,不是通过降低图片的大小,而是通过减少图片的个数。以前切割图片的方法目标:图片的规格和大小越小越好。其实,规格大小是无关紧要的, 由于电脑的计算都是按照 byte 来的。 Browser 呈现每一张图片都需要向 Web Server 发送一个 HTTP 请求。因此,大量的图片就会发送大量的请求,出现的延迟的时间会增加。首先,CSS Sprites 将页面中若干背景图片合成一张图片。其次,再使用 CSS的 background-image, background-repeat, background-position 的来定位背景。 其实,background-position 能够指出背景图片的具体位置。
 
在一个页面有 4 幅背景图片。假如没有合并图片,每一幅背景图片需要发送一个 HTTP 请求,所以需要 4 个 HTTP 请求。使用合并图片后,4 个 HTTP 请求变为一个 HTTP 请求,即减少了至少 3 个 RTT 时间。响应时间也会随之降低,从而减少了 HTTP 开销。不难看出,合并图片确实可以减少 HTTP 请求的数量,从而减少浏览器的响应时间。我们可以看到整整提升了 70 毫秒,即差不多 20%的性能的提升。使用合并图片加上 CSS Sprites 技术,可以很好的减少 HTTP 请求。特别是,当一个页面拥有大量的图标时,使用之,可以获取很好的效果。

本文由重庆易加网络 www.ccqyj.com原创提供,转载请注明来源。