(一)：定義

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-definitions.html
英文原文：http://blog.cloudfour.com/responsive-images-101-definitions/

過去這些年，我們寫了不少關(guān)于響應(yīng)式圖片的文章。如今既然響應(yīng)式圖片已經(jīng)運用在瀏覽器里了，似乎也是時候回顧和總結(jié)一些入門指南給那些剛剛開始探索響應(yīng)式圖片的同學(xué)。

因此，我們推出一個新系列叫做響應(yīng)式圖片101，在里面我們會談到為什么需要響應(yīng)式圖片以及如何選擇正確的響應(yīng)式圖片解決方案。

讓我們深入學(xué)習(xí)吧！

響應(yīng)式圖片是什么？

最開始響應(yīng)式網(wǎng)頁設(shè)計的關(guān)鍵部分之一就是讓瀏覽器能夠自動調(diào)節(jié)圖片尺寸。

然而，僅僅改變圖片尺寸意味著用戶仍然需要下載體積過大的圖片。比如下面這個Apple Watch圖片：

這張圖片的[大尺寸版本]((http://www.w3cplus.com/sites/default/files/blogs/2015/1509/hero_ygold_edition_large_2x.jpg)，主要用在iMac之類的大尺寸高分屏上，尺寸為**`5144px x 1698px**。體積是**398K`**。

把這樣一張大尺寸的圖片傳送到一些設(shè)備例如Blackberry Curve 9310——設(shè)備分辨率為320px x 240px——沒有任何意義。我們需要更小一點的圖片。

因此，提及響應(yīng)式圖片時，我對它的具體定義如下：

根據(jù)顯示器分辨率，提供多個圖片源，在頁面上圖片的尺寸，或者其它參數(shù)的一種方法。

通常，談到響應(yīng)式圖片，人們傾向于內(nèi)聯(lián)圖片的解決方案。這是為什么呢？讓我們來討論一下老朋友<img>元素：

<img src="giraffe.jpg" alt="Giraffe">

事實上<img>只能提供單一圖片源，這一點成了一個巨大的挑戰(zhàn)。但是響應(yīng)式圖片技術(shù)不僅僅局限在HTML上。我們之后會在這個系列中研究相關(guān)的CSS技術(shù)。

了解使用情況

當(dāng)你開始尋找響應(yīng)式圖片解決方案時，最重要的是決定哪個解決方案對現(xiàn)有的情況最有利。找到最佳方案的關(guān)鍵是了解清楚當(dāng)前要解決的問題。

響應(yīng)式圖片討論組定義了多種使用情況。我建議你去閱讀完整的使用情況列表——里面有很多好東西——但是出于說明目的，我將主要說明兩種使用情況：分辨率切換和藝術(shù)指導(dǎo)。

分辨率切換

分辨率切換是最常見的使用情況。它應(yīng)用于任何想要提供不同尺寸同時又不想對內(nèi)容或者圖片的寬高比進行任何改動的解決方案。

分辨率切換不僅包括可以根據(jù)視口尺寸靈活改變圖片尺寸，還包括基于不同顯示器分辨率提供不同圖片源的腳本（也稱為，retina圖片）。

藝術(shù)指導(dǎo)

每當(dāng)需要基于頁面中圖片的尺寸改變一張圖片的內(nèi)容或?qū)捀弑葧r，你就會遇到被RICG稱為藝術(shù)指導(dǎo)的情況。

我們用下面的奧巴馬總統(tǒng)在克萊斯勒工廠演講的照片作為例子。

當(dāng)照片以大尺寸顯示時，顯示出背景里的汽車工廠是有意義的。背景可以在圖像上說明這個事件發(fā)生的地點。然而試想如果我們把圖片縮小來適應(yīng)小屏幕的時候呢？

奧巴馬在克萊斯勒工廠演講的照片被縮放到寬度為100px。在這個尺寸上奧巴馬自己都很袖珍。

在這個尺寸上幾乎認(rèn)不出奧巴馬。你無法辨認(rèn)出他的臉部。因此，我們不應(yīng)該簡單得縮放圖片，而應(yīng)該合理裁切圖片去掉一些背景從而把焦點放到奧巴馬身上。最終結(jié)果這張圖片在小尺寸上的表現(xiàn)變得更好。

奧巴馬在克萊斯勒工廠演講的照片被縮放到寬度為100px并且被裁切因而顯得更好。

藝術(shù)指導(dǎo)不僅僅是裁切圖片。例如，在Nokia的網(wǎng)頁上展示的新一代瀏覽器，你可以看到圖片基于屏幕尺寸改變而從風(fēng)景變?yōu)樾は瘛?/p>

視頻要翻墻瀏覽。

正如Stephanie Rieger在創(chuàng)新開發(fā)會議上解釋的那樣，最終他們決定改變圖片從而讓瀏覽器自身看起來更舒服。如果圖片縮放得太小，瀏覽器內(nèi)容變的無法閱讀因此才從風(fēng)景切換為肖像。

我遇到的最常見的藝術(shù)指導(dǎo)場景是包含文字的圖片。我們看CB2頁面上的例子以及一張hero image。

這個圖像包含了三個照片，兩個帶有文字的logo，一個描邊郵戳和文本。如果我們只是把這個圖像調(diào)整到320px寬，文本將會變得太小而無法辨認(rèn)。

CB2目前沒有一個響應(yīng)式的網(wǎng)站，但是他有一個移動網(wǎng)站，我們可以看到他們?nèi)绾卧谛∑聊簧咸幚磉@個圖像。

為了使圖像在小屏幕上起作用，CB2做了如下操作：

• 從三個圖片變?yōu)閮蓚€
• 去除文本
• 改變長寬比使圖片更高
• 重新設(shè)計圖像的布局

如你所見，為了使Hero image在小屏幕上起作用而必須要作出的改變是很多的。

游戲開始

既然我們現(xiàn)在已經(jīng)對響應(yīng)式圖片有了一個定義，我們可以開始研究這些解決方案的原理。下一節(jié)將介紹圖片依賴。