一張圖片勝過千言萬語,而圖片在每個網頁上都是不可或缺的一環。但是,大部分的下載位元組通常都是圖片。有了回應式網頁設計,不僅版面配置可以根據裝置特性變更,圖片也可以靈活變動。
回應式圖片
有了回應式網頁設計,不僅版面配置可以根據裝置特性變更,圖片也可以靈活變動。例如,在高解析度 (2x) 的螢幕上,必須使用高解析度圖形才能保持畫面銳度。當瀏覽器寬度為 800px 時,寬度為其 50% 的圖片效果就很好,但在較窄的手機上可能會佔用過多的空間,而且當其縮小到適合較小的螢幕時,仍然會佔用相同的頻寬。
美學指導
有時候,我們需要對圖片做出大幅變動,例如變更比例、進行裁剪,甚至是替換整個圖片。在這種情況下,變更圖片的動作一般稱為美學指導。如要查看更多示例,請前往 responsiveimages.org/demos/。