網頁加速實戰：圖片優化與載入優化技巧

網頁圖片過多、結構複雜導致載入緩慢是常見痛點。本文分享圖片處理層面的減肥經驗，助你大幅提升頁面開啟速度。

1. 合併圖片減少 HTTP 請求

瀏覽器對每張圖片都會發出獨立請求。將可能同時出現的小圖合併為一張大圖（CSS Sprites 技巧），再用 background-position 定位顯示，能大幅降低伺服器負載與延遲。

2. 必須指定 width / height 屬性

<img src="test.gif" width="100" height="100" alt="說明">

未指定尺寸時，瀏覽器需下載完圖片才能排版，導致畫面跳動、重繪，甚至重複請求。預先宣告尺寸可讓瀏覽器預留空間，渲染更流暢。

3. 選對格式：JPG vs GIF（現代補充：WebP/AVIF）

• JPG： 適合照片、漸層豐富圖片，可調壓縮品質（70~85% 通常肉眼難辨差異）。
• GIF： 限 256 色，適合簡單圖示、動畫，可減色優化體積。
• 現代建議： 優先使用 WebP（無損/有損皆支援）或 AVIF，體積更小、品質更好，並搭配 <picture> 標籤做相容回退。

4. 啟用漸進式載入

• JPG 存檔選 Progressive（逐步編碼）。
• GIF 存為 Interlaced（交錯） 格式。

讓使用者在圖片未完全下載前即可看到輪廓，提升體感速度。

5. 善用 alt 屬性與文字替代

許多使用者關閉圖片顯示以省流量，alt 文字能確保資訊不遺漏，也有助 SEO 與無障礙存取。

6. 刪除非必要圖片，內容為王

純裝飾性圖片能用 CSS 實現（背景圖、圖示字型、SVG）盡量不用 <img>。記住：網頁核心價值在內容，圖片只是輔助。

下一篇將探討 HTML 結構、表格巢狀與程式碼精簡對速度的影響。