加入圖片
大多數 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 議題。
讓圖片具有回應式
AMP 的強大優勢之一是其版面配置系統。AMP 的版面配置系統讓您能夠非常輕鬆地實作回應式圖片，讓圖片自動調整大小以符合頁面上的可用空間。最棒的是：它以確保版面配置穩定性並避免內容跳動的方式執行此操作。我們可以透過將 layout="responsive" 新增至 <amp-img> 標記，快速讓圖片具有回應式。請試著更新您的 amp-img 以符合以下程式碼，然後在遊樂場中變更預覽視窗大小。
<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 屬性，遊樂場會顯示驗證錯誤！但是，別擔心，我們有幾種方法可以修正這個問題！一種方法是將 width 屬性加回去，另一種方法是變更已定義的 layout 屬性。試著將 「responsive」 更新為 「fixed-height」。
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" height="400" layout="fixed-height"></amp-img>
瞧，我們的驗證錯誤消失了！這種版面配置的彈性讓我們能夠運用我們所知道的 (例如預先決定的高度但不知道寬度)，同時仍然保證為終端使用者提供良好的體驗！在示範 AMP 版面配置中檢視所有可用的版面配置，並在版面配置與媒體查詢中瞭解 AMP 如何轉譯和版面配置頁面，以及如何修改版面配置。
-