amp-img

用法

amp-img 是標準 HTML <img> 標籤的 AMP HTML 替代品。AMP 透過 amp-img 提供強大的替代方案。

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

與所有外部擷取的 AMP 資源一樣，amp-img 元件必須預先指定明確的大小 (如 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:<max width to display image> CSS 屬性。為什麼要在容器上設定？因為 layout=responsive 的 amp-img 元素是區塊層級元素，而 <img> 是行內元素。或者，您也可以在 CSS 中為 amp-img 元素設定 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>

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

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

如需更多詳細資訊，請參閱建立反應式 AMP 頁面指南。

圖片的無障礙考量

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

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

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

選擇適當的替代文字

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

屬性

src

此屬性與 <img> 標籤上的 src 屬性類似。對於電子郵件，URL 必須是 https。

AMP for Email 規格不允許在 AMP 電子郵件格式中使用以下屬性。

• [src]
• [srcset]
• srcset
• lightbox
• lightbox-thumbnail-id
• object-fit
• object-position

sizes

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

可以在沒有 srcset 的情況下在 <amp-img> 上使用 sizes，純粹是為了根據符合的媒體查詢設定 width 的內嵌樣式，或是純粹為了推論版面配置 responsive。

如需 sizes 和 srcset 的使用方式，請參閱具有 srcset、sizes 和 heights 的反應式圖片。

alt

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

attribution

一個字串，指示圖片的作者資訊。例如，attribution="CC courtesy of Cats on Flicker"。

height 和 width

圖片的明確大小，AMP 執行階段會使用它來判斷長寬比，而無需擷取圖片。

常用屬性

amp-img 包含擴充至 AMP 元件的常用屬性。

資料屬性

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

樣式設定

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

amp-img {
  background-color: grey;
}

透過將 amp-image-lightbox 元件與 on 動作搭配使用，在電子郵件中的 amp-img 上啟用燈箱效果。

驗證

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