HTML響應(yīng)式圖片指南：代碼片段速覽

本指南主要講解響應(yīng)式圖片的HTML語法（以及少量CSS）。響應(yīng)式圖片語法旨在根據(jù)規(guī)則和環(huán)境從多個選項中提供一張圖片。響應(yīng)式圖片有兩種形式，分別用於不同的目的：

如果你的唯一目標(biāo)是……

提升性能

那麼你需要……

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174381805452081.jpg" class="lazy" alt="HTML Responsive Images Guide">

在這裡，我們使默認(rèn)值（ src ）成為圖片的“低分辨率”（1×）副本。默認(rèn)使用最小/最快資源通常是明智的選擇。我們還提供了一個2倍版本。如果瀏覽器知道它在更高像素密度顯示器上（2x部分），它將使用該圖片。

<img src="/static/imghw/default1.png" data-src="baby-lowres.jpg" class="lazy" alt="HTML響應(yīng)式圖像指南" srcset="
    baby-high-1.jpg 1.5x,
    baby-high-2.jpg 2x,
    baby-high-3.jpg 3x,
    baby-high-4.jpg 4x,
    baby-high-5.jpg 100x
  ">

你可以根據(jù)需要添加任意數(shù)量的像素密度變體。

雖然這很酷也很有用，但x描述符只佔響應(yīng)式圖片使用的一小部分。為什麼？它們只允許瀏覽器根據(jù)一項內(nèi)容進行調(diào)整：顯示像素密度。然而，很多時候，我們的響應(yīng)式圖片位於響應(yīng)式佈局中，圖片的佈局大小會隨著視口的變化而縮小和拉伸。在這些情況下，瀏覽器需要根據(jù)兩項內(nèi)容做出決策：屏幕的像素密度和圖片的佈局大小。這就是w描述符和sizes屬性的用武之地，我們將在下一節(jié)中介紹。

使用srcset / w sizes

這是好東西。這大約佔網(wǎng)絡(luò)上響應(yīng)式圖片使用量的85%。我們?nèi)栽谔峁┫嗤瑘D片的多個副本，並讓瀏覽器選擇最合適的副本。但是，我們不是使用像素密度（x）來標(biāo)記它們，而是使用w描述符來標(biāo)記它們的資源寬度。因此，如果baby-s.jpg是300×450，我們將其標(biāo)記為300w。

像這樣使用帶有寬度（w）描述符的srcset意味著它需要與sizes屬性配對，以便瀏覽器知道圖片將在多大空間內(nèi)顯示。如果沒有此信息，瀏覽器將無法做出明智的選擇。

創(chuàng)建準(zhǔn)確的sizes屬性

創(chuàng)建sizes屬性可能會很棘手。 sizes屬性描述了圖片在你特定網(wǎng)站的佈局中將顯示的寬度，這意味著它與你的CSS密切相關(guān)。圖片渲染的寬度取決於佈局，而不僅僅是視口！

讓我們來看一個具有三個斷點的相當(dāng)簡單的佈局。這裡有一個演示視頻：（此處應(yīng)插入視頻鏈接，原文缺失）

斷點在CSS中使用媒體查詢來表達：

 body {
  margin: 2rem;
  font: 500 125% system-ui, sans-serif;
}
.page-wrap {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 200px;
  grid-template-areas:
    "header header"
    "main aside"
    "footer footer";
}

@media (max-width: 700px) {
  .page-wrap {
    grid-template-columns: 100%;
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
  }
}
@media (max-width: 500px) {
  body {
    margin: 0;
  }
}

圖片在每個斷點處的尺寸都不同。以下是影響圖片在最大斷點（當(dāng)視口寬度大於700像素時）佈局寬度的所有部分的細分：

