amp-img

用法

AMP HTML 的一般 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> 則是內嵌元素。或者，您也可以在 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>

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

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 教學課程「替代文字決策樹」 和 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。

如需 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 元素。

樣式設定

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

amp-img {
  background-color: grey;
}

驗證

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