網頁設計中圖片該怎麼排版
圖片最佳化在提高產品質量上也起到了舉足輕重的作用，而圖片的排版設計是很重要的，那麼網頁設計中圖片該怎麼排版呢？下面小編為大家解答一下，希望能幫到您！
1. 簡約而不簡單
Win8和iOS7的出現，將網際網路行業中很多產品設計帶回到原點，或許更是另一個新的起點。Win8的Metro UI、iOS7中圖示的扁平化設計、一直崇尚簡約的豆瓣網、還有頂著時代工匠稱號的老羅所設計的錘子ROM，無一不體現著簡約的風格。
言歸正傳，回到我們圖片最佳化的主題上。在產品設計和UI設計階段，除了內容圖片，其他的圖片都是起修飾的作用。也就是對於傳遞資訊來說並非本質性的。所以最大的最佳化就是不要圖片。在進入到研發階段之前，就要確認設計，設計本身是否需要用到那麼多的圖片，還是說可以做到更簡潔！
2. 樣式代替圖片
Chrome，FF等瀏覽器廠商為網際網路的發展做了這麼多貢獻，為什麼我們還要讓那些不相容CSS3的瀏覽器阻礙網際網路的發展呢。因此，讓我們直接使用CSS樣式代替圖片來實現修飾效果！例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠完美支援，而對於那些低端瀏覽器，我們並不會完全拋棄他們，“漸進增強”則是一個很好的解決方案。至於什麼是漸進增強，這裡不再用過多篇幅去解釋，如果感興趣可以參考CSS“漸進增強”在web製作中常見應用舉例。
3. 選擇最合適的圖片
我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類或圖片構成較複雜的情況，適用於JPEG。如網站中的Banner圖、輪播圖、大尺寸背景圖等。
修飾圖片通常更適合用無失真壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種，PNG-8格式不支援半透明，也是IE6相容的圖片儲存方式。如果對圖片質量要求較高的半透明或全透明背景，儲存成PNG-24更合適。有時候會遇到在IE6下應用PNG-24圖片的情況，關於IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在專案中常用的方法是AlphaImageLoader篩選器。
GIF基本上除了GIF動畫外不要使用。
除了這些格式之外，Chrome、新版Opera、Android 4+支援WebP格式，IE 9+、IE mobile 10+支援JPEG XR。這兩個新格式都支援無損和有失真壓縮，都具有更良好的壓縮比。當然這需要為不同的瀏覽器返回不同的圖片，增加了開發成本，也增加儲存成本。不過你省了流量或者相同流量下改善了圖片質量，提升了使用者體驗。這就需要根據專案需求進行取捨了。
4. 常用的圖片最佳化技巧
CSS Sprites，將同類型的圖示或按鈕等背景圖合到一張大圖中，減少頁面請求。
Icon Font，將圖示做成字型檔案。優點是圖示支援多個尺寸，相容所有瀏覽器，減少頁面請求等。美中不足的是隻支援純色的icon。
SVG，對於絕大多數圖案、圖示等，向量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支援SVG了，所以可放心使用！
圖片壓縮工具，可以在圖片上線前使用壓縮工具進行壓縮，獲得更高的.壓縮比。我常用的壓縮工具為Yahoo的Smush.it。
5. 適用各種資源而不限於圖片的最佳化
data url
Base64是網路上最常見的用於傳輸8Bit位元組的編碼方式之一，可用於在HTTP環境下傳遞較長的標示資訊。將圖片轉化為base64編碼格式，資源內嵌於CSS或HTML中，不必單獨請求。
該方式的優點是：
1. 減少了HTTP請求
2. 避免了圖片重新上傳，還要清理快取的問題
不足之處是：
1. IE6, IE7不支援該型別編碼的圖片作為背景圖
2. 增加了CSS檔案的尺寸
3. 維護成本較高
按照HTTP協議設定合理的快取
具體的快取策略（如永久快取 + 重新命名）、部署策略（如反向代理、CDN等）這裡就不展開了。
【網頁設計中圖片該怎麼排版】相關文章：