amp-img

用法

AMP HTML 提供的 img 標記替代品。透過 amp-img，AMP 提供了強大的替代方案。

AMP 可以根據可視區域位置、系統資源、連線頻寬或其他因素，選擇延遲或優先載入資源。amp-img 元件允許執行階段以這種方式有效地管理圖片資源。

amp-img 元件，與所有外部擷取的 AMP 資源一樣，必須預先給定明確的尺寸 (例如 width / height)，以便可以在不擷取圖片的情況下得知長寬比。實際的版面配置行為由 layout 屬性決定。

在以下範例中，我們顯示一個圖片，該圖片透過設定 layout=responsive 來回應可視區域的大小。圖片會根據 width 和 height 指定的長寬比進行伸縮。

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

如果 amp-img 元件請求的資源載入失敗，則空間將為空白，除非提供了 fallback (後備) 子項。後備僅在初始版面配置時執行，之後的事後 src 變更 (例如透過調整大小 + srcset) 將不會有後備，以考量效能影響。

指定備用圖片

在以下範例中，如果瀏覽器無法載入圖片，則會改為顯示後備圖片 (此處我們使用內嵌 SVG 作為後備)

<amp-img
  alt="Misty road"
  width="550"
  height="368"
  src="image-does-not-exist.jpg"
>
  <amp-img
    alt="Misty road"
    fallback
    width="550"
    height="368"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMSAxIDggNCI+PGltYWdlIGZpbHRlcj0idXJsKCNibHVyKSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjYiIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2UvcG5nO2Jhc2U2NCxpVkJPUncwS0dnb0FBQUFOU1VoRVVnQUFBQW9BQUFBR0NBWUFBQUQ2OEEvR0FBQUFBWE5TUjBJQXJzNGM2UUFBQUVSbFdFbG1UVTBBS2dBQUFBZ0FBWWRwQUFRQUFBQUJBQUFBR2dBQUFBQUFBNkFCQUFNQUFBQUJBQUVBQUtBQ0FBUUFBQUFCQUFBQUNxQURBQVFBQUFBQkFBQUFCZ0FBQUFEK2lGWDBBQUFBcjBsRVFWUUlIVDJQU1FxRlFBeEVYN2VpNG9BYkVRV3Y0TVlMZUhLdjQwSVV3UW5uL25ZdmZxQ29JcWxRaVVpU1JQbStqNVFTei9PNDd4dkhjUmlHZ2I3dnNTeUw2N3FRNy91YW9XNHN5L0kzYXYwOGp6SHlsZFNHZmQrcDY5cXcxbTNia21VWlFnalQweXlpS0ZKNlE4ZVdaVWxSRklSaGFLS2JwdUU4VCtaNVJyaXVxejZna2VjNVZWVXhqaVBUTkpremp1TmcyemJzN3htQ0lDQk5VK0k0cHVzNmxGS3M2NHB0MjBicnhCODZ4VmdkUHdJV2NRQUFBQUJKUlU1RXJrSmdnZz09Ii8+PGZpbHRlciBpZD0iYmx1ciI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iLjUiIC8+PC9maWx0ZXI+PC9zdmc+"
  >
  </amp-img>
</amp-img>

可以使用 CSS 選取器和元素本身的樣式來設定預留位置背景顏色或其他視覺效果。

可以使用標準 HTML 實作其他圖片功能，例如標題 (例如，figure 和 figcaption)。

將圖片放大到最大寬度

如果您希望圖片在調整視窗大小時縮放，但縮放到最大寬度 (因此圖片不會超出其寬度)

1. 為 <amp-img> 設定 layout=responsive。
2. 在圖片的容器上，指定 max-width:<要顯示圖片的最大寬度> CSS 屬性。為什麼在容器上？具有 layout=responsive 的 amp-img 元素是區塊層級元素，而 <img> 則是行內元素。或者，您可以在 amp-img 元素的 CSS 中設定 display: inline-block。

responsive 和 intrinsic 版面配置之間的差異

responsive 和 intrinsic 版面配置都會建立自動縮放的圖片。主要差異在於 intrinsic 版面配置使用 SVG 圖片作為其縮放元素。這會使其行為與標準 HTML 圖片相同，同時保留瀏覽器在初始版面配置時知道圖片大小的優點。 intrinsic 版面配置將具有內在尺寸，並將擴充浮動 div，直到達到傳遞至 amp-img 的 width 和 height 屬性定義的圖片大小 (不是圖片的自然大小) 或 CSS 限制 (例如 max-width)。 responsive 版面配置將在浮動 div 中呈現 0x0，因為它的大小取自父項，而父項在浮動時沒有自然大小。

設定固定尺寸的圖片

如果您希望圖片以固定尺寸顯示

1. 為 <amp-img> 設定 layout=fixed。
2. 指定 width 和 height。

設定長寬比

對於回應式圖片，width 和 height 不需要與 amp-img 的確切寬度和高度相符；這些值只需要產生相同的長寬比即可。

