這篇文章中我們將學(xué)習(xí)關(guān)于自適應(yīng)圖片：一種可以在不同的屏幕尺寸和分辨率的設(shè)備上都能良好工作以及其他特性的圖片，并且看看HTML提供了什么工具來(lái)幫助實(shí)現(xiàn)它們。自適應(yīng)圖片僅僅只是自適應(yīng)網(wǎng)站設(shè)計(jì)的一部分，為您奠定了自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的良好基礎(chǔ)。

為什么要用自適應(yīng)的圖片？

讓我們來(lái)看一個(gè)典型的場(chǎng)景。一個(gè)典型的網(wǎng)站可能會(huì)有一張頁(yè)首圖片，這讓訪問(wèn)者看起來(lái)感到愉快。圖片下面可能會(huì)添加一些內(nèi)容圖像。頁(yè)首圖像的跨度可能是整個(gè)頁(yè)首的寬度。而內(nèi)容圖像會(huì)適應(yīng)內(nèi)容縱列的某處。此處有個(gè)簡(jiǎn)單的例子：

這個(gè)網(wǎng)頁(yè)在寬屏設(shè)備上表現(xiàn)良好，例如筆記本電腦或臺(tái)式機(jī)（你可以查看在線演示并且在GitHub上查看源代碼）。我們不會(huì)在這一節(jié)課中討論CSS，除了下面提到的那些：

• 正文內(nèi)容被設(shè)置的最大寬度為1200像素——在高于該寬度的可視窗口中，正文保持在1200像素，并將其本身置于可用空間的中間。在該寬度以下的可視窗口中，正文將保持在可視窗口寬度的100%。
• 頁(yè)眉圖像被設(shè)置為使其中心始終位于頁(yè)眉的中心，無(wú)論頁(yè)眉的寬度是多少。所以如果網(wǎng)站被顯示在窄屏上，圖片中心的重要細(xì)節(jié)（里面的人）仍然可以看到，而兩邊超出的部分都消失了。它的高度是200px。
• 內(nèi)容圖片已經(jīng)被設(shè)置為如果body元素比圖像更小，圖像就開(kāi)始縮小，這樣圖像總是在正文里，而不是溢出正文。

然而，當(dāng)你嘗試在一個(gè)狹小的屏幕設(shè)備上查看本頁(yè)面時(shí)，問(wèn)題就會(huì)產(chǎn)生。網(wǎng)頁(yè)的頁(yè)眉看起來(lái)還可以，但是頁(yè)眉這張圖片占據(jù)了屏幕的一大部分的高度，在這個(gè)尺寸下，你很難看到在第一張圖片內(nèi)容里的人。

一個(gè)改進(jìn)的方法是，當(dāng)網(wǎng)站在狹窄的屏幕上觀看時(shí)，顯示一幅圖片的包含了重要細(xì)節(jié)的裁剪版本，第二個(gè)被裁剪的圖片會(huì)在像平板電腦這樣的中等寬度的屏幕設(shè)備上顯示，這就是眾所周知的美術(shù)設(shè)計(jì)問(wèn)題（art direction problem）。

另外，如果是在小屏手機(jī)屏幕上顯示網(wǎng)頁(yè)，那么沒(méi)有必要在網(wǎng)頁(yè)上嵌入這樣大的圖片。這被稱之為分辨率切換問(wèn)題（resolution switching problem）。位圖有固定數(shù)量的像素寬，固定數(shù)量的像素高，與矢量圖外觀相同，但本質(zhì)不同。如果顯示尺寸大于原始尺寸，一張自身較小的位圖看起來(lái)會(huì)有顆粒感（矢量圖則不會(huì)）。

相反，沒(méi)有必要在比圖片實(shí)際尺寸小的屏幕上顯示一張大圖，這樣做會(huì)浪費(fèi)帶寬——當(dāng)可以在設(shè)備上使用小圖像時(shí)，手機(jī)用戶尤其不愿意因?yàn)橄螺d用于桌面的大圖像而浪費(fèi)帶寬。理想的情況是當(dāng)訪問(wèn)網(wǎng)站時(shí)依靠不同的設(shè)備來(lái)提供不同的分辨率圖片和不同尺寸的圖片。

讓事情變得復(fù)雜的是，有些設(shè)備有很高的分辨率，為了顯示的更出色，可能需要超出你預(yù)料的更大的圖像。這從本質(zhì)上是一樣的問(wèn)題，但在環(huán)境上有一些不同。

