建站常識(shí)

網(wǎng)站中的圖片設(shè)計(jì)

2008-02-14 12:42:00

I've talked a lot about the need for speed. Specifically, the importance of your web pages loading quickly. Images are the number one culprit. Like a vampire, they are seductive and at the same time suck the life out of your site. (By the way, since this article deals with images, I will be using some as examples and this will cause the pages to take a while to load.)

我曾經(jīng)說(shuō)過(guò)，網(wǎng)頁(yè)下載速度很重要，而圖片就是阻礙下載速度的首要因素。圖片確實(shí)很誘人，但是會(huì)占據(jù)網(wǎng)站很多空間。順便說(shuō)一下，在這篇文章中，我會(huì)介紹阻礙網(wǎng)頁(yè)下載的幾個(gè)因素。

Everyone wants to use images. They can be interesting and give your web site some style. Also, if you're selling something on-line, the prospective customer likes to have a look at what they are buying. Imagine the old Sears catalog without any pictures, just descriptions. Pull out the Yellow Pages and notice how the ads with pictures grab your attention first. So, we could have a page load lightening fast without any images, but that would be very boring. Yes, we need speed, but unless we're simply looking for information, we want a picture or two.

每一位網(wǎng)站設(shè)計(jì)者都希望運(yùn)用圖片，圖片可以讓網(wǎng)站更加具有吸引力。在線銷(xiāo)售產(chǎn)品的網(wǎng)站，需要為用戶提供具有視覺(jué)吸引力的內(nèi)容，而不僅僅是簡(jiǎn)單的文字說(shuō)明，電話黃頁(yè)中那些帶有圖片的廣告是不是很具有吸引力呢？因此，沒(méi)有圖片的網(wǎng)站確實(shí)可以減少網(wǎng)站下載時(shí)間，但內(nèi)容卻沒(méi)有吸引力。是的，我們需要提高網(wǎng)站下載速度，但我們也需要一、兩張圖片，除非我們僅僅是尋找信息。

Remember the old Chinese saying, "One picture is worth a thousand words"? Unfortunately, some pictures take longer than ten thousand words to load. Much of the time the problem is the images were not properly prepared for use on the internet. Images are usually in a GIF or JPEG format. Without going into too much technical detail, you have probably seen these file extensions on images you have downloaded or used with e-mail. It may look something like this, "name.gif" or "name2.jpg", etc. Generally speaking, the GIF is best used for graphics such as cartoons or font images and JPEG (same as JPG) is best used for photographs. There are other formats, but the principles are the same for most.

中國(guó)有句俗語(yǔ)，“一張圖片抵得過(guò)千言萬(wàn)語(yǔ)”，但是圖片的下載時(shí)間會(huì)比一萬(wàn)句話的時(shí)間都長(zhǎng)?，F(xiàn)在圖片的不合理利用成為一個(gè)主要問(wèn)題。圖片通常是GIF或者JPEG格式，不要考慮太多技術(shù)問(wèn)題，你可能下載過(guò)或者在電子郵件中運(yùn)用過(guò)這些圖片，圖片的名稱(chēng)類(lèi)似于“名字.gif”或者“名字2.gif”等。一般來(lái)說(shuō)，GIF格式適用于動(dòng)畫(huà)或者字體圖像等內(nèi)容；JEPG（簡(jiǎn)稱(chēng)JPG）格式適用于照片。當(dāng)然還有很多其它格式，但使用原則相同。

Each image is a file and each file is made up of bytes. The number of bytes will determine how long the image will take to load. They can also determine how sharp the image is. Don't confuse the displayed dimensions (physical size) of an image with its file size. A common mistake I have seen by novice webmasters is using the width and height elements of an image tag to size the image for the page. Below is an example of this:

每一幅圖片就是一份文件，而每份文件則由字節(jié)組成。文件的字節(jié)數(shù)決定圖片的下載時(shí)間、下載速度。我看到經(jīng)驗(yàn)少的網(wǎng)站設(shè)計(jì)者易犯的一個(gè)錯(cuò)誤就是，利用圖片標(biāo)簽的長(zhǎng)度與寬度元素定義網(wǎng)頁(yè)的圖片尺寸，下面就是一個(gè)例子：

