圖片 SEO 指南：alt、檔名、格式、壓縮與載入策略

我們曾幫一家屏東的觀光工廠做網站健檢，首頁打開要等將近八秒。一查才發現，問題出在他們把單眼相機拍的原圖直接上傳，一張就六、七 MB，首頁還塞了十幾張。這件事在後台看起來一切正常，圖片都在、也都清晰，可是對訪客的瀏覽器來說，等於是要他先扛下七、八十 MB 的資料，才能看到一個完整的首頁。圖片幾乎永遠是一個網站裡最重的一塊，偏偏它又最常被隨手上傳了事。其實圖片只要做對，能同時把網站變快、帶來圖片搜尋的流量、又對無障礙有幫助，而真正要顧的，也就那幾件事。這篇我們把它從頭到尾講清楚。

先搞懂：為什麼圖片這麼關鍵

搜尋平台不公開固定權重，也沒有能套用所有產業的流量或轉換增幅。以 Search Console、商家檔案與實際詢問紀錄建立基準，一次調整一個項目，再比較查詢、曝光、點擊與有效詢問，會比引用沒有原始資料的平均值可靠。

Google 對 LCP 訂的標準是：2.5 秒以內算良好，而且要有七成五的真實造訪都達標，才算通過。好消息是整個網路都在進步，2025 年約有六成二的手機頁面 LCP 達標，比 2022 年的四成四好上不少；壞消息是，LCP 仍然是三項核心指標裡最難過的一關，而卡住它的，十之八九就是圖片。所以圖片優化不是錦上添花的美工細節，它是實打實會影響排名與轉換的一件工程事。

alt 替代文字：寫給看不到這張圖的人與機器

alt 是這幾項裡最常被誤解的一個。很多人以為那是「塞關鍵字的欄位」，其實不是。alt 是寫給看不到這張圖的對象看的文字描述，它的價值有實打實的兩層。

第一層：無障礙，這是明文標準

網頁無障礙準則 WCAG 的 1.1.1（非文字內容）明文要求：所有有意義的圖片，都必須提供文字替代。這不是建議，是 A 級的基本門檻。視障者用的讀螢幕軟體看不懂圖，它會把 alt 的文字一字一句念出來，讓使用者知道這張圖在講什麼。這裡有個很多人不知道的細節：如果你根本沒寫 alt 屬性，讀螢幕軟體不會就這樣跳過，它會退而求其次，把那串像 IMG_2931.jpg 的檔名整個念出來，對聽的人是一場災難。所以「沒有 alt」比「alt 寫得普通」還糟。

第二層：SEO 與圖片搜尋

搜尋引擎讀不懂圖裡面畫的是什麼，它很大程度是靠 alt、檔名、周邊文字來推斷這張圖的主題。alt 寫得具體，圖片就有機會在圖片搜尋裡被找到，等於替網站多開一條進站的管道；很多做產品、做工程實績、做觀光景點的網站，圖片搜尋帶來的流量其實不小。

怎麼寫才對，以及常見的坑

• 具體描述畫面內容：例如「商用廚房油煙罩內安裝的 UV 紫外線淨化燈」，就遠勝過含糊的「一張燈的圖」。想像你在電話裡跟一個看不到螢幕的人形容這張圖，那句話大概就是好的 alt。
• 長度抓在約 100 到 125 個字元：這是無障礙圈子公認的甜蜜點。不是不能更長，而是不少讀螢幕軟體大約在 140 個字元左右就會截斷，後面沒念到就白寫了。真的需要長篇說明的複雜圖表，應該另外用內文或長描述來承接，而不是硬塞進 alt。
• 不必用「圖片」「照片」開頭：讀螢幕軟體遇到圖片時，本來就會先報讀「圖像」，你再寫一次就變成「圖像，一張圖片，……」，累贅又干擾。
• 純裝飾、沒有資訊的圖，要留空 alt：像純粹分隔用的線條、背景花紋，寫成 alt="" 讓輔助科技直接略過就好。這裡有個很細但很重要的雷：兩個引號中間不要留空格，一旦變成 alt=" "，有些讀螢幕軟體反而會把它當成有意義的圖、硬去報讀，弄巧成拙。

檔名：順手就能做的一條線索

用有意義的英文檔名，例如 uv-kitchen-lamp.webp，會勝過相機自動產生的 IMG_2931.jpg。原因跟 alt 一脈相承：檔名也是搜尋引擎判斷圖片主題的一條線索，而且這件事幾乎不花你額外力氣，上傳前改個檔名而已。用小寫、單字之間用連字號分開、避免中文和空白，這樣在網址裡也不會被轉成一長串亂碼。

壓縮與格式：影響速度最大的一項