你可能會(huì)認(rèn)為矢量圖形能解決這些問(wèn)題，在某種程度上是這樣的——它們無(wú)論是文件大小還是比例都合適，無(wú)論在哪里你都應(yīng)該盡可能的使用它們。然而，它們并不適合所有的圖片類型，雖然在簡(jiǎn)單圖形、圖案、界面元素等方面較好，但如果是有大量的細(xì)節(jié)的照片，創(chuàng)建矢量圖像會(huì)變得非常復(fù)雜。像JPEG格式這樣的位圖會(huì)更適合上面例子中的圖像。

當(dāng)web第一次出現(xiàn)時(shí)，這樣的問(wèn)題并不存在，在上世紀(jì)90年代中期，僅僅可以通過(guò)筆記本電腦和臺(tái)式機(jī)來(lái)瀏覽web頁(yè)面，所以瀏覽器開(kāi)發(fā)者和規(guī)范制定者甚至沒(méi)有想到要實(shí)現(xiàn)這種解決方式（響應(yīng)式開(kāi)發(fā)）。最近應(yīng)用的響應(yīng)式圖像技術(shù)，通過(guò)讓瀏覽器提供多個(gè)圖像文件來(lái)解決上述問(wèn)題，比如使用相同顯示效果的圖片但包含多個(gè)不同的分辨率（分辨率切換），或者使用不同的圖片以適應(yīng)不同的空間分配（美術(shù)設(shè)計(jì)）。

注意: 在這篇文章中討論的新特性 — srcset/sizes/<picture> — 都已經(jīng)被新版本的現(xiàn)代瀏覽器和移動(dòng)瀏覽器所支持（包括Edge，而不是IE）。

怎樣創(chuàng)建自適應(yīng)的圖片?

在這一部分中，我們將看看上面說(shuō)明的兩個(gè)問(wèn)題，并且展示怎樣用HTML的響應(yīng)式圖片來(lái)解決這些問(wèn)題。需要注意的是，如以上示例所示，在本節(jié)中我們將專注于HTML的 <img>，但網(wǎng)站頁(yè)眉的圖片僅是裝飾性的，實(shí)際上應(yīng)該要用CSS的背景圖片來(lái)實(shí)現(xiàn)。CSS是比HTML更好的響應(yīng)式設(shè)計(jì)的工具，我們會(huì)在未來(lái)的CSS模塊中討論。

分辨率切換：不同的尺寸

那么，我們想要用分辨率切換解決什么問(wèn)題呢？我們想要顯示相同的圖片內(nèi)容，僅僅依據(jù)設(shè)備來(lái)顯示更大或更小的圖片——這是我們?cè)谑纠惺褂玫诙€(gè)內(nèi)容圖像的情況。標(biāo)準(zhǔn)的<img>元素傳統(tǒng)上僅僅讓你給瀏覽器指定唯一的資源文件。

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

我們可以使用兩個(gè)新的屬性——srcset 和 sizes——來(lái)提供更多額外的資源圖像和提示，幫助瀏覽器選擇正確的一個(gè)資源。你可以看到 responsive.html 的例子，也可以在GitHub上看到源碼：

<img srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

srcset和sizes屬性看起來(lái)很復(fù)雜，但是如果你按照上圖所示進(jìn)行格式化，那么他們并不是很難理解，每一行有不同的屬性值。每個(gè)值都包含逗號(hào)分隔的列表。列表的每一部分由三個(gè)子部分組成。讓我們來(lái)看看現(xiàn)在的每一個(gè)內(nèi)容：

srcset定義了我們?cè)试S瀏覽器選擇的圖像集，以及每個(gè)圖像的大小。在每個(gè)逗號(hào)之前，我們寫(xiě)：

1. 一個(gè)文件名 (elva-fairy-480w.jpg.)
2. 一個(gè)空格
3. 圖像的固有寬度（以像素為單位）（480w）——注意到這里使用w單位，而不是你預(yù)計(jì)的px。這是圖像的真實(shí)大小，可以通過(guò)檢查你電腦上的圖片文件找到（例如，在Mac上，你可以在Finder上選擇這個(gè)圖像，然后按 Cmd + I 來(lái)顯示信息）。

sizes定義了一組媒體條件（例如屏幕寬度）并且指明當(dāng)某些媒體條件為真時(shí)，什么樣的圖片尺寸是最佳選擇—我們?cè)谥耙呀?jīng)討論了一些提示。在這種情況下，在每個(gè)逗號(hào)之前，我們寫(xiě)：

1. 一個(gè)媒體條件（(max-width:480px)）——你會(huì)在 CSS topic中學(xué)到更多的。但是現(xiàn)在我們僅僅討論的是媒體條件描述了屏幕可能處于的狀態(tài)。在這里，我們說(shuō)“當(dāng)可視窗口的寬度是480像素或更少”。
2. 一個(gè)空格
3. 當(dāng)媒體條件為真時(shí)，圖像將填充的槽的寬度（440px）

