如何製作與優化網頁圖片 SEO 替代文字 Alt Text？

進行網頁設計時，網頁所使用的圖片尺寸應該如何設定？網頁圖片要如何優化 SEO 且不會破壞畫質？網路上國內外有很多篇文章在講解網頁圖片該如何製作、應該注意哪些事項等，數年來我自己也迭代過很多作法，不斷優化自己如何進行高效率製作大量的網頁圖片

「實戰經驗分享，非只是網路資料整理」

我製作網頁圖片的方法主要有兩大目標：超高效率，能大量製作

影片講解

說明：因為事情真的太多了！需要相當非常非常「有效率」去製作「大量」網頁圖片，而且還要優化過，免得增加網站主機的負擔、拖累使用者的瀏覽速度。於是我快速錄製了一支 26 分鐘的影片盡可能說明我常使用的製作圖片的方式，但沒上字幕喔！所以需要開聲音。若你也是網頁設計苦手或周遭設計師也有類似的需求，也可以分享給他們！

影片內容

1. 如何設定網頁圖片尺寸？

因為為了保持高速執行，所以網頁圖片尺寸的設定我大概只分成兩種：若在網頁設計中，圖片寬度若大於 600px 我ㄧ律輸出寬度為 1920px，高度自動等比例 auto；若圖片寬度小於等於 600px，我全部輸出寬度 1200px。

備註：圖片無論是寬度還是高度，務必將小數點後的數字移除成為「整數」，這樣才不會在網頁中產生不必要的破版、模糊等問題。

2. 如何超快速大量輸出網頁圖片（而不是用 Photoshop 一張一張輸出）

在 Figma 中可以一次大量選取數十張圖片，設定好格式後一次輸出，完全省時省力，真可謂兵貴神速！只是有一點要注意的是，將圖片丟到 Figma 時，要確認是否有變色，若有，則需要經過 Photoshop 檢查與重新設定該圖，通常都是正常顯示。

🍉 若你還沒有 Figma 帳號，可以前往註冊免費帳號，免費版就很好用了！

3. 如何優化網頁圖片？

以往我在優化圖片時跟大部分的網頁設計師差不多，都是先將圖片輸出後，再整包丟到 TinyPng 壓縮優化後下載使用。但發現在 Figma 中，可以安裝外掛 TinyImage Compressor，直接從 Figma 輸出「優化過的圖片」，確確實實省了至少兩個動作與時間，提高效率！

備註：平面設計師和網頁設計師真的還是屬於不同領域，有很多網站執行細節需要注意！

使用工具

1. Figma：前往註冊免費帳號
2. TinyPNG：前往瀏覽免費使用

高效率小訣竅

在 Figma 安裝類似 TinyPNG 的外掛，名稱為 TinyImage Compressor，直接從 Figma 優化圖片然後直接下載，節省步驟提高效率（透過此外掛可以輸出的格式：Export compressed JPG, PNG, SVG, WebP, GIF, WebM, AVIF and PDF image files directly from Figma）。只是有使用量的限制，若真的用完了，那就回頭繼續網頁版 TinyPNG 也沒問題的。

使用方式：在 Figma 中，先選取圖片，設定 Export 格式，再選取該圖片按右鍵，選取 Plugins > TinyImageCompressor，確認要輸出的圖片列表按下按鈕「Compress Images」即可。

想要更全面學習強大的線上 UI 協作設計軟體 Figma？可以上這堂課：產品設計實戰：用 Figma 打造絕佳 UI/UX。除此之外，我自己有搭配 UX 使用者經驗設計和數位產品開發相關的精選課程推薦，例如 UX 新手入門：UX 設計/研究全攻略: 給新手的職場通識課、UX 扎實的學術研究理論：用戶x商業x數據 | UX‧三刀流產品體驗設計、產品數據分析：產品數據分析 – 打造網路產品的決策引擎、產品創新：產品 x 創新：從需求洞察到產品策略、產品經理 PM：產品經理職場學：PM 必修的職涯指南！，全部上完之後讓我大開眼界、豁然開朗，提升思考層次與思維方式，有興趣的人可以參考並選幾堂符合目前需求來學習與充實自己。

