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.)

我曾經說過，網頁下載速度很重要，而圖片就是阻礙下載速度的首要因素。圖片確實很誘人，但是會占據網站很多空間。順便說一下，在這篇文章中，我會介紹阻礙網頁下載的幾個因素。

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.

每一位網站設計者都希望運用圖片，圖片可以讓網站更加具有吸引力。在線銷售產品的網站，需要為用戶提供具有視覺吸引力的內容，而不僅僅是簡單的文字說明，電話黃頁中那些帶有圖片的廣告是不是很具有吸引力呢？因此，沒有圖片的網站確實可以減少網站下載時間，但內容卻沒有吸引力。是的，我們需要提高網站下載速度，但我們也需要一、兩張圖片，除非我們僅僅是尋找信息。

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.

中國有句俗語，“一張圖片抵得過千言萬語”，但是圖片的下載時間會比一萬句話的時間都長。現在圖片的不合理利用成為一個主要問題。圖片通常是GIF或者JPEG格式，不要考慮太多技術問題，你可能下載過或者在電子郵件中運用過這些圖片，圖片的名稱類似于“名字.gif”或者“名字2.gif”等。一般來說，GIF格式適用于動畫或者字體圖像等內容；JEPG（簡稱JPG）格式適用于照片。當然還有很多其它格式，但使用原則相同。

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:

每一幅圖片就是一份文件，而每份文件則由字節組成。文件的字節數決定圖片的下載時間、下載速度。我看到經驗少的網站設計者易犯的一個錯誤就是，利用圖片標簽的長度與寬度元素定義網頁的圖片尺寸，下面就是一個例子：

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.

以上三張圖片源自同一文件（劉裕玲的圖片）。我已經把圖片壓縮為19kb，然后再次壓縮，然而圖片實際像素尺寸為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.

那么如何設計出尺寸適當的圖片呢？上面我提到過，我們可以根據圖片像素標簽中的寬度與高度元素，改變圖片的尺寸大小。改變圖片空間尺寸是一個大錯誤，你可能認為，假如不考慮標簽中的尺寸元素，圖片就會以合適的尺寸呈現出來，所以這些元素可以調整圖片大小。這種想法并不正確，長度與寬度元素只是幫助瀏覽器計算圖片所占用的空間，以提高網頁下載速度。

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:

此外，改變圖片標簽中的寬度與高度屬性，會使圖片發生變形，尤其是當增大圖片尺寸時。前面的例子中，我運用了相同的寬度與高度比，所以那張圖片沒有變形。

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.

以上幾張圖片的標簽如下，我只是改變了長度、寬度以及“alt”內容。“alt”元素用來描述圖片或者圖片
用途，與圖片文件沒有關系，我們以后再做討論。

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.

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

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.

因此，既然我們在利用圖片之前，應該改變圖片尺寸，應該在圖片標簽中說明圖片尺寸，那么我們還應該避免出現什么錯誤呢？文件尺寸。文件尺寸由編輯圖片的很多字節組成，字節越多，文件尺寸越大；文件尺寸越大，下載時間越長。

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.

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

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.

下面這張照片是原始照片的縮小版本，是經過高度壓縮的，文件尺寸比較小，空間尺寸是原始圖片的
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.

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

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.

你需要利用圖片編輯工具，修改圖片。很多經驗少的網站設計者就是因為忽視了這個因素，才沒有壓縮圖片，而利用高度、寬度元素修改圖片尺寸。這篇文章只是介紹你需要做什么，而不是介紹做的方法，所以我們這里不會討論圖片編輯軟件的使用方法，需要你自己親自去做。通常情況下，圖片必須要縮小，當然并不是所有情況都這樣。首先你需要詢問自己網站是否需要整張圖片，比如說這張圖片，我只是突出蜻蜓，并不需要突出整個背景，因此我會對圖片進行修改。即使這樣，這張圖片的空間尺寸仍然為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:

下面，我會根據頁面狀況，重新調整圖片尺寸。我決定空間尺寸減少50%（從668x488到334x244），這個尺寸正合適，但文件尺寸仍然很大，為245kb，所以需要壓縮。如果圖片為5kb，下載速度會非常快，然而，圖片質量太差。

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:

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

The basic points in using images on the internet are:
網頁中的圖片設計需要注意以下幾點：

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.

避免利用圖片標簽中的內容，修改圖片尺寸，應該利用圖片編輯軟件。
Compress the image's file size to as small as possible while retaining as much visual quality as possible.

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

創建與大圖片鏈接的微型圖片。