The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

圖片

一張圖片勝過千言萬語,而圖片在每個網頁上都是不可或缺的一環。但是,大部分的下載位元組通常都是圖片。有了回應式網頁設計,不僅版面配置可以根據裝置特性變更,圖片也可以靈活變動。

回應式圖片

有了回應式網頁設計,不僅版面配置可以根據裝置特性變更,圖片也可以靈活變動。例如,在高解析度 (2x) 的螢幕上,必須使用高解析度圖形才能保持畫面銳度。當瀏覽器寬度為 800px 時,寬度為其 50% 的圖片效果就很好,但在較窄的手機上可能會佔用過多的空間,而且當其縮小到適合較小的螢幕時,仍然會佔用相同的頻寬。

美學指導

美學指導示例

有時候,我們需要對圖片做出大幅變動,例如變更比例、進行裁剪,甚至是替換整個圖片。在這種情況下,變更圖片的動作一般稱為美學指導。如要查看更多示例,請前往 responsiveimages.org/demos/

響應式圖片

你知道嗎?加載網頁時,平均 60% 以上的流量都來加載圖片。

在這門課程裡,你將學習如何在現代網絡環境中使用圖片,以便你的圖片在任何設備上都看起來效果更棒,並且快速加載。

在學習期間,你將掌握各種技能和技巧,能夠輕鬆地將響應式圖片整合到你的開發流程中。 學完這門課程後,你將能夠開發可以適應不同的視口尺寸及使用場景的圖片。

这个免费的课程可以在 Udacity 找到

參加課程