更多補充說明

有些客戶的產品圖和情境圖真的是多到爆，攝影師拍攝的圖片傳來應該有五六百張，如何快速篩選、修圖與輸出網頁使用的格式，我主要用以下三種工具根據不同情況交錯使用，可以提高執行效率，之後會再錄製操作影片簡介一下使用方式

大量修圖、製圖、輸出圖片的方式

1. Photoshop：動作紀錄、批次處理、多個圖層選取下載
2. Figma：尺寸統一設定、快速排序、一次命名、一次選取下載
3. Lightroom：星級分類、AI 修圖、一次選取下載

備註：

1. 前提是這些攝影圖是專業攝影師拍攝的，畫面都是佈局好的，比較能適用以上方法。若是還要去背、移除不必的畫面物件、細微的修飾等，就還是得用 Photoshop 一張一張修圖。
2. 提高效率相對可以加速執行時間，但不表示不費時費工，只是相對較快速。

針對 SEO 初學者、初入門的人，可參考 Hahow 的線上課程：SEO 白話文：不懂程式也能學會的 SEO 秘密，上完後在知識與觀念上扎實打下基礎，接著進階的是了解整合 SEO 搜尋引擎優化和 Google Ads 關鍵字廣告的行銷策略：客戶主動找上門！全面佈局的搜尋引擎行銷策略，然後學習網站分析工具 Google Analytics 課程：GA4 新手完全攻略！用數據分析下商業決策，從做中學優化網站 SEO，學習效率倍增！有興趣的話再加入 Line 社群一起討論：SEO 資源彙整 / 學習，歡迎蒐藏並分享給你的同事們我持續更新的「SEO 免費學習資源」、「爾文 SEO 觀察室」。閱讀書籍的部分則超級推薦：SEO 超入門：教你免費又有效的網站行銷好點子

TinyPNG 的 WordPress 外掛讓網站自動優化網頁圖片

我後來才意外發現幾乎天天在使用的 TingPNG 網頁圖片優化壓縮有推出 WordPress 外掛，讓你在建立 WordPress 網站時可以自動化優化圖片，不用如以往手動優化後才上傳到網站後台，超級方便。而且就我觀察，大部分的人真的很懶得去做優化的動作，導致圖片大大影響網頁速度效能，有了這類的外掛的確可以讓團隊執行更有效率，減少阻礙。 免費版在預設的 WordPress 安裝中，每月可以免費優化大約 100 張圖像，實際運作規則以官方公告為主。

TinyPNG – JPEG, PNG & WebP image compression – WordPress 外掛網址：前往瀏覽

💎 Shopify SEO 友善

有使用 Shopify 建立電商網站的使用者，所謂 Shopify SEO 友善，很多我們不會特別注意到是指什麼，但其實都藏在細節裡，只要稍微了解基本 SEO 網頁架構的人可以在 Google 官方 SEO 文件中找到相對應的實現方式，例如：

• 只要上傳到 Shopify 的圖片無論是內建透過 App 上傳的圖片都直上 CDN 了，在 Shopify 建立的網站圖片上按右鍵「在新分頁開啟圖片」，就可以看到該圖片網址
• img 標籤也都提供回應式圖片設定 img srcset，亦即根據不同螢幕尺寸提供不同大小的圖片，在圖片上按右鍵「檢查」可以看到 有使用 srcset 屬性，而且也有指定 src 當作備用網址

以上用網頁圖片為例，因為通常大部分的使用者很容易忽略「優化網頁圖片」這件事，可能是產品圖片太大量所以「懶得優化」，也可能是輕忽了圖片未優化所帶來的影響，影響所及包含 SEO、網頁速度、瀏覽體驗、行動版網頁體驗等，層面滿廣的

• 想了解優化 Shopify SEO 的實用 App，可瀏覽這篇文章：Shopify SEO 推薦 APP：Yoast SEO 實戰教學
• 想進一步全面學習 SEO 資源，可以瀏覽：全方位 SEO 自學指南 – 從新手到專家的學習資源
• 第一次聽到 Shopify？前往了解如何用 Shopify 與開放式生態系打造國際級的跨境電商網站：用兩個月打造 Shopify 客製化網站設計

