我是吳承學，做 SEO 二十年。如果要我挑一個「投入不多、回收卻很明顯」的優化項目，圖片一定排在前面。太多網站把幾 MB 的原圖直接丟上首屏，載入慢、版面又跳來跳去，使用者還沒看到內容就關掉了。這篇我想把圖片優化拆成格式、檔案大小、尺寸標註、延遲載入、檔名與替代文字幾塊，講我實際在做的判斷。這些項目乍看瑣碎，但每一項都同時牽動載入速度、使用者體驗與搜尋引擎對圖片的理解，處理得好，等於一次改善好幾個面向。我會盡量給出可以直接照做的原則，而不是空泛的方向。

1. 選對格式，檔案先瘦一半

圖片優化的第一步是格式。同一張圖，用對格式跟用錯格式，檔案大小可以差上一大截，而且肉眼幾乎看不出畫質差異。這是我每次稽核圖片時最先看的地方。

1.1 WebP 與 AVIF 該怎麼選

WebP 在相同畫質下，檔案通常比傳統的 JPEG 或 PNG 小不少，且瀏覽器支援度已經相當普及，是目前最穩妥的預設選擇。AVIF 壓縮效率又更好一些，畫質與檔案大小的平衡更漂亮，但編碼較耗時、部分舊環境支援度稍弱。我的建議是以 WebP 為主力，對首屏那幾張最吃頻寬的關鍵大圖，再評估是否額外提供 AVIF 版本。

1.2 用 picture 標籤做優雅降級

為了兼顧新格式的效率與舊瀏覽器的相容，我常用 <picture> 讓瀏覽器自己挑能吃的格式，挑不到就退回 JPEG。這樣既拿到新格式的好處，又不會讓少數舊環境的使用者看到破圖。

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg" width="1200" height="630" alt="產品應用情境示意">
</picture>

1.3 一張表快速決定格式

圖片類型	建議格式	理由
照片、情境圖	WebP（首屏可加 AVIF）	壓縮效率高，畫質損失難察覺
需要透明背景的元素	WebP	支援透明，比 PNG 小
圖示、線條、色塊	SVG	向量檔小且可無限縮放
動態圖	WebP 或影片格式	比傳統動圖檔案小很多

2. 把檔案大小控制在該有的範圍

選對格式之後，還要控制實際輸出的大小。我看過不少網站已經轉成 WebP，但因為沒有壓縮、也沒有依顯示尺寸縮圖，單張圖還是好幾百 KB。這裡有幾個我固定會檢查的點。

2.1 內文圖控制在 200KB 以內

對一般內文圖片，我會把單張控制在 200KB 以下作為參考線，首屏的主視覺大圖可以放寬一些，但也要盡量壓到合理範圍。超過這個量級的圖，通常是沒有依實際顯示尺寸縮圖，或壓縮品質設得太高。把品質參數調到視覺可接受的臨界，檔案往往能再少三、四成。

2.2 不要用超大原圖硬塞小版位

一個很常見的浪費，是版位只顯示 400 像素寬，卻載入一張 3000 像素寬的原圖，讓瀏覽器縮小顯示。使用者付了頻寬，卻看不到那些多餘像素。我建議依照實際顯示的最大尺寸準備圖片，並用 srcset 針對不同螢幕提供不同解析度，讓裝置各取所需。

<img src="/images/card-800.webp"
     srcset="/images/card-400.webp 400w,
             /images/card-800.webp 800w"
     sizes="(max-width: 600px) 400px, 800px"
     width="800" height="600" alt="服務流程說明圖">

2.3 我在製造業客戶身上看到的落差

我曾接手一個工業設備產業的網站，首頁光是幾張產品照就吃掉將近 4MB。他們的圖其實已經是 WebP，問題出在每張都是直接從攝影原檔匯出、沒有依版位縮圖。我們把顯示尺寸重新裁切、品質參數調整過，同樣視覺呈現下首頁圖片總量降到原本的四分之一左右，行動裝置上的載入體感差異相當明顯。這件事沒有動到任何設計，純粹是輸出流程的調整。我後來把這套縮圖與壓縮的規則寫進他們的上稿流程，讓行銷團隊上傳圖片時系統自動處理，就不必每次都靠工程師手動介入，長期維護也輕鬆很多。

另一個容易被忽略的細節是圖片的色彩模式與中繼資料。攝影原檔常帶有相機型號、拍攝參數、色彩描述檔等資訊，這些對網頁顯示多半用不到，卻會增加檔案體積。輸出網頁用圖時把非必要的中繼資料清掉、統一色彩模式，單張圖又能再省下一些容量。這些調整單看每一張影響有限，但整個網站累積起來，對頻寬與載入時間的貢獻並不小。

3. 標好尺寸，畫面就不會亂跳

圖片載入造成的版面位移，是使用者體驗的隱形殺手。你正要點按鈕，圖片突然載入把內容往下推，手指就按錯了。這種累積的位移會直接反映在體驗指標上，而解法其實很單純。

