AMP教學-amp-img圖片

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-img>外面增加一層<amp-anim>
範例語法:
<amp-anim width="400"height="300"src="images/wavepool.gif">
<amp-img placeholderwidth="400"height="300"src="images/wavepool.png">
</amp-img>
</amp-anim>
<amp-anim> 是載入gif檔案,amp-img則是備援檔案

圖片常用屬性統整
屬性 說明
src 圖片網址連結
alt 圖片說明
height and width
圖片寬和高,其數值主要是用來作為寬高比例使用,假如是正方形的響應式圖片,填寫成1x1也可以;
但若是固定尺寸圖片(需使用 layout=fixed配合)則必須寫入需顯示的寬高。
寬高必須填寫,否則圖片無法正常顯示
layout 假如圖片RWD化常用寫法為 layout="responsive"
假如希望圖片固定尺寸 常用寫法為 layout=fixed 
srcset 不同裝置載入不同尺寸圖片
寫法例如 srcset="images/red.jpg 640w, images/green.jpg 320w"
sizes 螢幕寬度指定圖片,建議和srcset配合
 圖片的應用範圍非常廣,也會放在其他元件裡面進行運用(例如圖片輪播),熟知這些在編輯上會更有幫助。

參考:
include_image
art_direction
amp-img
文章關鍵字:AMP AMP教學 AMP網頁

更多文章:

  1. AMP 2020 線上發表重點整理
  2. AMP教學-amp-carousel 輪播
  3. AMP教學-amp-instagram把IG照片放入文章中
  4. AMP的現況與未來趨勢
  5. AMP的SEO效果到底如何?