圖片 無疑是網頁中的重要元素，好看的圖片會為網站帶來流量與人氣，越大的圖片通常越吸睛，但是在行動裝置普及的年代，圖片產生了兩個主要問題 :

1. 佔據太多網路頻寬，影響瀏覽器整體效能。

行動裝置常常在網路不穩定的環境中使用，跟 辦公室 的區域網路不一樣，可使用的網路頻寬非常有限，這時候如果瀏覽到一個很大的圖片，一定會等很久，瀏覽體驗就會變差。

2.  某些圖片內容，不適合於小尺寸螢幕顯示。

適合大尺寸顯示的圖面如 :

在小螢幕上裝置上，如果照原比例縮小顯示，就會如 下 :

照原比例縮小 ，看不清楚關鍵特徵

比較適合的做法是擷取關鍵特徵來顯示，如 :

 
比較適合的顯示方式

我們將分別討論目前的主流解決方式 :

問題 : 佔據太多網路頻寬，影響瀏覽器整體效能。

 解決方式 :

 延遲載入

就是不要一次載入所有的圖片，等圖片真的必須出現的時候(也就是進入瀏覽器可視區)，才去載入圖片，如果一個圖片完全沒有進入可視區，就關閉頁面了，則那張圖片就完全不用載入，節省頻寬，示意如下 :

 利用 HTML5 最新標籤，並預先準備不同尺寸的圖片

針對同一張圖片內容，預先準備好幾組不同的尺寸的圖片，大圖 給 寬螢幕瀏覽器，小圖 給 小螢幕瀏覽器(如手機)，以節省網路頻寬，示意如下 :

 即時縮圖

圖片永遠只有一張，但伺服器程式會根使用者的瀏覽器的尺寸，即時壓縮並回應一張適合該瀏覽器大小的圖片，示意如下 :

問題 : 某些圖片內容，不適合於小尺寸螢幕顯示。

解決方式 :

 預先裁切好適合不同螢幕尺寸的圖片，並根據來源螢幕尺寸來回應對應圖片，示意如下 :