網站圖片優化終極指南：從合法圖源、技術規格到 SEO 的 5 大實戰原則
圖片是網站的靈魂，能瞬間抓住讀者目光；但它同時也可能是拖慢網站速度、引發侵權官司的隱形元兇。一張未經處理的圖片，往往是新手與專業網站經營者之間最顯著的差距。
這篇文章將提供您一套完整的網頁圖片處理標準作業程序 (SOP)，我們將從最基礎的法律問題談起，一路涵蓋到技術優化、SEO 實踐與設計原則，並在文末附上一份可立即使用的檢查清單，確保您發布的每張圖片都專業到位。
原則一：釐清版權與來源，避開法律風險
在討論技術與美感之前，請先問自己最關鍵的問題：「我能合法使用這張圖嗎？」這是一切的基礎，也是最多人忽略的致命風險。
⚠️ 最高風險警告：絕對、絕對不要直接從 Google 搜尋結果或他人網站上「右鍵另存」圖片使用。 這類行為極可能構成侵權，是您應不計代價避免的作法。
合法的圖片來源主要有以下三種：
免費圖庫 (Free Stock Photos)
- 來源範例： Unsplash, Pexels, Pixabay
- 使用原則： 雖然多數標榜可免費商用，但使用前務必再次詳閱其授權條款。部分平台或圖片可能仍有特定限制（如不能用於負面情境、需標示來源等）。建議保留圖片來源網址，以備查核。
付費圖庫 (Paid Stock Photos)
- 來源範例： Getty Images, Shutterstock, Adobe Stock
- 使用原則： 付費購買授權是使用上最有保障、權利最清晰的方式。圖片品質與獨特性通常也遠高於免費圖庫。購買時請注意您所購買的授權類型是 Standard License 還是 Enhanced License。
AI 生成圖片 (AI-Generated Images)
- 來源範例： Midjourney, DALL-E, Google Gemini
- 使用原則： 這是新興領域，版權歸屬的法律規範仍在快速演變。目前主流平台（如 OpenAI, Google）的政策通常允許付費用戶將生成的圖片用於商業用途，但您仍需遵守其內容政策。在商用前，請務必詳閱並理解該 AI 平台最新的服務條款 (Terms of Service)，確保您的使用方式合規。
原則二：選擇正確圖片格式，為網站速度打底
選對格式是優化網頁的第一步，不同的格式有各自的適用場景。
- WebP (現代網頁首選)： Google 開發的現代網頁格式。它能在維持極高品質的同時，提供比 JPG 和 PNG 更小的檔案體積，並且支援透明背景。是目前所有主流瀏覽器都支援的最佳選擇。
- JPG / JPEG (照片專用)： 最適合色彩豐富的攝影照片。它的壓縮率高，但不支援透明背景。
- PNG (去背圖專用)： 最適合需要透明背景 (Transparent Background) 的圖片，例如 Logo、去背圖示等。在同樣畫質下，檔案體積通常比 JPG 大。
- SVG (向量圖形)： 適用於 Logo 和簡單的幾何圖示。它是基於程式碼的向量格式，因此檔案極小，且無論如何放大都不會失真。
總結建議：優先使用 WebP。 如果有特殊限制，照片用 JPG，去背圖用 PNG。
原則三：掌握技術性優化，打造高效能與 SEO
上傳圖片從來不只是「上傳」這個動作，更是一連串重要的優化環節。
語意化的檔案命名
在上傳前，請用簡單的英文或拼音為檔案重新命名，讓檔名本身就具有描述性。這有助於搜尋引擎理解圖片內容。
壞例子：
IMG_8888.jpg
DCIM_0123.webp
好例子：
hsinchu-big-city-mall-food-court.webp
ai-generated-image-usage-policy.webp
不可或缺的替代文字 (Alt Text)
alt 屬性是圖片的文字說明，對 SEO 與無障礙網頁 (Accessibility) 至關重要。當圖片無法顯示時，它會告訴使用者這裡是什麼；同時，它也是您告訴 Google 這張圖片內容最直接的線索。
<img src="..." alt="新竹巨城購物中心的美食街，充滿用餐人潮">延遲載入 (Lazy Loading)
這項技術能讓使用者在瀏覽到圖片可視範圍時，才開始載入該圖片，而非一次載入所有圖片。這可以大幅提升頁面的初次載入速度 (Initial Load Speed)，改善使用者體驗。Blogger 等主流平台大多已內建此功能。
原則四：思考存放策略與美感呈現
技術優化完成後，我們還需要考量圖片的管理與視覺呈現。
圖片存放位置
- 推薦作法 (Blogger/WordPress 用戶)： 直接使用平台內建的上傳功能。圖片會由 Google 或您的主機穩定託管，速度與穩定性都有保障。
- 不推薦作法： 使用 Google 相簿、私人雲端硬碟或來路不明的外部圖床。這些服務的連結可能隨時失效，導致您網站的圖片全部變成「破圖」。
視覺設計原則
- 一致性： 圖片的色調、風格、構圖應與您的品牌形象保持一致。
- 適當留白： 在圖片周圍保留呼吸空間，避免版面過於擁擠。
- 響應式設計 (RWD)： 確保圖片在電腦、手機上都能正常縮放顯示。
- 圖文排版： 靈活運用文字環繞、滿版橫幅等方式，創造豐富的視覺層次。
原則五：網頁圖片處理終極檢查清單 (SOP)
請將這份清單當成您每次上傳圖片前的標準作業流程。
- 1. 版權確認： 我有這張圖的合法使用權嗎？（原則一）
- 2. 格式選擇： 圖片是否已轉換為最適合的格式？（優先 WebP）（原則二）
- 3. 尺寸調整： 圖片的長寬像素是否已裁切成顯示所需的大小？（例如，文章內頁圖寬度 800px 即可，無需使用 4000px 的原圖）
- 4. 品質壓縮： 是否已透過壓縮工具（如 Squoosh, TinyPNG）在不嚴重影響畫質的前提下，盡可能縮小檔案體積 (KB)？
- 5. 檔名語意化： 檔案名稱是否已用英文或拼音描述其內容？（原則三）
- 6. ALT 文字必填： 是否已為圖片填寫了精準的替代文字？（原則三）
- 7. 存放位置： 圖片是否是透過網站後台直接上傳？（原則四）
- 8. 風格統一： 圖片的視覺風格是否與網站整體設計搭配？（原則四）