All three of images above are from the exact same file. (A picture of Lucy Liu from Charlie's Angels, I think. Anyway, thanks, Columbia Pictures) I have compressed the image to about 19 kb (kilobytes or thousand bytes). More on compression in a few minutes. However, the actual image dimension in pixels is 179 x 268. The one on the left appears much larger and the one on the right appears much smaller. The one in the center is displayed with its proper dimensions.

以上三張圖片源自同一文件（劉裕玲的圖片）。我已經(jīng)把圖片壓縮為19kb，然后再次壓縮，然而圖片實(shí)際像素尺寸為179x268。左邊的圖片比較大，右邊的圖片比較小，中間的圖片尺寸適中。

So, how was this accomplished? As I mentioned, the width and height elements of the image tag were manipulated to change the size of the image. Manipulating an image's dimensions this way is a major mistake. I could have left these elements out of the image tag and the image would have been displayed in its proper dimensions. So, you might suspect that those elements are for resizing the image. Wrong. The width and height elements are to allow the browser to calculate how much space to allocate for an image. This helps the page load faster.

那么如何設(shè)計(jì)出尺寸適當(dāng)?shù)膱D片呢？上面我提到過(guò)，我們可以根據(jù)圖片像素標(biāo)簽中的寬度與高度元素，改變圖片的尺寸大小。改變圖片空間尺寸是一個(gè)大錯(cuò)誤，你可能認(rèn)為，假如不考慮標(biāo)簽中的尺寸元素，圖片就會(huì)以合適的尺寸呈現(xiàn)出來(lái)，所以這些元素可以調(diào)整圖片大小。這種想法并不正確，長(zhǎng)度與寬度元素只是幫助瀏覽器計(jì)算圖片所占用的空間，以提高網(wǎng)頁(yè)下載速度。

Besides, resizing an image using the width and height elements of the image tag can distort the picture, especially when making it larger. Fortunately, with the previous examples I kept the ratio of width to height the same. If I hadn't, the picture could be distorted such as this:

此外，改變圖片標(biāo)簽中的寬度與高度屬性，會(huì)使圖片發(fā)生變形，尤其是當(dāng)增大圖片尺寸時(shí)。前面的例子中，我運(yùn)用了相同的寬度與高度比，所以那張圖片沒(méi)有變形。

Here are the image tags I used for each of the previous examples. All that I changed was the width and height elements and the "alt" element. The "alt" element is used to describe the image or the image's purpose. It has nothing to do with the image file itself and will be the topic of another discussion.

以上幾張圖片的標(biāo)簽如下，我只是改變了長(zhǎng)度、寬度以及“alt”內(nèi)容?！癮lt”元素用來(lái)描述圖片或者圖片
用途，與圖片文件沒(méi)有關(guān)系，我們以后再做討論。

Picture 1（圖片1）:<img src="Images/liu_1.jpg" width="197" height="295" alt="Lucy Liu Picture 1">

Picture 2（圖片2）:<img src="Images/liu_1.jpg" width="179" height="268" alt="Lucy Liu Picture 2">

Picture 3（圖片3）:<img src="Images/liu_1.jpg" width="89" height="134" alt="Lucy Liu Picture 3">

Picture 4（圖片4）:<img src="Images/liu_1.jpg" width="200" height="200" alt="Lucy Liu Picture 4">

No matter what dimensions were specified in the tag, the same 19 kb file was accessed. Each of those four pictures took the same amount of time to load. Now that they are most likely in your computer's cache, they will load very quickly, if you revisit their page soon. The cache remembers file names and saves the file. It then loads them from your computer on your next visit, if they are still in the cache. Some Internet service providers (ISPs) such as AOL have their own cache to speed up page loading for their subscribers. The downside is you're usually not seeing the best quality image or even the correct image, if it has recently changed. The image file's contents could be completely changed and the file name kept and this would cause you to see the previous image, rather than the actual current image until the cache is cleared.

