圖片優化：有效提升網站 SEO 表現的 14 個圖片優化技巧，內附實用工具！

文字間佐以清晰而明確的圖片，提升網頁內容。

初學者 SEO 終極指南行動版截圖／JKL SEO 編輯團隊

此外圖片在正確位置顯示、圖文相符交錯時，不僅讓使用者更能掌握網頁內容，也可提升閱讀感受，視覺上減少使用者一次要閱讀太多文字的負擔。

圖文搭配交錯，讓使用者掌握內容，更提升閱讀感受。

SEO 網站優化行動版截圖／JKL SEO 編輯團隊

提升網站 SEO 表現

透過圖片優化當中編輯相關 HTML 語法和標籤的技巧，例如使用 標籤和 這個屬性（可參考下面的「圖片優化技巧 8」），增加圖片關聯內容，可讓搜尋引擎更容易掌握網站和當中的內容，進而提升網頁的搜尋排名。

此外 Google 表示，由於網頁速度、效能是使用者體驗之一，所以速度也被列為網頁排名的依據。圖片最佳化提升網頁速度，就有機會提升網站 SEO 表現。

圖片優化的 14 個技巧

本文根據 Google 圖片 SEO 指南整理下列技巧：

圖片優化技巧 1：使用清晰的圖片

清晰、高品質的圖片，能提升使用者的閱讀體驗，更有機會在圖中展現更多產品細節。

比起模糊不清的圖，清晰的圖更能吸引使用者而帶來流量。

不過圖檔有時會造成網頁太大，導致載入緩慢，所以還需搭配壓縮圖檔大小，在品質和大小之間取得平衡。

Best 20 Sweet Perfumes in 2023 截圖／JKL SEO 編輯團隊

圖片優化技巧 2：使用與主題相關的圖片

使用和主題相關的圖片，網頁整體內容會更實用有料。進行圖片搜尋時，和主題相關的圖，也會讓使用者為了深入資訊而點入網頁。

至於與主題不相關的圖片，例如裝飾性圖片，雖然可提高視覺美感，但林林總總加起來檔案也不小，而檔案如果太大會降低網頁載入速度，所以建議控制裝飾性圖片的檔案大小（可參考技巧 6）。

圖片優化技巧 3：將圖片放在相關文字旁或頁面頂端

將圖片放在相關文字敘述旁，不但可讓使用者藉由圖文的相輔相成，更快掌握內容，Google 也因此更可知道圖片相關資訊。

將圖片放在相關文字內容旁，提升使用者體驗和 Google 對圖片的了解。

SEO 技術解析：301 轉址截圖／JKL SEO 編輯團隊

圖片優化技巧 4：圖片名稱要跟內容有關

搜尋引擎在爬取網頁時，不只會爬取使用者看到的顯示內容，也會爬取檔名等描述性資料，讓搜尋引擎知道圖片的主題。

所以應確實命名檔名，使它和主題、內容有關，而且檔名維持簡短、關鍵。

避免使用相機流水號檔名，或是像 image1.gif、1.jpg 這般毫無意義的檔名。

另外檔名雖然可使用非英語字母，不過要遵守網址編碼規範，以便讓使用者能正確連結網頁。例如：

• 檔名可以是「文案技巧.jpg」，可被成功轉成編碼。
• 檔名不可以是「🦙✨.jpg」，無法成功轉換編碼。

圖片優化技巧 5：使用適合的圖片格式

Google 搜尋支持的圖檔格式有：BMP、GIF、JPEG、PNG、WebP 和 SVG。

而常見於網頁中的是 JPG、PNG 和 GIF。建議依照不同圖片類型選擇適合的檔案格式。

Pixabay 圖／JKL SEO 編輯團隊

一般的圖片編輯程式都能壓縮檔案大小。這邊推薦幾個行動版、線上的壓縮圖片資源：

• Canva：友善、直覺的線上照片編輯器。
• PicMonkey：照片編輯器，主打編輯發在 Facebook、Instagram、Youtube 上的圖。
• Pixlr：有快速和進階兩種編輯視窗。另有線上也有行動 app 版。
• Photoshop Express：給行動裝置使用的 Photoshop，讓你無時無刻、在哪都能編輯圖片。
• Resize.app：方便調整圖片尺寸、剪裁、轉換圖檔格式，相當簡單明瞭。

