使用 amp-img 標籤讀入圖片

標籤: AMP amp-anim amp-img

要在 AMP 的頁面裡放入圖片,要使用 amp-img 的標籤,除了 img 外,像 video 與 audio 標籤在 amp 頁面內也都無法直接使用:

<amp-img
  alt="exmple"
  src="exmple.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>

不同於 img 標籤,amp-img 標籤需要有封閉,一定要有長跟寬不然沒辦法顯示圖片,另外這邊加了 layout="responsive" 的屬性,這樣圖片就可以隨著容器大小調整了。

amp-img 也自動幫網頁做了 lazyload 的效果。

如果要在頁面裡放入會動的圖如 gif 或 apng,則需要使用 amp-anim 的標籤,而且還能使用一張靜態的圖備援。

<amp-anim width="400" height="300" src="my-gif.gif">
  <amp-img placeholder width="400" height="300" src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

參考:
amp-img
amp-anim