3.1 為每張圖標上 width 與 height

在 <img> 上明確寫出 width 與 height，瀏覽器就能在圖片還沒下載完前，先保留正確比例的空間，避免載入後內容突然跳動。這個屬性只能填純數字，不能寫成帶單位的值。我稽核時常抓到寫成 width="80px" 的錯誤，這在嚴格解析下會被視為無效。

正確：<img src="/images/icon.webp" width="80" height="80" alt="聯絡我們">
錯誤：<img src="/images/icon.webp" width="80px" height="80px" alt="聯絡我們">

3.2 用 CSS 維持響應式比例

標了 width 與 height 後，再用一小段 CSS 讓圖片在不同螢幕上等比縮放，就能同時拿到「不位移」與「響應式」兩個好處。關鍵是讓瀏覽器從一開始就知道長寬比。

img { max-width: 100%; height: auto; }

4. 延遲載入與命名，把細節做到位

前面處理的是每張圖本身，這一段談的是「什麼時候載入」以及「怎麼命名」。這兩件事一個影響速度，一個影響圖片被理解的程度。

4.1 首屏之外才用 lazyload

延遲載入能讓還沒滾動到的圖片先不下載，替首屏省下頻寬。原生的做法是加上 loading="lazy"。但我要特別提醒，首屏、尤其是最大的那張主視覺圖，反而不該延遲載入，否則會拖慢它出現的時間。首屏關鍵圖可以用 loading="eager" 或搭配預先載入，讓它盡早顯示。

首屏主圖：<img src="/images/hero.webp" loading="eager" width="1200" height="630" alt="首頁主視覺">
下方圖片：<img src="/images/section.webp" loading="lazy" width="800" height="500" alt="功能區塊說明">

4.2 語意化檔名比你想的重要

檔名是搜尋引擎理解圖片的線索之一。用 seo-audit-flow.webp 這種能看出內容的英文命名，會比 img_0012.webp 或一串亂碼好得多。命名時用小寫、以連字號分隔、避免空白與大寫，維持一致風格。這件事花不了多少力氣，卻是很多網站直接忽略的免費機會。

4.3 alt 要自然描述，不是塞關鍵字

替代文字讓搜尋引擎理解圖片內容，也讓使用螢幕閱讀器的訪客知道畫面上是什麼。好的 alt 是自然的一句描述，例如「工程師檢視伺服器機櫃的照片」，而不是堆疊一串關鍵字。純裝飾用、不承載資訊的圖片，可以留成 alt=""，讓輔助技術略過它。我看過不少網站把 alt 當成關鍵字倉庫，一張圖塞進七八個商業詞，這種寫法對排名沒有幫助，還可能被判定為濫用，同時讓依賴螢幕閱讀器的使用者聽到一長串沒有意義的字詞。描述時想像你要用一句話告訴看不到畫面的人這張圖在講什麼，通常就會寫得剛剛好。下表是我常用的對照：

情況	建議寫法
承載資訊的內容圖	自然描述圖片主題，如「網站結構稽核示意圖」
純裝飾、無資訊的圖	alt=””，讓螢幕閱讀器略過
兼具連結功能的圖	描述連結目的地，而非只描述外觀
堆疊關鍵字	避免，可能被判定為濫用

5. 常見問題

全站圖片都換成 AVIF 是不是最好

不一定。AVIF 壓縮效率確實出色，但編碼較慢、部分環境支援度稍弱。比較穩健的做法是以 WebP 為主，對首屏最吃頻寬的少數關鍵圖再額外提供 AVIF，用 <picture> 讓瀏覽器自行選擇。

只要圖片壓夠小，還需要標 width 和 height 嗎

需要。檔案大小影響的是載入快慢，而 width 與 height 解決的是版面位移。即使圖很小，沒標尺寸一樣會在載入時推動版面。這兩件事要分開處理。

把所有圖片都加上 loading=”lazy” 可以嗎

不建議一律套用。首屏、特別是最大的主視覺圖延遲載入，會拖慢它出現的時間，反而傷害首屏體感。延遲載入應該用在需要滾動才會看到的圖片上。

裝飾性圖片的 alt 要寫什麼

留成空字串 alt="" 即可。這會告訴輔助技術這張圖不承載資訊、可以略過。若硬要為純裝飾圖塞入描述，反而會干擾使用螢幕閱讀器的訪客。

圖片檔名用中文可以嗎

技術上可行，但我傾向用語意化的小寫英文加連字號，跨系統與網址編碼時比較不會出問題，維護上也較一致。重點是能看出內容、風格統一，避免空白與大寫。

已經上線的舊圖沒優化，值得回頭處理嗎

視流量而定。我會優先處理流量高的頁面與首屏圖片，那裡的改善最有感。長尾的舊圖可以排在後面，或在下次改版時一併調整輸出流程，讓新產生的圖自動符合規範。