• 在最大尺寸下：有9rem的顯式間距，因此圖片的寬度為calc(100vw - 9rem - 200px) 。如果該列使用fr單位而不是200px，我們在這裡就會有點麻煩。
• 在中等尺寸下：側(cè)邊欄被放置在下方，因此需要考慮的間距較少。儘管如此，我們?nèi)匀豢梢允褂?code>calc(100vw - 6rem)來計算邊距和填充。
• 在最小尺寸下：正文邊距被移除，因此calc(100vw - 2rem)就足夠了。

呼！說實話，我覺得這有點難以思考，並且在創(chuàng)建這個的過程中犯了很多錯誤。最後，我得到了這個：

<img ...="" sizes="
    (max-width: 500px) calc(100vw - 2rem), 
    (max-width: 700px) calc(100vw - 6rem),
    calc(100vw - 9rem - 200px)
  ">

一個sizes屬性，它為瀏覽器提供了所有三個斷點下圖片的寬度，並考慮了佈局網(wǎng)格以及所有影響圖片寬度的周圍間隙、邊距和填充。

等等！隆隆聲！ ???這仍然是錯誤的。我不明白為什麼，因為對我來說，這看起來像是100%描述了CSS佈局中發(fā)生的事情。但它是錯誤的，因為Martin Ausw?ger的RespImageLint如是說。在隔離的演示上運行該工具報告沒有問題，除了sizes屬性對於某些視口大小是錯誤的，並且應(yīng)該是：

<img ...="" sizes="
    (min-width: 2420px) 2000px, 
    (min-width: 720px) calc(94.76vw - 274px), 
    (min-width: 520px) calc(100vw - 96px), 
    calc(100vw - 32px)
  ">

我不知道這是如何計算的，它完全無法手動維護，但它是準(zhǔn)確的。 Martin的工具以編程方式多次調(diào)整頁面大小，並寫出一個sizes屬性，該屬性描述了在各種視口大小下觀察到的圖片的實際寬度。它是計算機做的數(shù)學(xué)運算，所以它是正確的。因此，如果你想要一個超級精確的sizes屬性，我建議先放一個錯誤的屬性，運行此工具，然後復(fù)制正確的屬性。

要更深入地了解所有這些，請查看Eric Portis的w描述符和sizes ：幕後。

對sizes更寬鬆一些

另一種選擇是使用馬蹄鐵和手榴彈方法?的sizes （或者換句話說，接近計數(shù)）。這強烈建議。

例如， sizes="96vw"表示：“這張圖片在頁面上會很大——幾乎是全寬——但邊緣總會有少量填充，所以不是完全的?！被蛘?code>sizes="(min-width: 1000px) 33vw, 96vw"表示：“這張圖片在大屏幕上採用三列佈局，否則接近全寬。”在實用性方面，這可能是一個合理的解決方案。

你可能會發(fā)現(xiàn)，一些自動響應(yīng)式圖片解決方案無法知道你的佈局，因此會進行猜測——例如sizes="(max-width: 1000px) 100vw, 1000px" 。這只是說，“嘿，我們不太了解這個佈局，但我們打算試一下，最壞的情況是圖片是全寬，讓我們希望它永遠不會渲染超過1000像素”。

抽象sizes

我相信你可以想像，不僅很容易弄錯sizes ，而且隨著網(wǎng)站佈局的變化，它也會隨著時間的推移而變得錯誤。你最好使用模板語言或內(nèi)容過濾器來抽象它，以便你可以更容易地更改網(wǎng)站上所有圖片的值。

我實際上是在談?wù)撘淮卧谝粋€變量中設(shè)置sizes值，然後在網(wǎng)站上的許多不同的<img alt="HTML響應(yīng)式圖像指南" >元素中使用該變量。原生HTML不提供該功能，但任何後端語言都提供；例如，PHP常量、Rails配置變量、用於全局狀態(tài)變量的React上下文API或模板語言（如Liquid）中的變量都可以用來抽象sizes 。

 <?php // 在全局範(fàn)圍內(nèi)$my_sizes = "";
?>
<img alt="" sizes="<?php echo $my_sizes; ?>" src="" srcset="">

“瀏覽器選擇”