以 Pixlr 為例，下面步驟示範透過多元的調整設定，縮小圖檔尺寸：

Pixlr 圖片編輯器操作截圖／JKL SEO 編輯團隊

Pixlr 圖片編輯器操作截圖／JKL SEO 編輯團隊

Pixlr 圖片編輯器操作截圖／JKL SEO 編輯團隊

圖片優化技巧 7：調整圖片尺寸

調整圖片尺寸——通常是縮小——能有效降低檔案大小，提升網頁載入速度。

像是網頁中的縮圖或圖標等小圖，就不需原始尺寸。

以圖寬來說，一般行動版網頁的圖可設定 800px（至少），部落格內的圖 1200px，購物網頁的商品圖 600px，而產品列表中的縮圖則可設為 300px。

如果想要藉由知道網頁的最大寬度，來調整圖片尺寸，可操作以下 3 步驟：

1. 以 Chrome 為例，在網頁任一處按右鍵，選擇選單中的「檢查」。
2. 出現面板後，點選「框選」的圖示。
3. 把鼠標移動到圖片上，就會顯示圖片尺寸和寬度。

SEO 網站優化截圖／JKL SEO 編輯團隊

SEO 網站優化截圖／JKL SEO 編輯團隊

要注意的是，調整尺寸不是在網頁原始碼中透過標籤屬性設定長和寬而已，如此網頁依舊需花時間載入大圖，而是要調整到圖片本身尺寸。

圖／JKL SEO 編輯團隊

圖片優化技巧 8：添加圖片 Alt（替代文本）

Alt Text (Alternative Text) ，替代性文字，是一段描述圖片的文字。

當圖片無法正常顯示、或使用者用螢幕閱讀器時，Alt 能夠讓使用者知道原本圖片的意義，並提升網頁可達性、親和力。

圖／JKL SEO 編輯團隊

同時搜尋引擎在爬取網站時，除了會看圖片檔名外，也會爬取 Alt 以了解圖片的主題。

Alt 最好能精確描述圖片，不過也要避免變成濫填關鍵字，不然只會降低使用者體驗。

圖片 Alt 的 HTML 語法

要設定 Alt，就是在 HTML 的 標籤當中，加入 alt 這個屬性。

• O 正面例子：<img src="image-optimization.jpg" alt="sample of image optimization"/>
• X 反面例子（濫填關鍵字）：<img src="image-optimization.jpg" alt="image optimization techniques seo search engine img picture pic optimization improve website performance"/>

使用 Wordpress 加入圖片 ALT

在 Wordpress 中加入 Alt 也相當簡單。

在文章畫面中點選有著圖片的區塊 (Block) ，接著在右方選單的 Alt 欄位填入文字即可。

Wordpress 管理後台截圖／JKL SEO 編輯團隊

圖片優化技巧 9：行動裝置友善

行動裝置友善 (Mobile Friendly) 是指圖片在手機、平板等行動裝置上，尺寸仍能正常顯示，而且不會因為檔案太大而跑不動。

根據統計，50% 以上的網路流量都由行動裝置貢獻。

所以在處理網頁圖片時，應確保圖片在電腦、iPhone、Android、平板等各種裝置上都能瀏覽。這部分也可透過 Google 的行動裝置相容性測試網站來進行檢查。

此外，響應式圖片設計也是種應對行動裝置友善的措施。它可以透過 HTML 的 srcset 屬性去設定，或者 Wordpress 4.4 之後的版本也有支援。

Google 的行動裝置相容性測試畫面截圖／JKL SEO 編輯團隊

圖片優化技巧 10：加入結構化資料

結構化資料是指能透過表單系統呈現的資料。

通常會有些欄位，像是一份表格中有名稱、種類、價格等欄位，然後有多筆對應的值。每筆資料的詳細內容都被寫在不同欄位中。

搜尋引擎在爬取時，結構化資料能讓它快速讀懂網頁。而如果我們在圖片中加入結構化資料，就能在搜尋結果中呈現更豐富、有條理的結果。

以下圖為例，搜尋音響時，可看到價格、庫存狀況、品牌等的結構化資料。

Google 搜尋結果截圖／JKL SEO 編輯團隊

使用 Google 工具加入結構化資料

