首頁 響應式網頁 響應式圖片的處理
以類別搜尋
以關鍵字搜尋
響應式圖片的處理

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

 

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

 

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

 

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

 

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



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



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

 

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

 

 
比較適合的顯示方式

 

 

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

  

 

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


 解決方式 :

 

 延遲載入

 

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

 

 

 

 

 

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

 

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

 

 

 

 

 即時縮圖

 

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

 

 

 

 

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


解決方式 :

 

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

 

 

 

 

 

 

 


@2016 希塔網路創意有限公司 . 02-2965-0174 . All Rights Reserved.