> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-definitions.html > 英文原文：http://blog.cloudfour.com/responsive-images-101-definitions/ 過去這些年，我們寫了[不少關于響應式圖片的文章](http://blog.cloudfour.com/?s=responsive+images)。如今既然[響應式圖片已經運用](http://blog.cloudfour.com/responsive-images-are-here-now-what/)在瀏覽器里了，似乎也是時候回顧和總結一些入門指南給那些剛剛開始探索響應式圖片的同學。 因此，我們推出一個新系列叫做響應式圖片101，在里面我們會談到為什么需要響應式圖片以及如何選擇正確的響應式圖片解決方案。 讓我們深入學習吧！ ## 響應式圖片是什么？ 最開始響應式網頁設計的關鍵部分之一就是讓瀏覽器能夠自動調節圖片尺寸。 然而，僅僅改變圖片尺寸意味著用戶仍然需要下載體積過大的圖片。比如下面這個Apple Watch圖片：  這張圖片的[大尺寸版本]((http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition_large_2x.jpg)，主要用在iMac之類的大尺寸高分屏上，尺寸為**`5144px x 1698px`**。體積是**`398K`**。 把這樣一張大尺寸的圖片傳送到一些設備例如[Blackberry Curve 9310](http://us.blackberry.com/smartphones/blackberry-curve-9310.html)——設備分辨率為`320px x 240px`——沒有任何意義。我們需要更小一點的圖片。 因此，提及響應式圖片時，我對它的具體定義如下： > 根據顯示器分辨率，提供多個圖片源，在頁面上圖片的尺寸，或者其它參數的一種方法。 通常，談到響應式圖片，人們傾向于內聯圖片的解決方案。這是為什么呢？讓我們來討論一下老朋友`<img>`元素： ~~~ <img src="giraffe.jpg" alt="Giraffe"> ~~~ 事實上`<img>`只能提供單一圖片源，這一點成了一個巨大的挑戰。但是響應式圖片技術不僅僅局限在HTML上。我們之后會在這個系列中研究相關的CSS技術。 ## 了解使用情況 當你開始尋找響應式圖片解決方案時，最重要的是決定哪個解決方案對現有的情況最有利。找到最佳方案的關鍵是了解清楚當前要解決的問題。 [響應式圖片討論組](http://responsiveimages.org/)定義了多種[使用情況](http://usecases.responsiveimages.org/)。我建議你去閱讀完整的使用情況列表——里面有很多好東西——但是出于說明目的，我將主要說明兩種使用情況：分辨率切換和藝術指導。 ### 分辨率切換 分辨率切換是最常見的使用情況。它應用于任何想要提供不同尺寸同時又不想對內容或者圖片的寬高比進行任何改動的解決方案。  分辨率切換不僅包括可以根據視口尺寸靈活改變圖片尺寸，還包括基于不同顯示器分辨率提供不同圖片源的腳本（也稱為，retina圖片）。 ### 藝術指導 每當需要基于頁面中圖片的尺寸改變一張圖片的內容或寬高比時，你就會遇到被RICG稱為藝術指導的情況。 我們用下面的[奧巴馬總統在克萊斯勒工廠演講的照片](http://www.flickr.com/photos/barackobamadotcom/5795228030/)作為例子。  當照片以大尺寸顯示時，顯示出背景里的汽車工廠是有意義的。背景可以在圖像上說明這個事件發生的地點。然而試想如果我們把圖片縮小來適應小屏幕的時候呢？ 奧巴馬在克萊斯勒工廠演講的照片被縮放到寬度為`100px`。在這個尺寸上奧巴馬自己都很袖珍。  在這個尺寸上幾乎認不出奧巴馬。你無法辨認出他的臉部。因此，我們不應該簡單得縮放圖片，而應該合理裁切圖片去掉一些背景從而把焦點放到奧巴馬身上。最終結果這張圖片在小尺寸上的表現變得更好。  奧巴馬在克萊斯勒工廠演講的照片被縮放到寬度為`100px`并且被裁切因而顯得更好。 藝術指導不僅僅是裁切圖片。例如，在Nokia的網頁上展示的新一代瀏覽器，你可以看到圖片基于屏幕尺寸改變而從風景變為肖像。 *視頻要翻墻瀏覽。* 正如Stephanie Rieger在[創新開發會議](https://vimeo.com/35352401)上解釋的那樣，最終他們決定改變圖片從而讓瀏覽器自身看起來更舒服。如果圖片縮放得太小，瀏覽器內容變的無法閱讀因此才從風景切換為肖像。 我遇到的最常見的藝術指導場景是包含文字的圖片。我們看CB2頁面上的例子以及一張hero image。  這個圖像包含了三個照片，兩個帶有文字的logo，一個描邊郵戳和文本。如果我們只是把這個圖像調整到`320px`寬，文本將會變得太小而無法辨認。  CB2目前沒有一個響應式的網站，但是他有一個移動網站，我們可以看到他們如何在小屏幕上處理這個圖像。  為了使圖像在小屏幕上起作用，CB2做了如下操作： * 從三個圖片變為兩個 * 去除文本 * 改變長寬比使圖片更高 * 重新設計圖像的布局 如你所見，為了使Hero image在小屏幕上起作用而必須要作出的改變是很多的。 ## 游戲開始 既然我們現在已經對響應式圖片有了一個定義，我們可以開始研究這些解決方案的原理。下一節將介紹圖片依賴。