不管標(biāo)簽中的尺寸是多少，文件總為19kb，也就是說(shuō)這四張圖片需要的下載時(shí)間相同。網(wǎng)站用戶再次登錄網(wǎng)站時(shí)，圖片可能已經(jīng)位于計(jì)算機(jī)存儲(chǔ)器中，那么網(wǎng)頁(yè)下載速度會(huì)很快。存儲(chǔ)器記住了文件名，保存了文件，所以再次瀏覽這些內(nèi)容時(shí)，計(jì)算機(jī)會(huì)從存儲(chǔ)器中下載這些內(nèi)容。諸如AOL一樣的網(wǎng)絡(luò)服務(wù)提供公司，擁有自己的存儲(chǔ)器，可以提高自己網(wǎng)站的下載速度。如果圖片修改不適當(dāng)，你可能不會(huì)看到最優(yōu)質(zhì)，甚至是質(zhì)量一般的圖片。圖片文件內(nèi)容可能完全改變，但文件名稱(chēng)不變，那么你會(huì)瀏覽到以前的圖片，而不是實(shí)際利用的圖片，除非清楚存儲(chǔ)器內(nèi)容。

So, now that we know that we should resize an image before we use it on our web page and we should state its proper dimensions in the image tag, what's the other common mistake we should avoid? File size. File size is made up by the number of bytes used to compile the image. The more bytes, the larger the file. The larger the file, the longer it takes to load.

因此，既然我們?cè)诶脠D片之前，應(yīng)該改變圖片尺寸，應(yīng)該在圖片標(biāo)簽中說(shuō)明圖片尺寸，那么我們還應(yīng)該避免出現(xiàn)什么錯(cuò)誤呢？文件尺寸。文件尺寸由編輯圖片的很多字節(jié)組成，字節(jié)越多，文件尺寸越大；文件尺寸越大，下載時(shí)間越長(zhǎng)。

Not to pick on Lucy Liu anymore, I will show you examples using a picture I took of a dragonfly. The original image taken with a digital camera was 1760 x 1168 in pixels and a file size of 6.167 megabytes. That's mega as in million. Those dimensions are way too big to display well on a web page and you could eat a sandwich waiting for it to load 6 meg, even if you have broadband. Remember, most visitors still use dial-up modems. Still, I want to share my dragonfly picture with you on the web, so I have to make it faster loading and a reasonable size.

這里不再以劉裕玲的照片為例，而以我拍攝的蜻蜓照片為例。利用數(shù)碼相機(jī)拍攝的原始照片像素為1760x1168，文件尺寸為6.167M（M代表百萬(wàn)字節(jié)）。這張圖片的尺寸太大，即使利用寬帶上網(wǎng)，也需要花費(fèi)很長(zhǎng)時(shí)間等待6M的圖片下載，況且現(xiàn)在還有很多利用電話撥號(hào)上網(wǎng)的用戶。如果我想在網(wǎng)頁(yè)中運(yùn)用這張圖片，就需要改變圖片尺寸。

Here is a "thumbnail" representation of the original picture. It is highly compressed (small file size) and small in dimensions at only 5% of the original at 88 x 58.

下面這張照片是原始照片的縮小版本，是經(jīng)過(guò)高度壓縮的，文件尺寸比較小，空間尺寸是原始圖片的
5%，只有88x58像素。

It's hard to discern and just gives you a vague idea of what the original image is. That is exactly what a thumbnail's purpose is. Usually, a thumbnail is linked to a larger, more detailed image. This one is not. If you had several products to sell and you put their images all on the same page in their full file size, the page could take a long time to load and many visitors wouldn't wait. However, if you used thumbnail images of the products, they would load quickly and the visitor could then select specific image(s) for closer inspection without waiting for images, they don't want to see, load.

微型圖片的作用只是使網(wǎng)站訪問(wèn)者對(duì)圖片有一個(gè)模糊的了解，并不能讓他們清楚地認(rèn)識(shí)圖片。通常，微型圖片可以與更大的、更清楚的圖片鏈接，但這一張并不能。如果網(wǎng)頁(yè)中放置太多的產(chǎn)品圖片，網(wǎng)頁(yè)下載時(shí)間就會(huì)很長(zhǎng)，許多訪問(wèn)者可能會(huì)因此而離開(kāi)。然而，如果利用微型圖片，網(wǎng)頁(yè)的下載速度就會(huì)提高很多，網(wǎng)站訪問(wèn)者可以挑選自己喜歡的圖片，鏈接后仔細(xì)瀏覽，并不需要浪費(fèi)很多下載時(shí)間。