注意: 對(duì)于槽的寬度，你也許會(huì)提供一個(gè)固定值 (px, em) 或者是一個(gè)相對(duì)于視口的長(zhǎng)度(vw)，但不是百分比。你也許已經(jīng)注意到最后一個(gè)槽的寬度是沒(méi)有媒體條件的，它是默認(rèn)的，當(dāng)沒(méi)有任何一個(gè)媒體條件為真時(shí)，它就會(huì)生效。 當(dāng)瀏覽器成功匹配第一個(gè)媒體條件的時(shí)候，剩下所有的東西都會(huì)被忽略，所以要注意媒體條件的順序。

所以，有了這些屬性，瀏覽器會(huì)：

1. 查看設(shè)備寬度
2. 檢查sizes列表中哪個(gè)媒體條件是第一個(gè)為真
3. 查看給予該媒體查詢的槽大小
4. 加載srcset列表中引用的最接近所選的槽大小的圖像

就是這樣！所以在這里，如果支持瀏覽器以視窗寬度為480px來(lái)加載頁(yè)面，那么(max-width: 480px)的媒體條件為真，因此440px的槽會(huì)被選擇，所以elva-fairy-480w.jpg將加載，因?yàn)樗牡墓潭▽挾龋?80w）最接近于440px。800px的照片大小為128KB而480px版本僅有63KB大小—節(jié)省了65KB。現(xiàn)在想象一下，如果這是一個(gè)有很多圖片的頁(yè)面。使用這種技術(shù)會(huì)節(jié)省移動(dòng)端用戶的大量帶寬。

老舊的瀏覽器不支持這些特性，它會(huì)忽略這些特征。并繼續(xù)正常加載 src屬性引用的圖像文件。

注意: 在 HTML 文件中的 <head> 標(biāo)簽里， 你將會(huì)找到這一行代碼 <meta name="viewport" content="width=device-width">: 這行代碼會(huì)強(qiáng)制地讓手機(jī)瀏覽器采用它們真實(shí)可視窗口的寬度來(lái)加載網(wǎng)頁(yè)（有些手機(jī)瀏覽器會(huì)提供不真實(shí)的可視窗口寬度, 然后加載比瀏覽器真實(shí)可視窗口的寬度大的寬度的網(wǎng)頁(yè)，然后再縮小加載的頁(yè)面，這樣的做法對(duì)響應(yīng)式圖片或其他設(shè)計(jì)，沒(méi)有任何幫助。我們會(huì)在未來(lái)的模塊教給你更多關(guān)于這方面的知識(shí)）。

一些有用的開(kāi)發(fā)工具

這里有一些在瀏覽器中的非常實(shí)用的開(kāi)發(fā)者工具用來(lái)幫助制定重要的槽寬度，以及其他你可能會(huì)用到的場(chǎng)景。當(dāng)我在設(shè)置槽寬度的時(shí)候，我先加載了示例中的無(wú)響應(yīng)的版本（not-responsive.html），然后進(jìn)入響應(yīng)設(shè)計(jì)視圖 （Tools > Web Developer > Responsive Design View），這個(gè)工具允許你在不同設(shè)備的屏幕寬度場(chǎng)景下查看網(wǎng)頁(yè)的布局。

我設(shè)置我的視圖寬度為 320px，然后再改為 480px；每一次寬度的改變我就進(jìn)入DOM 檢查 ，點(diǎn)擊我們感興趣的 <img> 元素，然后在顯示屏右側(cè)的 Box Model 視圖選項(xiàng)卡中查看它的大小。 你應(yīng)該會(huì)看到，這種無(wú)響應(yīng)式的做法會(huì)讓你的圖片在不同屏幕寬度下有著固定的寬度。