例如，您可以只指定 width="1.33" 和 height="1"，而不是指定 width="900" 和 height="675"。

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="1.33"
  height="1"
  layout="responsive"
>
</amp-img>

為不同的螢幕解析度設定多個來源檔案

srcset 屬性應用於提供相同圖片的不同解析度，這些解析度都具有相同的長寬比。瀏覽器將根據螢幕解析度和使用者裝置的寬度，自動從 srcset 中選擇最合適的檔案。

相反地，media 屬性顯示或隱藏 AMP 元件，應在設計回應式版面配置時使用。顯示具有不同長寬比的圖片的適當方法是使用多個 <amp-img> 元件，每個元件都有一個 media 屬性，該屬性符合顯示每個執行個體的螢幕寬度。

請參閱關於建立回應式 AMP 頁面的指南，以取得更多詳細資訊。

為尺寸未知的圖片維持長寬比

AMP 版面配置系統需要在擷取圖片之前預先知道圖片的長寬比；但是，在某些情況下，您可能不知道圖片的尺寸。若要顯示尺寸未知的圖片並維持長寬比，請將 AMP 的 fill (填滿) 版面配置與 object-fit CSS 屬性結合使用。如需更多資訊，請參閱如何支援尺寸未知的圖片範例。

圖片的無障礙考量

<amp-img> 允許您包含動畫圖片，例如 GIF 或 APNG。但是，請記住，以這種方式包含的動畫通常無法由使用者暫停/停止。根據圖片及其大小，這可能是輕微的分心，或對於某些使用者群體來說是主要問題 - 特別是如果動畫包含快速閃爍的顏色變化。一般而言，我們建議完全避免使用動畫圖片，除非您確定它們不會產生負面影響。

<amp-img> 也可用於包含文字圖片。在可能的情況下，通常最好使用實際的 HTML 文字，而不是文字圖片。如果必須使用文字圖片 (例如，因為公司識別/品牌指南強制要求使用特定字型)，請確保 alt 準確地反映圖片中可見的文字。

最後，如果圖片包含文字或重要的非文字元素 (例如長條圖、資訊圖表、圖示)，這些元素對於理解圖片的內容至關重要，請確保它們具有足夠的色彩對比度。請參閱 web.dev 色彩和對比度無障礙功能 以取得簡介 (主要圍繞文字對比度)，並參閱 Knowbility：探索 WCAG 2.1 — 1.4.11 非文字對比度 以取得更多詳細資訊。

選擇合適的替代文字

如需關於如何為圖片選擇合適替代文字的建議和說明，您可以參考 W3C WAI 教學課程「alt 決策樹」 和 HTML5.2 為圖片提供替代文字的要求。

屬性

src

此屬性類似於 img 標記上的 src 屬性。值必須是指向可公開快取圖片檔案的 URL。快取提供者在擷取 AMP 檔案時可能會重寫這些 URL，以指向圖片的快取版本。

srcset

與 img 標記上的 srcset 屬性相同。對於不支援 srcset 的瀏覽器，<amp-img> 將預設使用 src。如果僅提供 srcset 而未提供 src，則將選擇 srcset 中的第一個 URL。

sizes

AMP sizes 屬性的值是一個尺寸運算式，它根據目前的視窗大小，選取與媒體查詢對應的定義尺寸。此外，AMP 會為元素設定 width 的內嵌樣式。如果提供了 srcset 屬性，則當未指定 sizes 屬性時，<amp-img> 將為底層 <img> 自動產生 HTML5 定義的 sizes 屬性。如果未提供 srcset 屬性，則不會為底層 <amp-img> 自動產生 sizes 屬性。

可以在沒有 srcset 的 <amp-img> 上使用 sizes，僅用於根據符合的媒體查詢設定 width 的內嵌樣式，或僅用於推斷版面配置 responsive。

請參閱具有 srcset、sizes 和 heights 的回應式圖片，以瞭解 sizes 和 srcset 的用法。

alt

替代文字字串，類似於 img 上的 alt 屬性。每當您使用 amp-img 時，請務必提供適當的替代文字。否則，輔助技術 (例如螢幕閱讀器) 會將元素宣告為「未標記的圖形」或類似的內容。如果圖片純粹是裝飾性的，並且不傳達任何內容，則可以使用空的 alt="" - 在這種情況下，輔助技術將會直接忽略/不宣告該元素。

attribution (出處)

指示圖片出處的字串。例如，attribution="CC courtesy of Cats on Flicker" (出處為 Flicker 上的貓，CC 授權)。

height (高度) 和 width (寬度)

圖片的明確尺寸，AMP 執行階段使用該尺寸來確定長寬比，而無需擷取圖片。

通用屬性

amp-img 包含通用屬性，這些屬性已擴充到 AMP 元件。

資料屬性

資料屬性會從 amp-img 元素複製到元件建立的內部 img 元素。

樣式

amp-img 可以透過 CSS 屬性直接設定樣式。例如，設定灰色背景預留位置可以透過以下方式實現

amp-img {
  background-color: grey;
}

驗證

請參閱 AMP 驗證器規格中的 amp-img 規則。