AMP教學-amp-img圖片

所有的網頁內容幾乎都會使用到圖片，在先前介紹 AMP 是什麼?的文章中已經有大略提過圖片必須使用規範標籤<amp-img>，但圖片使用仍有一些要點，本篇文章將介紹AMP圖片使用常會遇到的狀況與方法

為什麼要用AMP規範的圖片標籤?
AMP不支援用於顯示媒體內容的html，為了在讀入網頁時就了解網頁裡面有多少圖片，並且設定資源載入的優先順序，好讓用戶可以在第一時間看到圖片，而不會有延遲載入的狀況， 因此<amp-img></amp-img>標籤必須放入網頁內。除了圖片<img>外，其他如影片<video>、音效<audio>這類帶有媒體顯示的標籤都無法使用。
amp-img同時還處理了lazy load (延遲下載) 讓未進到視窗內的圖片不會載入，以達最佳效能。
2020年 amp-img也處理CLS ( Cumulative Layout Shift ) 避免網頁內的物件因載入時間差產生版面偏移，在品質分數與使用者體驗上更佳。

如何放入AMP圖片?
AMP圖片不需要像大部分的AMP套件一樣特別載入js連結，只要頭部宣告有AMP和載入基本的js就可以將圖片放入
範例語法:

<amp-img alt="A beautiful sunset"src="images/sunset.jpg"
width="264"height="195"></amp-img>

將原本的<img>換成<amp-img>之外，還要加上結束 </amp-img>，常用的alt、title可以選擇寫或不寫(當然基於優化建議要寫)，但是寬度和高度一定要有，否則amp中無法判斷圖片尺寸比例而一片空白。

響應式圖片
如果想製作響應式圖片只要在<amp-img>裡面加上這一行 layout="responsive"
範例語法:

<amp-img alt="A view of the sea"
src="images/sea.jpg" 
width="900"height="675" 
layout="responsive"></amp-img>

layout="responsive" 會讓圖片等於 width:100%，視包住圖片的外框多大，而出現多大的尺寸。

使用注意

• 表格內的圖片由於有設定 layout="responsive" 等於是css的 width:100%,沒有最小寬度，因此會依據表格欄寬變更大小，如果沒有設定表格寬度的話圖片會縮到最小，建議表格必須設定最小寬度或100%。
• amp裡原本的小圖片如果不希望隨外框放大到100%，建議在圖片上加上最大寬度，例如 style="max-width: 79px; max-height: 79px;"
• 不可以為外框容器元素指定 "display:table"，因為會覆蓋 AMP 圖片的顯示，導致圖片無法顯示

那麼，可以不要用 layout="responsive" 改自行用css來讓圖片響應式嗎?筆者試著寫了下列的css，希望圖片最大只到原始寬度，而不要隨著外框變大

.responsive{ max-width:100%; height:auto; }

套用在amp-img上面結果是效果不佳， 左右寬度雖然有所變化，但是高度無法照比例(會固定成html裡面的height高度)；假如使用width:100% 則是無縮放效果(會被width="900"固定)，如果使用width:100% !important 會有縮放作用，仍無法讓高度有變化, 同時!important也會讓amp出錯，因此無法使用css處理。

想在不同裝置載入不同尺寸圖片
可以利用 srcset ，這是原本在html裡面就有的屬性，可參考 srcset說明
語法範例

<amp-img alt="圖片測試"src="images/red.jpg "
width="640"height="457"
layout="responsive"
srcset="images/red.jpg 640w, images/green.jpg 320w">
</amp-img>

上述srcset 代表螢幕640寬時載入red.jpg 圖檔，320寬時載入green.jpg 圖檔，預設圖檔則是red.jpg

也可以配合螢幕不同，出現不同尺寸，讓srcset和size兩種屬性提供較佳的圖片替換

<amp-img alt="圖片測試 "src="images/red.jpg "
width="640"height="457"
srcset="images/red.jpg 640w, images/green.jpg 320w"
sizes="(min-width: 650px) 50vw, 100vw"></amp-img>

sizes是螢幕寬度為650px或更大時，將元素(圖片)的寬度定義為螢幕寬度 大小的50％。例如，如果螢幕寬度 為800px，則圖片的寬度自動為400px。流覽器透過 srcset選擇相對於400px 的資源，假設設備像素比率為1，在這種情況下為green.jpg（320px）。
※當指定sizes屬性以及width和height時，layout默認為responsive，因此不寫也沒關係

確保圖片不因禁止JavaScript而被隱藏
由於<amp-img> 是使用JavaScript 運行，如果有觀看端使用禁止JavaScript的話，圖片將不會載入；因此可加入 <noscript> 來提供備用圖片。

<amp-img src="images/sunset.jpg"width="264"height="195">
<noscript>
<img src="images/sunset.jpg" width="264" height="195" />
</noscript>
</amp-img>

放入動態圖片
如果你有一張動態圖片(如 gif, webp)，建議使用 amp-anim ，它可以載入GIF之外，還能準備一張靜態的備援圖片。

<amp-anim width="400"height="300"src="images/wavepool.gif">
<amp-img placeholderwidth="400"height="300"src="images/wavepool.png">
</amp-img>
</amp-anim>

 圖片的應用範圍非常廣，也會放在其他元件裡面進行運用(例如圖片輪播)，熟知這些在編輯上會更有幫助。

參考:
include_image
art_direction
amp-img