WordPress 網頁圖片尺寸建議、網頁banner尺寸多少

在架設 WordPress 網站時，圖片的品質與尺寸不僅影響網站的美觀，還會直接影響載入速度和 SEO 成效。很多人在準備網站資料時，常常不知道要怎麼準備圖片尺寸和格式，今天整理了這篇指南，希望能幫助你更輕鬆準備網站所需的圖片啦。

如果你不想這麼麻煩，先給個通用的解答：一般建議提供的圖片尺寸是 1200×630 像素 。如果你有請設計師，直接給設計師長寬比例 4:3 、至少 1600 像素的圖片(長或寬像素其中一邊)，讓他幫你裁切成網站需要的尺寸吧！

像素是什麼

像素 (Pixel) 是螢幕上構成畫面的最小單位，就像拼圖的小塊一樣。當我們提到螢幕解析度，例如 1920×1080，其實是在說這個畫面是由 1920 行和 1080 列的小點組成的。解析度越高，畫面就越細緻。

在製作網站圖片時，了解像素的概念能幫助我們選擇合適的尺寸，避免圖片模糊或失真，提供訪客更好的視覺體驗。

常見圖片類型與建議尺寸

(1) 文章內圖片尺寸

• 建議尺寸: 1200×630 像素
• 檔案大小：建議是 200KB，不要超過 300 KB。我看過有站長更嚴格，網站內圖片大小都不超過 150 KB
• 適合大部分裝置，能確保圖片清晰且不拖慢載入速度

(2) 精選圖片 (Featured Image)

• 建議尺寸: 1200×630 像素，符合社群分享的最佳比例
• 建議格式: JPEG 檔，保持品質的同時減少檔案大小

如果你不知道什麼是精選圖片，請看下面這一篇文章。

▍延伸閱讀：WordPress 如何新增文章? WP編輯文章教學&發布前注意事項

(3) Banner 圖片尺寸

• 桌面版banner:
  • 建議尺寸: 寬為 1920 像素，比例 16:9，適合全螢幕展示
  • 高度：取決於你想要的 Banner 比例。有人喜歡窄一些，有人則希望能滿版展示。如果要製作滿版圖片，通常電腦螢幕的比例是 16:9，建議寬度設為 1920 像素，高度不要超過 1080 像素。而如果寬度是 2560 像素 寬度，那高度就控制在 1440 像素以內，因為頁面上方會有頁籤menu、網址列等元素會占據空間
• 手機版banner:
  • 建議尺寸: 寬度 428 或 500 像素
  • 如果有要為了手機另外製作手機專用的 banner 才需要，不是所有網站都需要特地做手機版 banner 喔
  • 每一家手機的長寬比例、解析度都有很大的差異，一般來說用寬度 428 px 的設計就可以適用於 95％ 以上的手機規格

▍延伸閱讀：Banner 圖片尺寸要多大？其實有 3 種 Banner，先看你的是哪一種

(4) 背景圖片 (Background Image)

• 建議尺寸: 建議 1920 像素寬，可以滿足滿版效果
• 建議格式: JPEG，減少檔案大小且保持品質

圖片格式與壓縮

(1) 圖片格式選擇

• JPEG: 適合照片類型圖片，能有效壓縮而不損失太多品質
• PNG: 適合有透明背景的圖示或 LOGO，但檔案較大，建議只有LOGO這類需要透明背景的檔案使用 PNG 檔就好，其他圖片檔案一率用 JEPG

(2) 壓縮工具推薦

圖片上傳到網站以前，建議先做兩件事：

1. 幫圖片命名：才不會網站上圖片的名稱都是英文亂碼。比如假設有張圖是安妮網站的logo，我就會把它命名為「安妮網站logo」再上傳
2. 一定要先壓縮圖片再上傳到網站上，不然會拖慢網頁開啟的速度，不利於SEO，讀者也沒耐心看就會跳出網站了

▍延伸閱讀：SEO優化策略｜掌握這 4 個SEO策略，你也可以排到前幾名

壓縮圖片可以用這個工具：

• TinyPNG: 簡單易用，可以批次縮圖，適合快速壓縮 PNG 與 JPEG 檔案
• 圖片檔案大小控制在 200 KB 以下，可以大幅提升你的頁面載入速度與 SEO 成效喔

安妮結語

這篇講網頁圖片尺寸，不知道你看完會不會覺得霧煞煞？

別擔心，其實重點主要只有三個：

• 第一點是記得圖片上傳到 WordPress網站以前要先縮圖到 200kb 唷，這是為了網站的速度和 SEO 著想
• 第二點是，電腦版 banner 的寬是 1920px，長就看個人喜好
• 第三點是，如果不知道放上網站的圖片要多大，就放最通用的長寬比 4：3 、或尺寸是 1200×630 像素的圖片囉！

最後，提供的圖片一定要是畫質清楚的，看起來才會專業！如果該圖片會以滿版呈現，那就要提供 1920*1080 px 的圖片喔！（欸不是說好才 3 個重點ＸＤ）

好啦，希望這篇文章有幫助到你準備圖片囉！

如果你已經是我的網站架設客戶，別擔心，圖片直接傳給我，我幫你處理就好囉！

自己架站問題多多？不用自己苦惱！歡迎參考安妮網站的架站服務，你可以選擇創業友善的「模板站方案」，跟著我們的完整影片教學，自己架出高質感網站；或選擇「客製站方案」，由我們幫你把網站完整架設出來，讓你把心力放在最重要的事業上！有任何問題私訊我聊聊吧～