Using a CDN is a cost-effective and efficient method to greatly enhance your website’s loading speed, while also providing added security against potential attacks and hacks.

💎 Google 搜尋中心官方說明優化網頁圖片的最佳實踐

替代文字可以滿足無障礙設計，用 <img> 元素新增元素的 Alt 屬性，而內嵌 <svg> 元素，則可以插入元素

• img alt text（圖片的替代文字）
• svg title

網頁可使用 <picture> 元素或 img 元素的 srcset 屬性來指定回應式圖片，只是部分瀏覽器和檢索器無法解讀這類屬性，一律使用 src 屬性來指定備用網址

• picture 內含 source 和 img src
• img srcset
• background-image: image-set

了解更多：Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法 – Google 搜尋中心，如果你是開發者，那真的可以好好詳讀這篇回應式圖片 Responsive images 最佳做法

記得以往在純寫整個網頁 code 的時期，使用是優雅降級的好方式，又或是使用 media query 針對不同解析度切換圖片，但這作法比較麻煩些；而若使用 CSS 背景圖片寫法，則可以透過 image-set 指定各種圖片尺寸，只是 Google 不會為其建立索引，但又不得不用且經常使用 ^^，所以可以透過「提交圖片的網站地圖」讓 Google 收錄

其他參考資料，這篇文章也乾淨俐落地整理了圖片 SEO 優化的各項要點：What Are Some Best Practices For Optimizing Images For Image Recognition And SEO?

網頁圖片 ALT 文字的重要性

發現真的很多網站會忽視圖片 Alt 文字。我知道很多人還是懶得去為每張圖命名、構思圖片在內容中的意涵，說實在是滿花時間的 ^^ 不就丟上網站中快速排版一下就好了嗎？ XD” 但因為圖片 Alt 文字的設定與優化對 SEO 還是有一定的幫助啦，所以這邊快速重點整理一下：

圖片 Alt 文字主要針對優化 Google Image 圖片搜尋，並不是一般我們常用的 Google Search 網頁搜尋的排名因素，儘管如此，優化圖片 Alt 文字還是有可能間接影響網站排名，以下說明：

• 提高圖片在圖片搜尋結果中的曝光度，可能會為你的網站帶來更多圖片搜尋流量，進而提高你的整體排名。
• 能協助看不到網頁中圖片的使用者 (包括使用螢幕閱讀器或網路連線速度偏慢的使用者或視障者) 了解圖片內容，這可能會帶來更好的用戶體驗和客戶滿意度，所以也可能會提高你的排名。
• 幫助搜尋引擎理解圖片的內容，這可能會產生更準確、更相關的搜尋結果。

🌲 參考資料：Is Alt Text A Ranking Factor For Google Image Search? – Search Engine Journal、Google 圖片搜尋引擎最佳化 (SEO) 的最佳做法 – Google 搜尋中心

🌲 W3C 官方網站提供一個很棒的 Image Alt 決策樹描述了在不同情境下如何使用 <img> 元素的 Alt 屬性，說明何時可以留白、何時需要撰寫文字：An alt Decision Tree – W3C

💎 UX 權威機構 Nielsen Norman Group 分析關於如何撰寫替代文字 (Alt Text)

NN/g UX 機構撰寫的 UX 文章偏偏是研究結果的精華，最近才發現他們也有寫有關如何撰寫網頁的替代文字（Alt Text）的兩篇文章：Alt Text: What to Write、Alt Text: Not Always Needed，摘要如下：

🟡 Alt Text 的重要性

• Alt Text 是用於描述圖片的文字描述，當圖片無法顯示時 (例如，圖片下載失敗、使用者使用螢幕閱讀器、瀏覽器禁用圖片等)，Alt Text 會顯示出來，提供圖片的資訊。
• Alt Text 對於無障礙性至關重要，讓視障人士也能理解圖片的內容。
• Alt Text 也能提升 SEO (搜尋引擎優化)，因為搜尋引擎會利用 Alt Text 來理解圖片的內容。

