网狐教程首页


实用技巧

---

利用层叠样式表优化图片

缩小图片文件字节大小的传统方法一般是缩小图片的尺寸或降低图片分辩率，而今天我向你介绍的新方法则是利用层叠样式表(CSS)对图片进行优化。根据你设计的网页的特点，有时使用此方法来创建比较复杂的网页时，很可能会极大的降低网页对带宽的要求，减小网页字节数。 网页图片最常见的两种格式为GIF和JPEG，其中GIF图片可以将图片的颜色减少至256色之内，并可以使用几种压缩算法(如LZW压缩方式)来对图片进行适度的压缩。具体讲GIF图片的压缩可以通过降低XY分辩率或减少颜色使用数目来实现，这两种方法都会丢失一些图片信息。 JPEG图片格式使用有损或略有损压缩形式，在对JPEG图片进行压缩时可以较好地保持图片的分辩率和色深，但也会丢失一些图片信息。 与JPEG压缩方式相似，使用层叠样式表也可以允许你在压缩图片文件大小的同时保持图片的分辩率。虽然较复杂的图片的总体质量有可能会略有下降，但有时简单图片在压缩后可能只有非常细小的损失，而有时甚至不会受到任何损失。而且层叠样式表可以支持任何格式和大小的图片。 我在is18fig1.htm网页中提供了一些未经层叠样式表处理的图片，每种图片均使用不同的分辩率采用GIF或JPEG格式进行显示。如果你想对GIF图片进行压缩，就必须缩小图片尺寸，而如果你想对JPEG图片进行压缩，虽然你能够保持图片的分辩率，但会损失一些信息或质量。

层叠样式表可以允许你对某页的分辩率进行特殊的规定，而不受在该页显示的图片的实际分辩率的影响。这是通过在<DIV>置标符内添加控制图片分辩率的标志符实现的，例如：

<div style="position:absolute;left:80;top:100; width:256;height:400;">

<img src="webtips.gif" width=128 height=200>

</div>

在本例中，图片将会按照实际分辩率的两倍进行显示。我在is18fig6.htm网页内提供了一些不同大小的相同的图片，并保证原始文件的分辩率是一样的。

接下来我在is18fig3.htm网页中提供了一些同样大小的不同图片，通过对图片分辩率的控制，你可以获得希望达到的图片质量和大小，这将有利于你对网页整个页面的设计控制。

其中同样的一幅图片，我采用不同的文件格式和分辩率，而通过层叠样式表，我可以非常精确地控制图片质量、分辩率以及页面设计要求之间的关系，而且正如前面我所讲的，使用层叠样式表可以支持所有图片格式。

你可以查看一下is18fig4.htm网页，虽然这个页面非常复杂，包含了许多图片，但实际上如果包括Dwarf图标在内，整个网页不足7k，而如果不把Dwarf图标包括在内，则连3k都不到。而如果你想查看未经层叠样式表处理过的该网页，请链接至is18fig5.htm。 当然我认为一个网页设计制作人员的工作主旨不应该是追求加载速度飞快的网页，你的主要目标是让访问者愿意探访你的网站及产品和内容。在此之后，你可以对网页的图片进行适当的控制，减小网页带宽需求。