這篇的例子不是找來的案例，是我直接打開自己網站的兩篇文章檢查出來的：一篇是消費者向的《吊掛式旅行收納包怎麼選》，一篇是 B2B 向的《自有品牌旅行袋怎麼開發》。兩篇圖片都是用 ChatGPT 生成，但實際擺到網站上之後，規格並不完全一樣——有幾個問題是我自己抓數據才發現的，不是憑印象猜的。
一、網站有哪些版位需要圖片？先分清楚再談尺寸
同一張圖放在不同版位，要求完全不同，混在一起談尺寸容易白忙一場。網站常見的圖片版位大致分五種：首頁主視覺／Banner、部落格內文圖、部落格封面／OG 分享圖、商品或情境圖、社群貼文圖。
拿我這兩篇文章來看：消費者向的收納包文章用了 5 張情境圖，帶著讀者跑完整個打包流程；B2B 的旅行袋開發文章同樣 5 張圖，但內容是規格、材質、流程這類結構性資訊。內容性質不同，圖片扮演的角色也不同，但兩篇都逃不掉同一個問題——內文圖、封面圖、分享圖各自該用什麼規格。
二、首頁主視覺與 Banner——會影響第一印象，也會影響網站速度
首頁主視覺通常建議做成 1920×460px 或 1400×700px 這類寬幅比例，檔案大小控制在 200KB 以內，因為這張圖幾乎一定是訪客最先看到、也最先要載入的畫面。
檢查我這兩篇文章時，我發現一個自己也沒注意到的問題：全部 5 張內文圖都被設成 loading="lazy"，包含文章最前面那一張。如果最上面那張圖同時也是頁面的 LCP（最大內容繪製）元素，卻被延遲載入，等於在使用者最先看到的地方拖慢了速度——這正是 Core Web Vitals 建議「首圖不要 lazy-load」的情況。
三、商品圖與情境圖——一致性比單張漂亮更重要
這兩篇文章有一個地方做對了：全部內文圖都是 1254×1254 的正方形 WebP，光線、留白、色調也維持同一套風格，看起來像同一個人、同一次拍攝完成的。這剛好對應到「風格要寫成規則，不是每次重新想」的做法——同一系列的圖只要守住相同比例和色調，就算主題不同，看起來仍然像同一組。
四、部落格封面與 OG 分享圖——同一張圖，兩種用途
這是我對照兩篇文章後，發現差異最大的地方。
收納包那篇，OG 分享圖直接沿用文章第一張內文圖：1254×1254，檔案 266KB。旅行袋開發那篇，OG 分享圖是另外做的一張：1600×1600，檔案只有 126KB——尺寸更大，檔案反而更小，因為是特地為分享用途處理過的。
直接沿用內文圖當 OG 圖很方便，但這次比對下來，反而是那張「隨手沿用」的圖超出了 OG 圖建議的 200KB 左右門檻，另外做的那張才守住檔案大小。分享圖也不建議做成完美正方形——Facebook、LINE 這類平台常會用 1.91:1 裁切預覽圖，正方形圖被裁切後，重點內容可能被切掉，發布前值得用平台的分享預覽工具看一次實際效果。
五、圖片格式怎麼選？WebP、JPG 的差別與取捨
WebP 在同樣畫質下，檔案通常比 JPG 小 25%–34%，這也是我這兩篇文章裡所有圖片都自動是 .webp 的原因——現在多數 AI 圖片工具與網站媒體庫，預設輸出或轉檔就是 WebP，不太需要額外手動處理。真正要盯的，反而是同一格式下的檔案大小是否合理，而不是糾結該選哪種格式。
六、Alt 文字怎麼寫？不是塞關鍵字，是講給人聽
好的 Alt 文字，讀起來要像是在電話裡跟人描述這張照片，而不是塞一串關鍵字。這兩篇文章裡有幾句我自己覺得寫得還不錯的例子：
- 「四層旅行收納包依盥洗、液體、保養與彩妝用品分區整理」
- 「旅行袋常用 Polyester、Nylon、Canvas、PU 材質與四種 Logo 加工方式」
這兩句都在講「圖片裡實際發生了什麼」，而不是「這是一張很棒的旅行袋照片」。具體描述內容和功能，比堆關鍵字對讀者和搜尋引擎都更有幫助。
七、各版位規格總表
整理成一份可以直接對照的表：
常見問題
部落格封面圖一定要另外做，不能用內文圖嗎？
可以沿用，但要注意檔案大小和裁切。這次對照發現，直接沿用內文圖的那篇，OG 圖檔案反而比另外做的那張還大，值得上傳前檢查一次實際大小。
圖片都用 WebP 就一定沒問題嗎？
格式只是基礎，同一格式下檔案還是可能太大。重點是同時檢查尺寸、壓縮品質與實際檔案大小，而不是選對格式就不管了。
為什麼圖片明明有壓縮，網站還是慢？
常見原因是第一張圖（LCP 元素）被設成 lazy-load，或是尺寸遠大於實際顯示大小。壓縮之外，還要確認載入順序和顯示尺寸是否合理。
Alt 文字要寫多長比較好？
沒有固定字數，重點是具體描述圖片內容和功能，而不是塞關鍵字。像「依用途分區整理」這類描述，比單純寫「旅行收納包」更有幫助。
商品圖需要用同一個尺寸嗎？
同一系列建議統一比例和風格規則（色調、光線、留白），尺寸可以依版位微調，但看起來要像同一套拍攝或同一套生成規則做出來的。
圖片 lazy load 是不是全部都要開？
不是。首頁主視覺和文章第一張圖（如果是 LCP 元素）不應該 lazy-load，其餘往下捲動才會看到的圖片，開啟 lazy-load 才有意義。
結論：規格對了，圖片才真正發揮作用
圖片生成得再好看，放錯版位、檔案太大或 Alt 文字空白，效果都會打折。這次直接檢查自己的兩篇文章，也抓到自己沒注意到的問題——內文圖全部 lazy-load、OG 圖檔案超標，這些都不是靠感覺能發現的，要實際打開來看。
下次發布文章前，可以照著這份表，檢查一次首頁圖、內文圖、封面圖跟商品圖的尺寸、檔案大小和 Alt 文字，會比事後才發現問題省事很多。