🟡 撰寫 Alt Text 的原則

• 簡潔明瞭：使用盡可能少的文字來描述圖片的內容。
• 準確性：Alt Text 應該準確地描述圖片的內容。
• 情境相關：考慮圖片在網頁上的用途和意義，Alt Text 應該與網頁的內容相關。
• 避免重複和冗餘：不要重複圖片周圍的文字，也不要使用 “圖片是…” 這樣的短語。
• 功能性圖片的 Alt Text：如果圖片是連結、按鈕或其他互動元素，Alt Text 應該描述它的功能，例如 “提交表單” 或 “返回首頁”。
• 裝飾性圖片的 Alt Text：如果圖片僅用於裝飾，不傳達任何資訊，可以使用空 Alt Text ( alt=”” )，告訴螢幕閱讀器忽略它。

🟡 其中一些觀念對我來說是「新的吸收」，如下：

• 不要簡單重複圖片的檔名：圖片檔名通常不具備描述性，直接將檔名作為 Alt Text 是沒有意義的。空 Alt Text ( alt=”” ) 並不總是最佳選擇。 只有當圖片僅用於裝飾，並且不傳達任何資訊時，才應該使用空 Alt Text。
• 避免冗餘的上下文描述： 避免在 Alt Text 中重複圖片周圍已經存在的文字。 例如，如果圖片下方已經有標題 “團隊成員合影”，那麼 Alt Text 中就不需要再次描述 “團隊成員合影”。
• 持續更新和優化： 隨著網頁內容的更新，Alt Text 也需要定期檢查和更新，以確保其仍然準確和有效。

💎 AI 優化圖片替代文字撰寫

🍉 運用 AI 撰寫圖片替代文字 Alt Text

針對圖片設定描述 alt text for seo 或圖片檔案名稱時，可以使用看看「圖片轉文字」免費 AI 工具，產生的結果當作參考用，實際還是要依據頁面或文章內容脈絡進行微調。

• 🥕 AltText AI：用過，覺得強大且方便！使用 AI 人工智慧自動生成圖像替代文字。支援 WordPress、Shopify、WooCommerce、Chrome 和 Contentful 的整合。

🍉 使用圖片轉文字 AI 工具尋找靈感

針對圖片設定描述 alt text for seo 或圖片檔案名稱時，可以使用看看「圖片轉文字」免費 AI 工具，產生的結果當作參考用，實際還是要依據頁面或文章內容脈絡進行微調。

• 🥕 Ahrefs – Free AI Image Alt Text Generator：產生的描述文字較多且有深度，可以設定三個或五個結果挑選後，再進行人工優化處理，千萬別完全不更改就直接使用囉。
• 🥕 Hugging Face – Image-to-Text：產生簡易較短的描述，一句話乾淨利落，單純只是提供靈感，務必還是要根據頁面和核心內容更新文字。
• 🥕 methexis-inc/img2prompt – Run with an API on Replicate：執行程序時間相對以上稍微長了一點，其結果也是較短的描述，比較不推薦使用

Shopify vs. WordPress 的圖片檔案命名

在 Instagram 查看這則貼文

Irvinglab 爾文實驗室（@irvinglab）分享的貼文

🍎 同一張圖片，圖檔命名只要有中文名稱，上傳到 Shopify 會自動被過濾掉，但 WordPress 正常顯示，但沒關係，Shopify 的解法是：將中文字設定在圖片的替代文字中（alt text）是沒問題的

• Shopify 圖片名稱「只能顯示英文」
• WordPress 圖片名稱「可以顯示中英文」

這會影響到：

🥕 1. 如何管理圖片素材
若有使用多架站平台和社群媒體，圖片檔案名稱要統一全英文？還是中英文各一套？

🥕 2. 搜尋圖片的效率
若有正確命名，則無論在本機或架站平台中尋找圖片時會很有效率，因為透過內建的圖片搜尋欄位搜尋有意義的關鍵字很容易找到該圖片。亦即：Shopify 可以搜尋英文關鍵字找圖，而 WordPress 中英文皆可

