加入圖片
大多數 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 以符合下方的程式碼，然後在 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 如何呈現及配置網頁，以及如何修改版面配置，請參閱「版面配置與媒體查詢」。
-