接著, 你可以檢查 srcset 是否正常工作，你需要將視圖的寬度設(shè)置為你想要的，(比如，把寬度設(shè)置的比較小，讓頁(yè)面看起來(lái)比較狹窄），打開(kāi)網(wǎng)絡(luò)檢查（Tools > Web Developer > Network），然后重新加載頁(yè)面。網(wǎng)絡(luò)檢查工具會(huì)給你一個(gè)列表，里面的文件都是已經(jīng)被下載來(lái)構(gòu)造網(wǎng)頁(yè)的。然后你可以在這里看到哪個(gè)圖像文件被下載了。

注意: 在 Chrome 中測(cè)試時(shí)，通過(guò)如下方式禁用緩存：打開(kāi) DevTools ，并選中 Settings > preferences > Network下Disable cache的選擇框。否則，Chrome 會(huì)優(yōu)先選擇緩存圖片而不是恰好適配的那個(gè)。

分辨率切換: 相同的尺寸, 不同的分辨率

如果你支持多種分辨率顯示，但希望每個(gè)人在屏幕上看到的圖片的實(shí)際尺寸是相同的，你可以讓瀏覽器通過(guò)srcset和x語(yǔ)法結(jié)合——一種更簡(jiǎn)單的語(yǔ)法——而不用sizes，來(lái)選擇適當(dāng)分辨率的圖片。你可以看一個(gè)例子srcset-resolutions.html：

<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

在這個(gè)例子中，下面的CSS會(huì)應(yīng)用在圖片上，所以它的寬度在屏幕上是320像素（也稱作CSS像素）：

img { width: 320px; }

在這種情況下，sizes并不需要——瀏覽器只是計(jì)算出正在顯示的顯示器的分辨率，然后提供srcset引用的最適合的圖像。因此，如果訪問(wèn)頁(yè)面的設(shè)備具有標(biāo)準(zhǔn)/低分辨率顯示，一個(gè)設(shè)備像素表示一個(gè)CSS像素，elva-fairy-320w.jpg會(huì)被加載（1x 是默認(rèn)值，所以你不需要寫(xiě)出來(lái)）。如果設(shè)備有高分辨率，兩個(gè)或更多的設(shè)備像素表示一個(gè)CSS像素，elva-fairy-640w.jpg 會(huì)被加載。640px的圖像大小為93KB，320px的圖像的大小僅僅有39KB。

美術(shù)設(shè)計(jì)

回顧一下，美術(shù)設(shè)計(jì)問(wèn)題涉及要更改顯示的圖像以適應(yīng)不同的圖像顯示尺寸。例如，如果在桌面瀏覽器上的一個(gè)網(wǎng)站上顯示一張大的、橫向的照片，照片中央有個(gè)人，然后當(dāng)在移動(dòng)端瀏覽器上瀏覽這個(gè)網(wǎng)站時(shí)，照片會(huì)縮小，這時(shí)照片上的人會(huì)變得非常小，看起來(lái)會(huì)很糟糕。這種情況可能在移動(dòng)端顯示一個(gè)更小的肖像圖會(huì)更好，這樣人物的大小看起來(lái)更合適。<picture>元素允許我們這樣實(shí)現(xiàn)。

回到我們最初的例子 not-responsive.html ，我們有一張圖片需要美術(shù)設(shè)計(jì)：

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

讓我們改用 <picture>！就像<video>和<audio>，<picture>素包含了一些<source>元素，它使瀏覽器在不同資源間做出選擇，緊跟著的是最重要的<img>元素。responsive.html 的代碼如下：

<picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture>

• <source>元素包含一個(gè)media屬性，這一屬性包含一個(gè)媒體條件——就像第一個(gè)srcset例子，這些條件來(lái)決定哪張圖片會(huì)顯示——第一個(gè)條件返回真，那么就會(huì)顯示這張圖片。在這種情況下，如果視窗的寬度為799px或更少，第一個(gè)<source>元素的圖片就會(huì)顯示。如果視窗的寬度是800px或更大，就顯示第二張圖片。
• srcset屬性包含要顯示圖片的路徑。請(qǐng)注意，正如我們?cè)?lt;img>上面看到的那樣，<source>可以使用引用多個(gè)圖像的srcset屬性，還有sizes屬性。所以你可以通過(guò)一個(gè) <picture>元素提供多個(gè)圖片，不過(guò)也可以給每個(gè)圖片提供多分辨率的圖片。實(shí)際上，你可能不想經(jīng)常做這樣的事情。
• 在任何情況下，你都必須在 </picture>之前正確提供一個(gè)<img>元素以及它的src和alt屬性，否則不會(huì)有圖片顯示。當(dāng)媒體條件都不返回真的時(shí)候（你可以在這個(gè)例子中刪除第二個(gè)<source> 元素），它會(huì)提供圖片；如果瀏覽器不支持 <picture>元素時(shí)，它可以作為后備方案。

這樣的代碼允許我們?cè)趯捚梁驼辽隙寄茱@示合適的圖片，像下面展示的一樣：

注意: 你應(yīng)該僅僅當(dāng)在美術(shù)設(shè)計(jì)場(chǎng)景下使用media屬性；當(dāng)你使用media時(shí)，不要在sizes屬性中也提供媒體條件。

