本節書摘來異步社群《響應式web圖形設計》一書中的第13章，第13.2節，作者： 【美】christopher schmitt 譯者： 曾斌 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
響應式web圖形設計
使用css縮放圖像隻能算解決一半問題。光栅圖像的脆弱在于必須為顯示尺寸準備像素足夠大的圖像。圖像被拉長或拉寬的時候，它沒有多餘的像素資料供其添加。是以，邊緣會變得模糊不清。這就是為什麼一開始最好從盡可能最大的尺寸開始着手處理圖像。該尺寸可能是一個非常大的顯示器寬度。
在創作本書期間，戴爾公司推出了ultrasharp u3011顯示器，30寸超大尺寸，2 560×1 600分辨率。是以，能夠比對此螢幕的自适應圖像可能會非常大（正如第4章所述，先确認你的網站浏覽資料，看看你的網站是不是真的需要适應這麼大的顯示器）。
圖13.2到圖13.4 展現了像素資料的增加與圖像檔案大小增加的關系。
以今天的标準來看，戴爾的此款螢幕大了點，但還有另一類螢幕裝置以截然不同的方式打包資料：它們縮小了像素點，提高了密度。蘋果公司稱其為retina高密度屏，也正成為windows作業系統硬體制造的趨勢。
通過width:max-width這類css規則的控制，正常顯示器尺寸的高密度屏能夠呈現所有的視覺資訊。為了顯示出清晰的圖像，我們需要提供兩倍于原有顯示尺寸的圖像才可以。很自然地，更多的像素資訊意味着圖像檔案也更大了（見表13.1）。
盡管圖13.5、圖13.6和圖13.7在“實體體積”上更大，但是，在高密度螢幕上的大圖像和正常螢幕上的小一些的圖像看起來大小是一樣的。
這些自适應圖像的體積在不斷增大，但使用寬帶連接配接的使用者還可以接受目前的下載下傳速度。但是我們不會總有那麼好的運氣，可以一直使用速度超快的wi-fi熱點。
上班、下班途中，或者出遊時，我們隻能依賴于緩慢的移動網絡服務來保持網絡連接配接。盡管我們的手機和平闆電腦越來越多地使用了高清屏，然而我們還得指望因地變化的、順暢的網際網路網絡服務。
是以，如果我們使用了大尺寸圖像（無論是高清還是正常螢幕），可能會強迫使用者接受多于他們實際需求的資料——尤其是他們的套餐資料流量有限的時候。