一個網站的圖片好不好看能為網站加分，但網站圖片尺寸如果不對，可能造成模糊、跑版或載入緩慢等問題，圖片尺寸不只關乎視覺，更影響網站效能與 SEO 表現。
本篇將帶你快速掌握常見的網站圖片尺寸建議、格式選擇與壓縮工具，讓你的網站畫面美觀、速度快、體驗更完整。
最佳網站圖片尺寸大小
在設計網站圖片時，尺寸並不是越大越好，也不是一張圖通用所有裝置。每個區塊、每個用途，都有適合的圖片大小，才能確保畫質清晰、版面穩定、載入快速。
以下是幾個常見網站圖片的建議尺寸範圍：
| 圖片用途 | 推薦尺寸 (像素) | 說明 |
|---|---|---|
| 首頁 Banner（桌機） | 1920×800 或 1440×600 | 橫幅寬螢幕比例，避免文字超出裁切 |
| 首頁 Banner（手機） | 428×800 | 直式比例，適合手機直立瀏覽 |
| 文章內插圖 | 1200×800 或 1240×1080 | 配合內容寬度，清晰不失真 |
| 精選圖片（OG 圖） | 1200×630 | 最佳社群分享預覽尺寸 |
| 商品圖片 | 1080×1080 | 方形構圖，利於電商排列 |
這些尺寸都是根據目前大多數 RWD 響應式網站、社群平台預覽與電商平台展示邏輯所建議的標準。
除了網站圖片尺寸要留意之外，圖片的大小也很重要，上傳前記得先壓縮與轉檔，避免過大圖檔影響網站速度，文章下方也會提供實用工具協助處理。
網站圖片尺寸的重要性
圖片尺寸看似只是設計細節，實際上卻直接影響網站的運行效率、使用者體驗與搜尋引擎排名。以下是三個關鍵原因，說明為什麼圖片尺寸不能忽略：
1. 提升瀏覽體驗
過大的圖片會導致排版跑位、橫向滑動，甚至造成手機畫面被撐破；而過小或解析度不足的圖片，又會模糊失真。
適當的尺寸能讓圖片完整呈現、版面整齊，使用者操作更順暢，自然提升網站好感度。
2. 加快網站加載速度
圖片是網頁中佔比最大的資源之一，如果網站圖片尺寸過大、未壓縮，會大幅拉長載入時間，特別是在行動網路環境下，更容易造成跳出率上升，適當尺寸搭配壓縮，能顯著提升網站速度。
3. 有助搜尋引擎優化（SEO）
Google 對網站速度與行動裝置友善度評分非常敏感，而圖片正是其中關鍵一環，使用符合尺寸規範的圖片，有助提升PageSpeed 分數與整體網站 SEO 表現。
常見網站圖片格式
除了尺寸之外，圖片的格式選擇同樣是網站效能優化的重要一環，不同格式在檔案大小、透明度支援、畫質呈現與瀏覽器相容性上各有差異。
如果能根據圖片用途選擇合適格式，不僅能保留清晰畫質與設計效果，也能有效減少載入時間，提升整體瀏覽體驗；這也讓我們在處理圖片上架時，能更加有效率、準確選擇最適合的檔案類型。
| 格式 | 適合用途 | 優點 | 缺點 |
|---|---|---|---|
| JPG | 實景照片、文章插圖 | 壓縮率高、載入快、支援廣泛 | 不支援透明背景，壓縮會失真 |
| PNG | 圖示、Logo、有透明需求 | 支援透明、高畫質、不失真 | 檔案較大，載入較慢 |
| HEIC | iPhone 拍攝圖片 | 高壓縮率、畫質佳 | 部分瀏覽器與 CMS 不支援 |
| WebP | 網站大圖、插圖 | 高壓縮效率，畫質佳，支援透明與動畫 | 舊版瀏覽器支援度有限（需備案） |
| GIF | 簡單動畫、提示圖 | 支援動圖、支援透明 | 顏色數有限、檔案偏大 |
| TIFF | 印刷用高畫質圖 | 高畫質、無壓縮 | 不適用於網頁，檔案極大 |
JPG（JPEG）
適合用於照片與實景圖片，支援高壓縮，檔案小、載入快，但不支援透明背景，壓縮過高可能失真。
PNG
支援透明背景，適合 Logo、圖示與設計稿，畫質清晰但檔案較大，不建議用於大圖。
HEIC
HEIC 是 Apple 裝置（iPhone/iPad）在拍照時常用的圖片格式，但它不是瀏覽器與 CMS（如 WordPress） 的通用標準格式。
因此如果你直接從 iPhone 拖一張 HEIC 圖片到 WordPress 媒體庫，會出現「不支援的檔案格式」錯誤，這個時候你會需要透過安裝外掛進行轉檔。
WebP
Google 推出的新型圖片格式，支援透明與動畫，壓縮效果優於 JPG/PNG，是目前網站效能優化首選格式。
GIF
可製作簡單動畫或動態效果，支援透明，但色彩數有限、檔案偏大，通常已被 WebP 取代。
TIFF
高畫質無壓縮格式，常見於印刷與攝影原始檔，不適合用於網站，檔案非常大且不支援網頁瀏覽。
網站圖片推薦使用格式：
- 文章圖片 / 首圖 / 商品圖： JPG、WebP
- 圖示 / Logo / 有透明需求： PNG、WebP
- 動圖： WebP（取代 GIF 更節省空間）
- iPhone 圖片： 建議轉檔成 JPG 或 WebP，再上傳至網站
WordPress常見網站圖片尺寸
目前 AstraYo 是使用 WordPress 架設網站，在使用 WordPress 架站時，WordPress 本身圖片上傳後會自動產生多個尺寸版本（如縮圖、中尺寸、大尺寸），但若能根據實際用途事先調整好圖片尺寸，不僅能避免跑版，也能減少伺服器資源浪費與加快載入速度。
這邊也簡單整理我們常使用的網站圖片尺寸
| 圖片用途 | 建議尺寸 (px) | 說明備註 |
|---|---|---|
| 文章插圖 | 1200×800 或 1240×1080 | 配合內容寬度設計，畫質清晰不失真 |
| 文章精選圖片 | 1200×630 | 也稱為社群預覽圖，符合 Facebook OG 規範 |
| 首頁 Banner（桌機版） | 1440×720 或 1920×800 | 寬螢幕比例，避免圖像裁切與變形 |
| 首頁 Banner（手機版） | 428×800 | 符合直式螢幕比例，避免圖像壓縮 |
| 商品圖片（方形） | 1080×1080 | 適合 WooCommerce，利於商品陳列整齊統一 |
| Logo 圖片 | 建議寬度 250px 內 | 可依主題支援寬度調整，保持清晰即可 |
文章插圖：1200×800 或 1240×1080 px
推薦檔案大小：150KB～300KB
橫式圖片適合用在內文段落中，應以清晰為主但不需過大。若一篇文章有多張圖，更要控制每張圖的大小，避免累積造成頁面過重。
精選圖片（封面圖、OG 圖）：1200×630 px
推薦檔案大小：100KB～250KB
這是社群平台分享時的主圖，需確保在 Facebook、LINE 等平台預覽時清晰不失真，建議以 JPG 或 WebP 格式儲存壓縮，達成品質與大小平衡。
首頁 Banner（桌機版）：1440×720 或 1920×800 px
推薦檔案大小：300KB～500KB
作為網站門面主視覺，圖片需保持一定清晰度與色彩細節，但不宜超過 500KB。建議使用 WebP 格式搭配壓縮工具處理，降低載入壓力。
不過，在Banner設定上最主要要注意的寬，但高度可以根據實際需求調整，因此寬1920px固定之後，高度都可以自由規劃，來更符合圖片的樣式。
首頁 Banner（手機版）：428×800 px
推薦檔案大小：100KB～200KB
手機版主視覺圖建議以直式構圖呈現，避免桌機版橫幅在手機上壓縮變形、文字被裁切。
不過實務上，WordPress 支援 RWD 響應式圖片設定，許多主題也會自動將桌機版圖片縮放適配手機。
因此，除非你有特定的視覺呈現需求（如不同排版、標題位置）、或具備足夠設計資源維護兩套圖片，否則其實不一定需要為手機版額外設計一張圖；選擇共用圖片，建議桌機版設計時就預留中間安全區域，確保手機縮圖時主要內容不會被裁切。
商品圖片（正方形）：1080×1080 px
推薦檔案大小：150KB～300KB（有 Zoom 可至 500KB）
商品圖片需呈現細節且構圖清楚，建議使用 JPG 格式壓縮，若有商品放大查看功能，亦可保留一份高清版。
Logo 圖片：寬度不超過 250px
推薦檔案大小：30KB～100KB
網站 Logo 顯示頻率高，建議以 PNG 或 SVG（向量圖）儲存，兼具清晰度與透明背景效果。為避免拖慢全站速度，檔案應盡量輕量化。
搞定網站圖片尺寸，也不可少圖片壓縮工具
我們常常精心設計好網站圖片的尺寸，但在追求畫質的同時，卻容易忽略一個關鍵細節——檔案大小。
若圖片檔案過大卻未經壓縮就直接上傳，容易造成網站載入變慢，使用者甚至可能還沒看到圖片就離開網站，進一步影響 SEO 表現與整體效能。
如果你有設計師或使用專業設計軟體（如 Photoshop、Illustrator）進行圖片製作，通常可以在匯出時就調整解析度與壓縮比例，達到最佳品質與效能平衡；但若沒有專業設計資源，也完全沒關係，以下推薦三個簡單好用的圖片壓縮工具，讓你輕鬆降低檔案大小，同時保留畫質。
TinyPNG（適合快速批次壓縮 JPG/PNG）
官方網址： https://tinypng.com
- 線上操作，免註冊即可使用
- 支援 JPG 與 PNG 格式，自動壓縮不失真
- 一次可上傳多張圖片，批次壓縮後一鍵下載
TinyPNG也有 WordPress 外掛可搭配使用，非常便於部落客、編輯、網站維護者，想要快速壓縮圖片又不影響品質
Photopea（線上版 Photoshop 編修＋壓縮）
官方網址： https://www.photopea.com
- 支援 PSD、JPG、PNG、WebP 等格式
- 可調整圖片尺寸、裁切畫面、壓縮比例
- 操作介面類似 Photoshop，不用安裝軟體
Canva（設計＋匯出壓縮一站完成）
官方網址： https://www.canva.com
- 可設計文章首圖、廣告圖、Banner 等素材
- 匯出時可選擇 JPG / PNG / WebP 格式
- Pro 版支援壓縮圖片、去背與透明背景功能
Canva 可在圖片匯出時調整畫質與尺寸，具備基本壓縮能力，對於設計完直接上傳的使用情境非常方便；不過若要進一步更優質壓縮圖片檔案、最佳化網站速度，仍建議搭配專門的壓縮工具（如 TinyPNG）使用，效果會更好。
AstraYo 專業團隊提供 WordPress 客製化架站，為品牌打造專屬網站，即刻與AstraYo聯繫，我們依照你的需求提供專業規劃，從設計、功能到維護，協助你打造兼具美感與實用的網站。