為什么我們不能使用 CSS 或 JavaScript 來(lái)做到這一效果?

當(dāng)瀏覽器開(kāi)始加載一個(gè)頁(yè)面, 它會(huì)在主解析器開(kāi)始加載和解析頁(yè)面的 CSS 和 JavaScript 之前先下載 (預(yù)加載) 任意的圖片。這是一個(gè)非常有用的技巧，平均下來(lái)減少了頁(yè)面加載時(shí)間的20%。但是, 這對(duì)響應(yīng)式圖片一點(diǎn)幫助都沒(méi)有, 所以需要類似 srcset的實(shí)現(xiàn)方法。因?yàn)槟悴荒芟燃虞d好 <img> 元素后, 再用 JavaScript 檢測(cè)可視窗口的寬度，如果覺(jué)得大小不合適，再動(dòng)態(tài)地加載小的圖片替換已經(jīng)加載好的圖片，這樣的話, 原始的圖像已經(jīng)被加載了, 然后你又加載了小的圖像, 這樣的做法對(duì)于響應(yīng)式圖像的理念來(lái)說(shuō)，是很糟糕的。

大膽的使用現(xiàn)代圖像格式

有很多令人激動(dòng)的新圖像格式（例如WebP和JPEG-2000）可以在有高質(zhì)量的同時(shí)有較低的文件大小。然而，瀏覽器對(duì)其的支持參差不齊。

<picture>讓我們能繼續(xù)滿足老式瀏覽器的需要。你可以在type屬性中提供MIME類型，這樣瀏覽器就能立即拒絕其不支持的文件類型：

<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture>

• 不要使用media屬性，除非你也需要美術(shù)設(shè)計(jì)。
• 在<source> 元素中，你只可以引用在type中聲明的文件類型。
• 像之前一樣，如果必要，你可以在srcset和sizes中使用逗號(hào)分割的列表。

主動(dòng)學(xué)習(xí)：實(shí)現(xiàn)屬于你的響應(yīng)式圖像

在這次主動(dòng)學(xué)習(xí)中，我們希望你變得勇敢和自力更生……盡量的。我們希望你通過(guò)使用<picture>來(lái)實(shí)現(xiàn)自己美術(shù)設(shè)計(jì)上的寬/窄屏顯示適配，以及使用 srcset切換不同的分辨率。

1. 寫(xiě)一些簡(jiǎn)單 HTML 來(lái)包含你的代碼（如果你喜歡，也可以使用 not-responsive.html 作為起點(diǎn)）。
2. 找一張漂亮的寬屏風(fēng)景圖像，其中需要包含一些細(xì)節(jié)。使用圖像編輯器創(chuàng)建一個(gè)網(wǎng)頁(yè)大小的版本。然后裁剪一下，顯示一個(gè)更小的部分，其中包含放大的細(xì)節(jié), 然后創(chuàng)建第二張圖片 (差不多 480px 寬度比較好。)
3. 使用 <picture> 元素來(lái)實(shí)現(xiàn)藝術(shù)圖片切換器！
4. 創(chuàng)建不同大小的多張圖片, 每個(gè)圖片的圖像都是一樣的。
5. 使用 srcset/size 來(lái)創(chuàng)建一個(gè)分辨率切換器示例, 可以在不同的分辨率的情況下，提供相同尺寸的圖像, 或者在不同的視圖大小的情況下，提供不同尺寸大小的圖像。

注意: 使用瀏覽器開(kāi)發(fā)工具來(lái)幫助你工作時(shí)可以得到你需要的視圖大小，就像上文提到的。

總結(jié)

這章節(jié)中充滿了響應(yīng)式圖像 — 我們希望你學(xué)習(xí)新技術(shù)的過(guò)程是享受的。概括來(lái)說(shuō)，有兩個(gè)不同的問(wèn)題，文章中我們一直在討論：

• 美術(shù)設(shè)計(jì)：當(dāng)你想為不同布局提供不同剪裁的圖片——比如在桌面布局上顯示完整的、橫向圖片，而在手機(jī)布局上顯示一張剪裁過(guò)的、突出重點(diǎn)的縱向圖片，可以用 <picture> 元素來(lái)實(shí)現(xiàn)。
• 分辨率切換：當(dāng)你想要為窄屏提供更小的圖片時(shí)，因?yàn)樾∑聊徊恍枰褡烂娑孙@示那么大的圖片；以及你想為高/低分辨率屏幕提供不同分辨率的圖片時(shí)，都可以通過(guò) vector graphics (SVG images)、 srcset 以及 sizes 屬性來(lái)實(shí)現(xiàn)。