響應式圖像初學者指南：如何正確使用它們

這個響應式圖像教程將介紹 CSS 技術、HTML 功能和一些您需要考慮的工具。 所有這些都應該讓您很好地了解如何開始在您的項目中使用響應式圖像。

目錄：

• 帶有純 CSS 的響應式圖像
• sizes srcset和 size 屬性的響應式圖像
• 將srcset與像素密度描述符一起使用
• 使用<picture>元素
• 幫助響應式圖像的工具和服務

帶有純 CSS 的響應式圖像

使網頁上的任何圖像具有響應性的最簡單方法不需要媒體查詢或額外的 HTML。 您可以使用幾行 HTML 和 CSS 使任何圖像根據窗口的大小放大和縮小。

首先，我的 HTML 將包含width和height屬性：

在 HTML 中包含width和height值是最佳實踐。 這可確保瀏覽器為圖像保留必要的空間，並且在加載圖像時沒有後續的頁面重排。

除此之外，我將使用以下 CSS：

 img { max-width : 100% ; height : auto; }
 代碼語言： CSS （ css ）

這些值將覆蓋我的 HTML。 max-width屬性設置為100%以確保它填充所需的任何空間，最大為 1000px（來自 HTML 的值）。 height值auto確保圖像的高度保持圖像尺寸與其自然寬度和高度成比例。 如果我刪除height: auto行，圖像將保持在 HTML 中定義的高度，而不管寬度如何——這通常不是我想要的。

您可以使用以下 CodePen 試用這個簡單的示例。 如果您想測試響應能力，最好在新窗口中打開演示。

請注意，在我的示例中，圖像的自然尺寸為 2000 像素 x 1333 像素，但我選擇將其顯示為最大 1000 像素。

從理論上講，我可以對頁面上的每張圖片執行上述操作，這是將響應式圖片合併到我的項目中的一種基本且可接受的方式。 但理想情況下，我想將其提升到一個新的水平，並控製圖像的分辨率和其他因素，以提高性能並幫助 SEO，我將在以下部分討論。

sizes srcset和 size 屬性的響應式圖像

在上面的簡單 CSS 示例中，我正在加載一個大小約為 1.44MB 的圖像——即使在我使用無損壓縮來減小大小之後也是如此。 在桌面上查看時，這本身並不可怕，但它肯定不是我想要在智能手機等小型設備上加載的大小。 這就是srcset和sizes屬性派上用場的地方。

srcset屬性允許您在單個值中指定多個圖像大小。 這些將是瀏覽器或設備在定義的情況下可以訪問的圖像。 srcset sizes告訴瀏覽器選擇哪個圖像。

這是一個使用上一個示例中的 leopard.png 圖像的多個版本的示例：

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 代碼語言： HTML、XML （ xml ）

如果您以前從未見過srcset和sizes屬性，乍一看可能會讓人感到困惑。 我會把它全部分解，所以它相對容易掌握。

分解srcset屬性

srcset屬性接受一個或多個字符串的逗號分隔列表。 每個字符串包含：

• 指向圖像的 URL
• 以下可選描述符之一（以空格分隔）：
  • 寬度描述符
  • 像素密度描述符

在我的示例中，我包含了一個寬度描述符，這是您最常看到的。 我已經包含了三個不同版本的圖像：大的高分辨率版本，一個是 800 像素寬，另一個是 480 像素寬。

請注意，當我在上面的示例中使用寬度描述符時，語法是寬度值緊跟“w”（不要使用“px”單位值！）。 對於表示圖像的每個寬度描述符，我使用的是圖像的固有寬度（以像素為單位）。 您可以通過多種不同方式中的任何一種來獲取任何圖像的真實大小——通過在文件系統、照片編輯器、甚至在瀏覽器或瀏覽器的開發工具中引用其屬性。

分解sizes屬性

srcset sizes一起使用。 您可以單獨使用srcset （請參閱下一節），但使用srcset最常見的方式是與sizes一起使用。

sizes屬性接受一個或多個字符串的逗號分隔列表。 每個字符串包含：

• 媒體條件（類似於 CSS 中使用的媒體查詢）
• 定義圖像將佔用的“槽”大小的值

槽值可以是絕對長度，如em或px或視口相對單位（例如vw ）。 請注意，在我的示例中， sizes屬性中的插槽值與三個寬度描述符不完全匹配。 這是代碼：

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 代碼語言： HTML、XML （ xml ）

插槽值與寬度描述符不完全匹配的事實很好。 就我而言，我可以將sizes值分解為：

• 一個 600px 寬的視口將從srcset值加載 480w 圖像到一個 480px 寬的插槽內。
• 1000px 寬的視口將在 800px 插槽中加載 800w 圖像。
• 如果不滿足之前的媒體條件，默認的全尺寸圖片 (2000w) 將填充 1000 像素的插槽。