Google 提供結構化資料標記協助工具，讓人簡單操作這項圖片優化技巧。

使用標記工具的步驟大致如下：

1. 選取資料類型，例如「文章」，並輸入網頁網址。
2. 反白（螢光筆畫線）要結構化的資料，並在反白後選擇該筆資料的屬性。例如反白作者名字並選「作者」、反白日期選「發布日期」等。
3. 完成標記後，點選「建立 HTML」。
4. 選擇網頁程式碼的輸出格式。

圖片優化技巧 11：建立圖片 Sitemap

Sitemap，中文譯作網站地圖，是一個檔案，可提供搜尋引擎關於網站上的頁面、影片、檔案等的資訊。Google 在爬取網頁時，會去讀這個檔，以更有效地了解網頁。

而圖片 Sitemap 就是特別針對網站上的圖片去紀錄的檔案。

有些網站在嵌入圖片時，不是直接用圖檔名稱或連結，而是透過如 Javascript 去顯示，以達到動畫或特殊效果。如果沒有 Sitemap，Google 在爬取網頁時，找不到這種圖。

而為了讓 Google 找到，就可利用圖片 Sitemap 告訴 Google 圖片資訊，如此即可讓圖片出現在搜尋結果中。

一個圖片 Sitemap 檔案，大致看起來如下。

Google Image Sitemaps 截圖／JKL SEO 編輯團隊

圖片優化技巧 12：避免版權爭議

網站中所使用的圖片，都應確保版權沒問題。最好使用原創圖片，或經合法授權的圖，或來自無版權的商業圖庫。

如果發生侵權爭議則可能被告，同時還可能觸犯數位千禧年著作權法 (DMCA)，這時網站就可能遭 Google 自搜尋結果中移除。

圖／Google 說明版權侵害常見問題

圖片優化技巧 13：大量圖片使用延遲載入

當圖片多或是檔案較大時，網頁一次載入全部圖片將耗費不少時間。

延遲載入 (Lazy Loading) 這項技巧，讓網頁開啟後不會一次載入，而是隨著使用者往下滾動瀏覽時再陸續載入。如此可降低載入時間，提高使用者體驗。

因為事實上如果使用者沒有看完全文，中途就離開網頁了，自然沒有載入所有圖片的理由。

圖片優化技巧 14：利用瀏覽器快取

瀏覽器快取 (Browser Caching) 可讓重複造訪的使用者，在後續造訪網站時不必再下載圖片，所以可以提升網頁載入速度。

如果沒有緩存，那麼使用者每次開啟網頁時，都會需要再次下載所有的圖片。

如果使用者時常造訪同樣網頁的話，則這項技巧可說是相當實用。

圖片優化的常見問題

Q1：一定要做圖片優化嗎？

圖片優化對於提升網頁 SEO 表現相當有幫助 ，如：網頁載入時間快速，會讓人更願意停留在該網，而不會選擇跳出。

如同在前面「重要性」中所說，圖片優化和使用者體驗、搜尋結果排名和呈現都有關：

• 提升網站載入速度、讓圖片可隨不同裝置調整大小卻又保持清晰、圖與主題契合相關等，都可讓使用者有更好的體驗，有助於提升 SEO。
• 使用正確的 HTML 語法、加入結構化資料，則讓搜尋引擎更能讀懂網站內容，或在搜尋結果中呈現更豐富的資料，也回饋到網頁 SEO 表現上。

Q2：如何選擇圖片來源？

最好使用原創圖片，包含照片、插圖和圖表等。

其次是使用經合法授權的圖，或是免費或付費的商業圖庫。付費圖庫如 iStock，免費圖庫有 Unsplash、Pixabay、Pexels 等。

Pixabay 首頁畫面截圖／JKL SEO 編輯團隊

Q3：可以自己做圖片優化嗎？

可以。

部分圖片最佳化的技巧相對基礎、容易上手，像是命名檔名、調整圖片尺寸和大小等。

另外如果是用 Wordpress，當中也有外掛可進行最佳化，例如：

• ShortPixel Image Optimizer：新圖會自動被壓縮、調整尺寸。
• Smush：最佳化、壓縮圖片檔案大小、調整圖片尺寸，並轉成延遲載入。
• Resize Image After Upload：上傳圖片後，可自動將圖片尺寸調整為指定寬或高的上限。