回到開頭那個八秒首頁，元兇就在這裡。手機和相機的原圖，為了保留後製空間，通常沒有為「上網」而壓縮，一張好幾 MB 是常態。直接丟上網站，對載入是一場硬仗。真正的解法有兩步：先把尺寸縮到網頁實際用得到的大小，再用新一代格式重新壓縮。

實務上有幾個判斷準則值得記著：

• AVIF 最省，但要留退路：AVIF 壓得最兇，可是遇到極舊的裝置或環境仍有相容風險。標準做法是用 picture 元素，讓瀏覽器優先抓 AVIF、抓不到退回 WebP、再退回 JPEG，永遠保留一個 src 當保底。這樣新裝置享受最小檔案，舊裝置也不會開天窗。
• 壓縮品質不是越高越好：多數照片壓到品質參數 75 到 85 之間，肉眼已經看不出差別，再往上調只是白白增加檔案。真正要斤斤計較畫質的通常只有主視覺，內頁的一般照片大方壓下去就對了。
• 去背、圖示、線條圖用對格式：需要透明背景的用 WebP 或 PNG，純線條的圖示優先用 SVG，它是向量的、放大不會糊、檔案又小。把照片存成 PNG 是很常見的浪費。

設定寬高與 responsive：一張圖不該全裝置共用

另一個常被忽略的浪費是：手機螢幕明明只有幾百像素寬，卻硬要它下載一張 2000 像素、為桌機準備的大圖。正確做法是同一張圖準備幾種尺寸，用 srcset 和 sizes 這組屬性告訴瀏覽器「小螢幕抓小的、大螢幕抓大的」，讓每個裝置只下載它真正需要的那一版。這對用手機、用行動網路的客人，省下的流量與等待非常實在。

載入策略：lazy load 與 LCP 的那個取捨

談速度，很多人第一個想到 lazy load 延遲載入，也就是「捲到那張圖附近時才開始下載」。用在首屏以下、要滑動才看得到的圖，這招非常好，能讓一開始不必下載的圖乖乖等，把頻寬先讓給看得到的內容。現在主流瀏覽器從 2020 年起就原生支援，只要在標籤上加 loading="lazy" 即可，不必再裝套件。

圖片搜尋成效會受圖片本身、所在頁面與查詢意圖共同影響。alt 應描述這張圖在本文的用途，檔名保持可辨識，尺寸與格式兼顧清晰及載入速度；不要在 alt 塞一串不在畫面裡的關鍵字。

更進一步，主圖不只不能延遲，還可以主動催它快點。在標籤上加 fetchpriority="high"，等於告訴瀏覽器「這張最重要，優先抓」。這一招看似不起眼，效果卻很扎實：一般能把 LCP 改善 200 到 800 毫秒，某個大型的航班比價網站，光是替主圖加上這個屬性，LCP 就少了 700 毫秒。所以一個簡單的原則是：首屏主圖用最高優先、絕不 lazy；首屏以下的圖一律 lazy。兩邊各司其職，速度才會真的快。

再往上一階：讓搜尋引擎更容易找到你的圖

把上面的基本功做完，網站已經又快又穩了。如果還想在圖片搜尋多爭一點曝光，有兩個進階動作值得做。一是圖片 sitemap，也就是在網站地圖裡把重要圖片的網址也列出來，等於主動遞給搜尋引擎一份清單，讓那些平常不容易被爬到的圖也能被收錄。二是結構化資料，替產品照、文章主圖這類「代表這個頁面主體」的圖，補上機器可讀的標記，做得好時 Google 可能在圖片搜尋給你更醒目的呈現。要提醒的是，這種標記留給真正重要的主圖就好，不必每張都上。

還有一個原則性的建議：內容型的圖片，請老老實實用 HTML 的 img 標籤，把 src 和 alt 都寫好，不要用 CSS 背景圖去塞。因為搜尋引擎主要是透過 img 標籤來認識、索引你的圖片，藏在 CSS 裡的背景圖，它往往看不到，也就談不上被搜尋到。背景圖適合純裝飾，內容圖請走正門。

一張可以照著檢查的清單

• alt：有意義的圖都寫、具體描述、約 100 到 125 字，裝飾圖用不留空格的空 alt。
• 檔名：上傳前改成小寫、連字號分隔的英文描述。
• 格式與壓縮：先縮尺寸再轉 Web 或 AVIF，品質壓到 75 到 85，用 picture 保留 JPEG 退路。
• responsive：一張圖備幾種尺寸，用 srcset 讓小螢幕抓小圖。
• 尺寸：每張圖都標寬高或 aspect-ratio，守住 CLS。
• 載入：首屏主圖 fetchpriority 高、不 lazy；首屏以下一律 lazy。
• 進階：重要圖片上 sitemap 與結構化資料，內容圖走 img 不走 CSS 背景。