最後一個字符串是一個單獨的槽值，沒有媒體條件。 如前所述，這可確保在不滿足任何媒體條件時瀏覽器將顯示一些內容，這是默認設置。

您可以使用下面的 CodePen 演示查看示例代碼。 請注意，在這種情況下，您必須在模仿不同設備的東西上進行測試（例如 Chrome 中的 DevTools）。 您還可以使用各種真實設備打開頁面進行真實測試。 為方便起見，我在每個圖像上都包含了一個文本覆蓋，以便您在查看頁面時可以看到哪些加載。

請注意，在原始圖像加載後，當您更改視口的大小時，圖像不會改變大小。 srcset和sizes屬性對於在首次加載時根據媒體條件加載圖像很有用，但對於根據屏幕大小調整來切換圖像沒有幫助。 稍後我將向您展示一個不同的響應式圖像功能，可以解決這個問題。

將srcset與像素密度描述符一起使用

之前，我已經提到srcset屬性可以與像素密度描述符一起使用。 該描述符允許瀏覽器根據設備的分辨率能力決定使用哪個圖像。 看起來是這樣的：

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 代碼語言： HTML、XML （ xml ）

請注意這裡的幾件事。 首先，對於常規的src屬性，我使用最小的圖像，確保移動優先的方法。 接下來， srcset屬性包括圖像的其他幾個版本，分辨率由 1.5x 和 2x 描述符指示。 480 圖像不包含描述符，因為隱含了 1x。 最後，請注意不存在sizes屬性，在這種情況下我不需要。 MDN 解釋了瀏覽器如何選擇圖像：

要了解描述符的工作原理，請記住一個設備像素代表每個 CSS 像素。 所以 1x 是 1:1 的比例，1.5x 是 1.5:1 的比例，以此類推。 您可以在下面的 CodePen 中嘗試一下，但您必須使用不同的設備（或使用模仿它們的工具）才能看到差異。

使用<picture>元素

到目前為止，我討論的用於合併響應式圖像的功能是假設我總是顯示相同的圖像，但尺寸和分辨率不同。 儘管我在所有示例中都使用 CSS 來在用戶調整瀏覽器大小時更改圖像的寬度，但一旦加載頁面，圖像本身實際上從未改變。

<picture>元素是一個 HTML 功能，它允許您根據特定媒體功能的存在提供圖像的替代版本。 這也允許在用戶調整視口大小時切換圖像，並且本質上允許您對圖像進行藝術指導，顯示同一場景的各種不同，但根據設備尺寸進行不同的裁剪或縮放。

例如，中間有一個小物體的廣角鏡頭適用於台式機或平板電腦上的較大設備，但智能手機等較小的設備可以加載相同的裁剪或放大圖像。

這是一些示例代碼，可讓我對圖像進行一些藝術指導：

請注意以下有關代碼的內容：

• <picture>元素接受多個嵌套的<picture>元素作為子元素
• <picture>中的每個<source>元素都使用media屬性來定義觸發使用該源圖像的媒體條件
• <picture>元素接受常規的<img> 子元素，如果不支持<picture> ，瀏覽器會將其識別為後備元素
• <picture>元素上沒有直接屬性（ <picture>只接受 HTML 的全局屬性，沒有任何自己的屬性）

下面的 CodePen 演示了這一點：

如果您在新窗口中打開演示，您可以調整窗口大小以查看圖像變化。 請注意，隨著瀏覽器窗口變小，圖像的主題是如何放大的。 這是一種製作響應式藝術指導圖像的簡單方法，在使用的任何設備上看起來都合適。 當然，這需要更多的工作，但如果您希望您的圖像在任何使用的設備上都有意義，這是值得的。

幫助響應式圖像的工具和服務

有無數可用的工具，包括免費的和商業的，可以幫助實現響應式圖像。 其中一些甚至可以幫助您避免編寫我討論過的大部分代碼。 以下是一些您可能會覺得有用的內容：

重要且方便的是，許多不同的服務可以自動生成響應式圖像，提供不同圖像大小、動態圖像生成 API 等功能。

甚至 WordPress 本身也內置了對響應式圖像的支持（從 4.4 版開始）。

另一個值得研究的工具/服務是 Optimole。 它是由 Themeisle 背後的團隊構建的高級圖像優化和交付工具。 這不僅會減少圖像的磁盤大小而不會影響視覺質量，而且還會通過圖像 CDN 將圖像傳遞給您的網站訪問者。 此圖像傳輸功能的一個方面是您的圖像也將針對在不同設備上的查看進行優化。

有一個免費版本的 Optimole 可用。 它每月最多允許 5,000 次網站訪問，並為您提供所有自動縮放功能、CDN 等。

您對網站上的響應式圖像有何體驗？ 請在下面的評論中告訴我們。

Chris Fitzgerald 和 Karol K. 的佈局和演示。