響應式圖檔加載技術

轉自：http://hi.baidu.com/erictseng/item/377f51caa7c19c62f7c95dcc

随着移動網際網路的發展，HTML5技術的普及，網頁的設計開發也發生了很大的變化。這兩年最火的莫過于響應式網頁設計了，網絡上這方面的文章很多，在此不再敷述，本文僅就響應式網頁設計開發中的圖檔部分做探讨。

在開發移動網站的時候經常會遇到這樣的問題：在圖檔尺寸一定的情況下，如果裝置螢幕尺寸大于一定值，那麼圖檔顯示出來就是模糊的。以前一般的做法是按照普遍最高的螢幕尺寸作圖，這樣即使螢幕小顯示也不會有問題，但是這樣對小螢幕加載遠超螢幕尺寸的圖顯然也不合适。

那麼有沒有既能适應各種螢幕尺寸，又能很好的控制圖檔大小的方案呢？

1、Javascript圖檔替換。

retinajs提供這樣一個解決方案：當使用者加載頁面的時候，JS腳本會逐個檢查網頁中的圖檔确認該圖檔是否有一個更高分辨率的版本，如果存在的該圖檔則自動替換目前低分辨率的圖檔。

這個腳本推薦使用蘋果公司制定的“@2x”标準來标示高分辨率圖檔的檔案名。

假設你的網頁上有一個圖檔标簽：

<img src="/images/my_image.png" />
           

retinajs腳本會檢查你的伺服器上是否有一個"/images/[email protected]"檔案存在，如果有的話就自動替換目前圖檔。

2、伺服器端響應圖檔

Adaptive Images 在頁面加載時探測使用者裝置螢幕尺寸，然後根據這個尺寸自動建立和緩存相應的圖檔供前端調用。這個方案的好處是不需要對HTML标簽做任何更改，而且相對于用戶端的逐個圖檔檢查效率會更高。

兩種方法各有優劣，具體使用還需根據設計開發具體情況而定。

轉自：http://hi.baidu.com/erictseng/item/377f51caa7c19c62f7c95dcc