加入圖片
大多數 HTML 標記可以直接在 AMP 中使用，但某些標記 (例如 <img> 標記) 必須替換為其 AMP 對應標記。請參閱規格中的 HTML 標記以取得完整清單。
我們將使用 <amp-img> 標記，以 AMP 的方式將圖片新增至頁面。複製並貼上以下程式碼到 <body> 中。
<amp-img src="https://source.unsplash.com/random/600x400" width="600" height="400"></amp-img>
AMP 基於以下原因替換某些預設 HTML 標記
- 在資源載入之前預測頁面的版面配置。這可確保版面配置穩定性，以獲得更佳的使用者體驗。
- 控制網路請求，以便延遲載入資源並有效率地排定資源優先順序。
AMP 團隊正努力在有效的 AMP 頁面上支援原生 <img> 標記。請參閱這個 GitHub 議題以取得更多資訊和目前進度。
讓你的圖片具有回應式設計
AMP 的強大優勢之一是其版面配置系統。AMP 的版面配置系統讓您非常容易實作回應式圖片，這些圖片會自動調整大小以符合頁面上可用的空間。最棒的是：它以確保版面配置穩定性並避免內容跳動的方式執行此操作。我們可以將 layout="responsive" 新增至 <amp-img> 標記，快速讓圖片具有回應式設計。請試著更新您的 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 如何轉譯和配置頁面，以及如何在版面配置與媒體查詢中修改版面配置。
-