優化網站設計（三十一）：不要在頁面中縮放圖片

前言

網站設計的優化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過，我在不同的場合也分享過這樣的話題。

作為通用的原則，雅虎的工程師團隊曾經給出過35個最佳實踐。這個列表請參考 Best Practices for Speeding Up Your Web Site  （http://developer.yahoo.com/performance/rules.html），同時，他們還發布了一個相應的測試工具Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實踐，並結合自己的實際項目情況進行應用。 接下來的一段時間，我將結合ASP.NET這個開發平台，針對這些原則，通過一個系列文章的形式，做些講解和演繹，以幫助大家更好地理解這些原則，並且更好地使用他們。

准備工作

為了跟隨我進行后續的學習，你需要准備如下的開發環境和工具

1. Google Chrome 或者firefox ，並且安裝 Yslow 這個擴展組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具有所了解，你可以通過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要對ASP.NET的開發基本流程和核心技術有相當的了解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論的是第三十一條原則：Do Not Scale Images in HTML （不要在頁面中縮放圖片）。

老實說，這個錯誤的設計其實在我早些年做網頁設計的時候，也經常會犯（原因在於很多時候，我們都有懶散的心理，圖一時的方便）。

有時候，我能得到的圖片尺寸並不那么合乎要求（我說過了，我通常不太會自己做圖片），但為了在網頁中顯示出我希望的尺寸，我會很自然地想到通過如下的方式來圖片進行縮放：

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 

縮放的意思其實是說：

不管mycat.jpg這個圖片原始尺寸是多少，我通過明確地設置圖片寬度和高度，要求它最終顯示出來的尺寸是100px * 100px.

很顯然，瀏覽器下載到原始圖片之后，如果原始尺寸與目標尺寸不符，就會需要對圖片進行縮放（拉伸或者縮小），以便實現剛才所提到的目的。

 

所以，請記住並遵守這條原則：你需要在網頁中顯示什么尺寸的圖片，就請圖片設計人員提供什么尺寸的圖片，而不是在網頁中進行縮放。