To manipulate images, you're going to need image editing software to accomplish this. Lack of such tools is the reason many novice webmasters don't compress their images and use the width and height elements to size them. This is an article on what needs to be done, not how to do it. Teaching you how to use your image editing software is beyond the scope of this discussion. That being said, you need to size your image. Usually, but not always, this entails making it smaller. The first step is to ask yourself whether the entire image is needed. Since I'm focusing on the dragonfly, you don't need to see my entire backyard. Thus, I will crop the picture. Even so, the image dimensions are still too large at 668 x 488 and the file size is still huge at 978 kb (almost 1 meg). At least I'm now focused on my subject, the dragonfly.

你需要利用圖片編輯工具，修改圖片。很多經(jīng)驗(yàn)少的網(wǎng)站設(shè)計(jì)者就是因?yàn)楹鲆暳诉@個(gè)因素，才沒(méi)有壓縮圖片，而利用高度、寬度元素修改圖片尺寸。這篇文章只是介紹你需要做什么，而不是介紹做的方法，所以我們這里不會(huì)討論圖片編輯軟件的使用方法，需要你自己親自去做。通常情況下，圖片必須要縮小，當(dāng)然并不是所有情況都這樣。首先你需要詢(xún)問(wèn)自己網(wǎng)站是否需要整張圖片，比如說(shuō)這張圖片，我只是突出蜻蜓，并不需要突出整個(gè)背景，因此我會(huì)對(duì)圖片進(jìn)行修改。即使這樣，這張圖片的空間尺寸仍然為668x488，文件尺寸為978kb（將近1M），但至少圖片突出了主題：蜻蜓。

Next, I will resize the image to fit my page. I decide that a 50% reduction in dimensions would be the right size. So, half of 668 x 488 is 334 x 244. It's now the correct dimensions, but the file size is still too big at 245 kb. It needs to be compressed. It will load very quickly, if I compress it down to 5 kb. However, it's not very sharp:

下面，我會(huì)根據(jù)頁(yè)面狀況，重新調(diào)整圖片尺寸。我決定空間尺寸減少50%（從668x488到334x244），這個(gè)尺寸正合適，但文件尺寸仍然很大，為245kb，所以需要壓縮。如果圖片為5kb，下載速度會(huì)非?？欤欢?，圖片質(zhì)量太差。

After some experimenting, I decide that 20 kb is a reasonable size. It still gives you a detailed view of the dragonfly without taking too long to load. So, from 1760 x 1168 at 6 meg to 334 x 244 at 20 kb. Here is the finished product:

經(jīng)過(guò)幾次修改，我認(rèn)為20kb為最理想的文本尺寸。這樣既可以保證圖片質(zhì)量，又可以保證下載速度。下面這張圖片就是最終的作品，也就是從1760x1168，6M修改為334x224，20kb的作品：

The basic points in using images on the internet are:
網(wǎng)頁(yè)中的圖片設(shè)計(jì)需要注意以下幾點(diǎn)：

Crop your image when possible to keep the focus where you want it.

在突出圖片主題的情況下，修改圖片尺寸。
Don't use the dimension elements of the image tag to size your image. Use your image editing software.

避免利用圖片標(biāo)簽中的內(nèi)容，修改圖片尺寸，應(yīng)該利用圖片編輯軟件。
Compress the image's file size to as small as possible while retaining as much visual quality as possible.

保證圖片質(zhì)量的同時(shí)，盡可能壓縮圖片。
Create thumbnails that link to the larger image.

創(chuàng)建與大圖片鏈接的微型圖片。

上一篇：網(wǎng)站設(shè)計(jì)如何才能靈活

下一篇：網(wǎng)站主頁(yè)的優(yōu)化