🥕 3. 圖片網址連結
圖片名稱都是英文，圖片網址比較漂亮；而圖片名稱若包含中文字，則分享圖片網址給別人時會呈現無法閱讀的符號

最新資訊：根據今年 2024 年三月開始，WordPress 社群有人分享一個不錯的訊息，就是有使用 WordPress 架設官網或部落格的使用者，「圖片檔案的命名需要全部使用英文，尤其是網頁的社群分享圖片設定」，否則將網頁分享到社群媒體如 Meta 臉書時，預覽圖片會顯示一片空白。Shopify 有這樣問題嗎？答案是沒有，因為如果上傳有中文命名的圖檔到  Shopify 時，Shopify 會自動將「中文的部分過濾掉」

這也是為何我當初用 WordPress 用很久了，接觸 Shopify 時發現「覺得很多基本應該要有的功能但沒有」，尤其很多 Technical SEO 的基本設定也受限，而這只是其中一個小項目。

很多架站平台都會自稱 SEO 友善，但真正了解 SEO 並有實際使用過的人才會知道，所謂 SEO 友善「並非百分之百友善，甚至只有一些些友善」，做行銷的人都應該知道「行銷語言」先聽聽就好，沒有實作驗證無法得知全部的面貌。更別說廠商號稱自己獨家開發的、封閉式的網站架站系統，這就不便多說了 ^^”

只有時時提升自己的多領域知識與了解業界最新資訊，才能更精準判斷與期望相符的產品或服務。

Google Web Dev 建立適用於任何瀏覽器的現代網頁體驗的指導原則

Google 的 web.dev 網站是專門分享如何善用現代科技打造令人驚豔的網站體驗，其中有關「網頁圖片」的內容非常值得學習

• Learn HTML – Images：概要了解 HTML 中圖片語法的使用方式
• Learn Images：對於圖片格式透徹解析，適用於初學者和有經驗的網頁開發者，內容包括從確保圖片來源有效請求和呈現的基礎知識，到常見圖片格式如何從伺服器傳遞到客戶端的詳細資訊。在整個課程中，您將學習如何實現圖片的最小傳輸大小，而不會影響它們的質量，至少在任何人看得見的情況下是如此。

若你是平面設計想轉職網頁設計師或從未熟悉網站開發程式的行銷人員，想了解網頁程式開發是怎麼一回事，極度推薦六角學院的線上課程：使用 HTML、CSS 開發一個網站，上完之後會有初步的概念，不僅可以開始看懂網頁的基本語法，有助於執行網頁設計介面時的實際作法，更能提升與工程師的溝通效率，而不致於完全雞同鴨講。若是完整的基礎學習則可以再修此兩門課：一變應萬變：RWD 響應式網頁設計、使用 jQuery 打造互動性網頁動畫效果

爾文打造的客製化 ChatGPT

• SEO 搜尋引擎優化
  • 名稱：與文同行 SEO 搜尋引擎優化師
  • 簡介：Chat and Learn – 透過對話學習 SEO
  • 網址：https://share.irvinglab.com/gpt-seo-mentor
• Shopify Liquid Dev 程式開發
  • 名稱：Liquid 程式開發 AI 顧問
  • 簡介：針對初學者 Shopify Liquid 程式撰寫的專業輔助，含豐富範例及詳細解說
  • 網址：https://share.irvinglab.com/gpt-shopify-liquid-expert
• Web Design 網頁設計
  • 名稱：成為網頁設計師
  • 簡介：你的網頁設計學習諮詢顧問
  • 網址：https://share.irvinglab.com/gpt-web-design-advisor
• 備註：歡迎前往試用，接下來會持續更新與優化，也可隨時給我回饋 ^^ 感恩！GPTs 已可以設定即時搜尋其他網站上的資料，確切地說，原本使用 Bing，並使用另一個 ChatGPT Plugin 來執行任務，該工具允許使用者提供一個（或多個）URL，並可以選擇請求與 URL 進行交互，提取特定資訊或如何處理 URL 中的內容，請求可能包括重寫、翻譯等。若遇到任何使用上的問題可隨時來訊息或截圖跟我說。

---