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 教學課程「An alt Decision Tree」 和 HTML5.2 Requirements for providing text to act as an alternative for images。

屬性

src

此屬性類似於 img 標籤上的 src 屬性。值必須是指向可公開快取的圖片檔案的網址。快取供應商可能會在擷取 AMP 檔案時重新編寫這些網址，以指向圖片的快取版本。

srcset

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

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 規則。