网站制作设计时图像的设计

　　我曾经说过，网页下载速度很重要，而图片就是阻碍下载速度的首要因素。图片确实很诱人，但是会占据网站很多空间。顺便说一下，在这篇文章中，我会介绍阻碍网页下载的几个因素。
 
　　每一位网站设计者都希望运用图片，图片可以让网站更加具有吸引力。在线销售产品的网站，需要为用户提供具有视觉吸引力的内容，而不仅仅是简单的文字说明，电话黄页中那些带有图片的广告是不是很具有吸引力呢？因此，没有图片的网站确实可以减少网站下载时间，但内容却没有吸引力。是的，我们需要提高网站下载速度，但我们也需要一、两张图片，除非我们仅仅是寻找信息。
　　中国有句俗语，“一张图片抵得过千言万语”，但是图片的下载时间会比一万句话的时间都长。现在图片的不合理利用成为一个主要问题。图片通常是GIF或者JPEG格式，不要考虑太多技术问题，你可能下载过或者在电子邮件中运用过这些图片，图片的名称类似于“名字.gif”或者“名字2.gif”等。一般来说，GIF格式适用于动画或者字体图像等内容；JEPG（简称JPG）格式适用于照片。当然还有很多其它格式，但使用原则相同。
　　每一幅图片就是一份文件，而每份文件则由字节组成。文件的字节数决定图片的下载时间、下载速度。我看到经验少的网站设计者易犯的一个错误就是，利用图片标签的长度与宽度元素定义网页的图片尺寸，下面就是一个例子：
onmousewheel="return bbimg(this)" alt="" src="UploadFile/2008-5/30/20085309208385.jpg" onload=resizepic(this) border=0>
　　以上三张图片源自同一文件（刘裕玲的图片）。我已经把图片压缩为19kb，然后再次压缩，然而图片实际像素尺寸为179x268。左边的图片比较大，右边的图片比较小，中间的图片尺寸适中。
　　那么如何设计出尺寸适当的图片呢？上面我提到过，我们可以根据图片像素标签中的宽度与高度元素，改变图片的尺寸大小。改变图片空间尺寸是一个大错误，你可能认为，假如不考虑标签中的尺寸元素，图片就会以合适的尺寸呈现出来，所以这些元素可以调整图片大小。这种想法并不正确，长度与宽度元素只是帮助浏览器计算图片所占用的空间，以提高网页下载速度。
　　此外，改变图片标签中的宽度与高度属性，会使图片发生变形，尤其是当增大图片尺寸时。前面的例子中，我运用了相同的宽度与高度比，所以那张图片没有变形。
onmousewheel="return bbimg(this)" alt="" src="UploadFile/2008-5/30/20085309208251.jpg" onload=resizepic(this) border=0>

网站制作设计时图像的设计
Fixty.cn　　更新时间：2008年10月06日　　点击数：898　　以上几张图片的标签如下，我只是改变了长度、宽度以及“alt”内容。“alt”元素用来描述图片或者图片
用途，与图片文件没有关系，我们以后再做讨论。
Picture 1（图片1）:
Picture 2（图片2）:
Picture 3（图片3）:
Picture 4（图片4）:
　　不管标签中的尺寸是多少，文件总为19kb，也就是说这四张图片需要的下载时间相同。网站用户再次登录网站时，图片可能已经位于计算机存储器中，那么网页下载速度会很快。存储器记住了文件名，保存了文件，所以再次浏览这些内容时，计算机会从存储器中下载这些内容。诸如AOL一样的网络服务提供公司，拥有自己的存储器，可以提高自己网站的下载速度。如果图片修改不适当，你可能不会看到最优质，甚至是质量一般的图片。图片文件内容可能完全改变，但文件名称不变，那么你会浏览到以前的图片，而不是实际利用的图片，除非清楚存储器内容。
　　因此，既然我们在利用图片之前，应该改变图片尺寸，应该在图片标签中说明图片尺寸，那么我们还应该避免出现什么错误呢？文件尺寸。文件尺寸由编辑图片的很多字节组成，字节越多，文件尺寸越大；文件尺寸越大，下载时间越长。
　　这里不再以刘裕玲的照片为例，而以我拍摄的蜻蜓照片为例。利用数码相机拍摄的原始照片像素为1760x1168，文件尺寸为6.167M（M代表百万字节）。这张图片的尺寸太大，即使利用宽带上网，也需要花费很长时间等待6M的图片下载，况且现在还有很多利用电话拨号上网的用户。如果我想在网页中运用这张图片，就需要改变图片尺寸。
　　下面这张照片是原始照片的缩小版本，是经过高度压缩的，文件尺寸比较小，空间尺寸是原始图片的
5%，只有88x58像素。
onmousewheel="return bbimg(this)" alt="" src="UploadFile/2008-5/30/20085309208221.jpg" onload=resizepic(this) border=0>
　　微型图片的作用只是使网站访问者对图片有一个模糊的了解，并不能让他们清楚地认识图片。通常，微型图片可以与更大的、更清楚的图片链接，但这一张并不能。如果网页中放置太多的产品图片，网页下载时间就会很长，许多访问者可能会因此而离开。然而，如果利用微型图片，网页的下载速度就会提高很多，网站访问者可以挑选自己喜欢的图片，链接后仔细浏览，并不需要浪费很多下载时间。

你需要利用图片编辑工具，修改图片。很多经验少的网站设计者就是因为忽视了这个因素，才没有压缩图片，而利用高度、宽度元素修改图片尺寸。这篇文章只是介绍你需要做什么，而不是介绍做的方法，所以我们这里不会讨论图片编辑软件的使用方法，需要你自己亲自去做。通常情况下，图片必须要缩小，当然并不是所有情况都这样。首先你需要询问自己网站是否需要整张图片，比如说这张图片，我只是突出蜻蜓，并不需要突出整个背景，因此我会对图片进行修改。即使这样，这张图片的空间尺寸仍然为668x488，文件尺寸为978kb（将近1M），但至少图片突出了主题：蜻蜓。
　　下面，我会根据页面状况，重新调整图片尺寸。我决定空间尺寸减少50%（从668x488到334x244），这个尺寸正合适，但文件尺寸仍然很大，为245kb，所以需要压缩。如果图片为5kb，下载速度会非常快，然而，图片质量太差。
onmousewheel="return bbimg(this)" alt="" src="UploadFile/2008-5/30/20085309208745.jpg" onload=resizepic(this) border=0>
　　经过几次修改，我认为20kb为最理想的文本尺寸。这样既可以保证图片质量，又可以保证下载速度。下面这张图片就是最终的作品，也就是从1760x1168，6M修改为334x224，20kb的作品：
onmousewheel="return bbimg(this)" alt="" src="UploadFile/2008-5/30/20085309208747.jpg" onload=resizepic(this) border=0>

网页中的图片设计需要注意以下几点：
 
在突出图片主题的情况下，修改图片尺寸。

避免利用图片标签中的内容，修改图片尺寸，应该利用图片编辑软件。

保证图片质量的同时，尽可能压缩图片。

创建与大图片链接的微型图片。