Day14 - Astro Series: Image Optimization

Astro 系列文第十四日：圖片最佳化

#系列文

前言

通常文件會伴隨著圖片，而圖片可以佔據一個頁面絕大多數的運算資源與流量！你會希望圖片能夠被好好處理避免它們壓垮整個網站的體驗，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 值最高的選擇。

前言

儲存圖片位址 src/ vs public/

轉換與最佳化圖片

總結

延伸閱讀

儲存圖片位址 `src/` vs `public/`