現(xiàn)在我們已經(jīng)有了sizes屬性，瀏覽器就知道圖片將渲染的尺寸（或接近該尺寸），並且可以發(fā)揮其魔力。也就是說，它可以進行一些數(shù)學(xué)運算，這些運算考慮了屏幕的像素密度以及圖片將渲染的尺寸，然後選擇最合適的圖片。

起初，數(shù)學(xué)運算相當(dāng)簡單。假設(shè)你即將在一個寬度為1200像素的視口中顯示一個寬度為40vw的圖片，在一個2倍像素密度屏幕上。完美的圖片寬度應(yīng)該是960像素，因此瀏覽器將尋找最接近的圖片。瀏覽器將始終根據(jù)視口和像素密度情況以及從sizes屬性中知道的內(nèi)容計算它首選的目標(biāo)大小，並將該目標(biāo)與它在srcset中擁有的內(nèi)容進行比較以進行選擇。然而，瀏覽器如何進行選擇可能會有點奇怪。

如果瀏覽器選擇這樣做，它可能會將更多內(nèi)容納入此等式。例如，它可以考慮用戶的當(dāng)前網(wǎng)絡(luò)速度，或者用戶是否啟用了某種“數(shù)據(jù)節(jié)省”偏好設(shè)置。我不確定是否有任何瀏覽器實際執(zhí)行此類操作，但如果他們願意，他們可以自由執(zhí)行，因為規(guī)範(fàn)就是這樣編寫的。有些瀏覽器有時會選擇從緩存中提取。如果數(shù)學(xué)運算表明它們應(yīng)該使用300像素的圖片，但它們已經(jīng)在本地緩存中擁有600像素的圖片，它們將直接使用該圖片。聰明。為此類事情留出空間是srcset / sizes語法的優(yōu)勢。這也是為什麼你總是使用相同圖片的不同尺寸在srcset中：你無法知道將選擇哪個圖片。這是瀏覽器的選擇。

這很奇怪。瀏覽器難道不已經(jīng)知道這些東西了嗎？

你可能在想，“嗯，為什麼我必須告訴瀏覽器圖片將渲染多大，它難道不知道嗎？”好吧，它知道，但只有在它下載了你的HTML和CSS並佈置了所有內(nèi)容之後。 sizes屬性與速度有關(guān)。它為瀏覽器提供了足夠的信息，以便在它看到你的<img alt="HTML響應(yīng)式圖像指南" >標(biāo)籤時做出明智的選擇。

<img data-sizes="auto" data-srcset="
    responsive-image1.jpg 300w,
    responsive-image2.jpg 600w,
    responsive-image3.jpg 900w">

現(xiàn)在你可能在想，“但是延遲加載的圖片呢？”（也就是說，在請求延遲加載的圖片時，佈局已經(jīng)完成，瀏覽器已經(jīng)知道圖片的渲染大?。?。好吧，好主意！ Alexander Farkas的lazysizes庫會在延遲加載時自動寫出sizes屬性，並且正在討論如何原生為延遲加載的圖片進行自動sizes 。

sizes可以大於視口

關(guān)於sizes的快速說明。假設(shè)你的網(wǎng)站上有一個效果，這樣當(dāng)點擊圖片時，圖片會“放大”。它可能會擴展以填充整個視口，或者它可能會放大更多，以便你可以看到更多細節(jié)。過去，我們可能不得不點擊切換src以切換到更高分辨率的版本。但是現(xiàn)在，假設(shè)更高分辨率的源已經(jīng)在srcset中，你只需將sizes屬性更改為一個很大的值，例如200vw或300vw，瀏覽器應(yīng)該會自動為你下載超高分辨率的源。 Scott Jehl有一篇關(guān)於此技術(shù)的文章。 （此處應(yīng)插入文章鏈接，原文缺失）

(其餘部分內(nèi)容過長，建議分段處理或根據(jù)需要選擇性翻譯)

以上是HTML響應(yīng)式圖像指南的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！