加入圖片
大多數 HTML 標籤可以直接在 AMP 中使用，但某些標籤，例如 <img> 標籤，必須替換為其 AMP 等效標籤。請參閱規格中的 HTML 標籤以取得完整列表。
我們將以 AMP 的方式，使用 <amp-img> 標籤將圖片添加到我們的頁面。複製並貼上以下程式碼到 <body> 中。
<amp-img src="https://source.unsplash.com/random/600x400" width="600" height="400"></amp-img>
AMP 替換某些預設 HTML 標籤的原因如下
- 在資源載入前預先呈現頁面版面配置。這確保了 版面配置穩定性，以提供更好的使用者體驗。
- 控制網路請求，以便資源延遲載入並有效地優先排序資源。
AMP 團隊正在努力在有效的 AMP 頁面上支援原生 <img> 標籤。請參閱 此 GitHub issue 以取得更多資訊和目前進度。
讓你的圖片具有回應式
AMP 強大的優勢之一是其 版面配置系統。AMP 的版面配置系統使得實作回應式圖片變得非常容易，這些圖片會自動調整其大小以適應頁面上的可用空間。最棒的是：它以確保版面配置穩定性並避免內容跳動的方式做到這一點。我們可以透過在 <amp-img> 標籤中加入 layout="responsive" 來快速讓我們的圖片具有回應式。請試著更新你的 amp-img 以符合以下程式碼，然後在 playground 中變更預覽視窗大小。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
現在我們的圖片完美地貼合在視窗中，並在視窗大小變更時放大或縮小！
修改版面配置
雖然非 AMP 頁面可能幾乎完全使用 CSS 來配置元素，但 AMP 為了避免內容版面配置偏移和其他效能原因，強制執行更嚴格的規則。所有 AMP 組件都需要版面配置，且每個版面配置都有不同的尺寸宣告要求。例如，我們的圖片具有 responsive 版面配置，這需要 width 和 height。如果你從 <amp-img> 中移除 width 屬性，playground 將顯示驗證錯誤！但是，別擔心，我們有幾種方法可以解決這個問題！一種方法是將 width 屬性加回去，但另一種方法是變更已定義的 layout 屬性。試著將 “responsive” 更新為 “fixed-height”。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>
這樣一來，我們的驗證錯誤就消失了！這種版面配置的彈性讓我們可以使用我們已知的資訊，例如預先決定的高度但不知道寬度，同時仍然保證終端使用者有良好的體驗！在示範 AMP 版面配置中檢視所有可用的版面配置，並了解 AMP 如何呈現和配置頁面，以及如何在版面配置與媒體查詢中修改版面配置。
-