前言

通常文件會伴隨著圖片，而圖片可以佔據一個頁面絕大多數的運算資源與流量！你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗，Astro 預設自帶相關的元件與方法幫助你處理這些事務。

儲存圖片位址 src/ vs public/

有兩個地方可以放置專案的圖片： src 或 public 資料夾，差別在於 Astro 只會對來自 src 的圖片進行轉換或最佳化，因此只要希望圖片經過處理都建議放置在 src 資料夾內，反之則可以存放在 public/ 資料夾內。

轉換與最佳化圖片

透過提供合適的圖片尺寸、加載策略、格式或品質可以有效的提高頁面的加載效率，Astro 內建 <Image /> 元件就是為了協助我們達成這個目的。首先可以先從 astro:assets 來引入該元件，並且應用在模板中。

---
import { Image } from 'astro:assets'
import myImage from '../assets/image.png'
---

<Image src={myImage} alt="圖片的 alt 註解" />

透過 <Image /> 元件將會產生以下結果，可以發現圖片預設自動添加了不少屬性：

<img
  src="/_astro/image.hash.webp"
  width="1600"
  height="900"
  decoding="async"
  loading="lazy"
  alt="圖片的 alt 註解"
/>

這些屬性的預設值並不能更改，但仍然可以自創元件去封裝設定它們，具體來說有以下幾點屬性：

• src (必要)：來源。該屬性基於圖片存放的位置也會有所不同。

  • 本地圖片在 src/ 資料夾：你需要 import 圖片並透過定義好的名稱在 src 屬性當中。

  ---
  import { Image } from 'astro:assets';
  import myImportedImage from `../assets/my-local-image.png`
  ---
  <Image src={myImportedImage} alt="descriptive text" />
  

  • 本地圖片在 public/ 資料夾

  ---
  import { Image } from 'astro:assets';
  ---
  <Image
    src="/images/my-public-image.png"
    alt="descriptive text"
    width="200"
    height="150"
  />
  

  • 遠端圖片

  ---
  import { Image } from 'astro:assets';
  ---
  <Image
    src="https://example.com/remote-image.jpg"
    alt="descriptive text"
    width="200"
    height="150" />
  

• alt (必要)：替代文字。提供具描述性的圖片替代文字是強制的，如果圖片是純粹為了裝飾用途可以傳入空字串，這樣螢幕閱讀器或其他網頁輔助軟體便知道該圖片可以略過。

• width 和 height：寬和高。當圖片來源來自 public/ 或遠端圖片 Astro 則無法分析這些圖片的詳細屬性因此需要額外補充來避免布局偏移問題。

• format：圖片格式，預設將會產生並使用 .webp 格式的圖片。

• quality

  • 程度 low、mid、high、max（可在不同格式間標準化程度）
  • 一個從 0 到 100 的數字（不同格式之間有不同的解釋）

• 額外屬性（所有 <img> 接受的屬性）

總結

透過對圖片一連串的處理像是：撰寫替代文字、描述寬高、懶加載、提供合適的尺寸與格式、大小，正確的處理圖片絕對是最佳化網頁體驗 CP 值最高的選擇。

延伸閱讀

(目前 iT 邦不支援 Astro 語法的高光 😅，因此歡迎到我的部落格閱讀本系列相關文章，正同步更新中！)

• Images - Astro DOCS
• 所有最佳化網頁圖片的技巧都寫在這了！ - Webdong