網頁 Banner 設計尺寸規格全攻略：解決變形、畫質差、點擊率低三大難題

設計網頁 Banner 最怕尺寸搞錯，喺手機睇變形，電腦睇又裁邊，真係頭都大！Banner 尺寸唔單止影響外觀，更直接關係到使用者體驗同點擊率。呢篇文章會直接俾你最新、最齊嘅跨平台尺寸規格表，仲會教你點樣利用響應式設計原則，確保每個裝置都顯示得靚仔。跟住我哋嘅實戰技巧，你都可以設計出專業又吸睛嘅 Banner，唔使再估估下！

網頁 Banner 標準尺寸指南

做網頁設計這幾年，最常聽到客戶問的問題就是：「Banner 應該做幾大？」說真的，這個問題沒有單一答案，但有清晰的框架可以依循。網頁 Banner 設計尺寸取決於用途、平台與裝置，搞清楚這幾點，才能從根本解決問題。

先從最常用的桌面版尺寸說起。全幅橫幅（Leaderboard）的業界標準是 970×250 像素，適合放在頁首或頁尾，視覺衝擊力強。如果是側欄廣告，300×250 像素（Medium Rectangle）是 Google Ads 認可的高效能尺寸，點擊率普遍較高。另一個常見的是 728×90 像素（Banner），多用於文章頂部或底部，適合資訊型網站。

以下是桌面版常用 Banner 尺寸快速參考：

• 970×250 px：全幅橫幅，適合主視覺展示
• 728×90 px：標準橫幅，常見於文章頁
• 300×250 px：側欄矩形，點擊率表現穩定
• 160×600 px：寬版直幅，適合長頁面側欄
• 300×600 px：半頁廣告，視覺面積大，品牌曝光效果佳

根據 Google AdSense 官方指南，300×250、728×90 和 160×600 是全球表現最穩定的三大尺寸，建議優先考慮。香港本地網站如果同時投放 Google Display Network，跟足這個規格會省很多後期調整的麻煩。

響應式 Banner 尺寸設定技巧

響應式網頁設計已是現代網站的基本要求，Banner 自然也不例外。問題是，很多設計師仍然用固定像素來設定 Banner 寬度，結果在手機上要麼縮得太小，要麼溢出畫面。

用相對單位取代固定像素

在 CSS 設定上，建議用 max-width: 100% 搭配 width 百分比，讓 Banner 圖片能隨容器自動縮放。圖片本身仍然以最大尺寸輸出（例如 1920px 寬），但透過 CSS 控制顯示大小，避免在不同裝置上失真。

行動裝置常用尺寸

• 320×50 px：手機版橫幅，頁首頁尾常見
• 300×250 px：手機版矩形，同樣適用，兼容性高
• 360×640 px：全屏插頁式，用於特定行銷場景

設定響應式 Banner 有一個實用技巧：先設計最小尺寸版本（手機版），確認核心訊息在小畫面清晰可見後，再往上延伸桌面版設計。這種「Mobile First」的思維，比起從桌面縮小更不容易出問題。

根據 Google Web.dev 的響應式圖片指南，使用 srcset 屬性可以讓瀏覽器根據裝置解析度自動選取合適圖片，對 Banner 畫質與載入速度都有正面影響，值得在 WordPress 網站中實作。

Banner 像素尺寸最佳實踐

「像素」和「解析度」是兩個常被混淆的概念。簡單說：像素決定圖片的物理尺寸，解析度（DPI）決定打印品質，而網頁顯示只看像素，不看 DPI。所以網頁 Banner 不需要設定 300 DPI，72 DPI 或 96 DPI 已經足夠，重要的是像素數量要夠。

不過，現代裝置普遍使用 Retina 或高密度螢幕（2x、3x 像素比），如果你的 Banner 只做了 1x 解析度，放在 iPhone 或 MacBook 上會明顯模糊。建議所有 Banner 圖片至少製作 2 倍像素尺寸，例如要顯示 960px 寬的 Banner，就輸出 1920px 的源文件，再用 CSS 縮小顯示。

實際操作步驟：

• 在 Figma 或 Adobe Illustrator 中，設定畫板為目標尺寸的 2 倍
• 匯出時選擇「@2x」選項，或手動設定輸出尺寸
• WordPress 上傳後，透過 CSS 設定 width 為實際顯示尺寸，讓圖片在高密度螢幕上保持清晰

網站 Banner 規格要求解析

檔案格式選擇也有講究：照片類 Banner 用 JPEG，透明背景用 PNG，而 WebP 格式在保持畫質的同時可減少約 25-35% 檔案體積，現代瀏覽器支援率已超過 95%，是值得優先採用的選項。

Banner 設計尺寸建議

光有正確尺寸還不夠，Banner 的視覺設計同樣影響成效。根據我們為香港客戶操作過的多個項目，設計上有幾個關鍵判斷點：

文字比例控制

Banner 面積有限，文字超過總面積 20% 容易顯得擁擠，也可能影響 Google Ads 的審批。建議主標題不超過 5-7 個字，副標或說明文字保持 1-2 行，留白反而能讓重點更突出。

視覺層次的優先順序

一個有效的 Banner 應該在 3 秒內傳達核心訊息。建議按照以下優先順序排列元素：

• 主視覺圖像：第一眼吸引注意
• 核心標題：傳達主要賣點或訊息
• CTA 按鈕：引導行動，顏色對比要夠強
• 品牌標誌：建立信任，位置不需搶眼但要清晰可見

色彩對比與可讀性

根據 WCAG 2.1 無障礙設計標準，文字與背景的對比度應達到至少 4.5:1。這不只是無障礙要求，也直接影響使用者能否在快速瀏覽中讀取 Banner 內容。

避免 Banner 變形與裁切

Banner 變形是最常見的問題之一，通常出現在圖片比例不符或 CSS 設定不當時。最典型的錯誤是直接把一張正方形圖片塞進橫幅容器，結果被強制拉伸——這種情況在香港中小企的自建網站中相當常見。

避免變形的正確做法：

• 永遠按照目標尺寸製作原始圖片，不要依賴 CSS 拉伸
• 使用 CSS object-fit: cover 搭配固定容器高度，讓圖片裁切而非變形
• 在設計階段預留裁切空間，核心內容不要放在邊緣
• 上傳前在不同螢幕比例下預覽效果

裁切問題則與安全區域有關。以 1920×600 的首頁橫幅為例，在 13 吋筆電上可能只顯示中間 1280px 的範圍，兩側會被裁掉。如果品牌名稱或電話號碼放在最邊緣，用戶根本看不到。

提升 Banner 畫質與專業感

畫質差的 Banner 給人的第一印象往往是「這間公司不夠專業」，這在香港競爭激烈的市場中是致命傷。畫質問題主要來自三個地方：源文件解析度不足、壓縮過度、以及錯誤的格式選擇。

圖片壓縮的正確方式

很多人直接用 Photoshop「儲存為網頁用」，壓縮到品質 60 以下，結果肉眼可見的馬賽克出現在漸層或陰影區域。建議使用工具如 Squoosh 或 TinyPNG，可以在視覺品質與檔案大小之間找到更精準的平衡點。一般而言，JPEG 壓縮在 75-85% 品質之間，肉眼難以分辨差異，但檔案大小可減少 40-60%。

向量元素優先

Banner 上的標誌、圖標、按鈕等元素，應盡量使用向量格式（SVG）而非點陣圖，這樣無論放大到多大尺寸都不會模糊。字體也應確認已嵌入或轉換為路徑，避免跨平台顯示差異。

Banner 安全區域與佈局

安全區域（Safe Zone）是 Banner 設計中一個容易被忽略但非常關鍵的概念。它指的是確保重要內容在所有裝置和顯示設定下都不會被裁切的區域。

一般操作原則：在 Banner 四邊各預留 10-15% 的邊距作為安全緩衝。以 970×250 的 Banner 為例，重要元素應集中在中央約 800×200 像素的範圍內。CTA 按鈕、主標題、品牌標誌這三樣東西，絕對不能放到安全區域之外。

在 Figma 中，可以建立參考線框架來標示安全區域，設計時直接對齊框架邊界。這個習慣能大幅減少後期因跨裝置裁切引起的修改時間，客戶 approve 後也不容易出現「點解手機睇唔到個電話號碼」的投訴。

吸引點擊的 Banner 設計

尺寸和規格做對了，點擊率（CTR）還是低？這時候問題通常出在 CTA 設計和視覺溝通效率上。根據 Think with Google 的研究，Banner 的 CTA 按鈕設計對點擊率有直接影響，視覺上要夠突出、文案要夠直接。

CTA 按鈕的最佳位置

水平橫幅（如 728×90）：CTA 按鈕應置於右側，因為用戶視線習慣從左到右，看完訊息後自然落在右方。垂直或矩形 Banner（如 300×250）：CTA 按鈕置於底部中央，符合「由上而下」的閱讀習慣。

讓人想點的設計要素

• 按鈕顏色與背景形成強烈對比，常見有效組合：藍底白字、橙底白字
• 文案使用動詞開頭，例如「立即查詢」「免費試用」「了解詳情」
• 加入緊迫感元素（如限時優惠）但避免過度，影響品牌信任感
• 圖像中的人物視線指向 CTA 方向，引導用戶注意力

行動裝置 Banner 優化

香港的手機使用率極高，Google Analytics 數據普遍顯示本地網站有 60-70% 流量來自行動裝置。如果 Banner 只針對桌面版優化，等同放棄了大半潛在客戶。

行動裝置 Banner 優化的核心在於「減法思維」：把桌面版的元素精簡，只保留最關鍵的一句話和一個 CTA。字體最小不低於 14px（行動版顯示），按鈕點擊範圍至少 44×44 像素（符合 Apple HIG 及 Google Material Design 標準），避免用戶因按鈕太小而點擊困難。

另外，行動裝置的載入速度直接影響 Banner 的曝光效果。根據 Google 的 Core Web Vitals 標準，圖片應在 2.5 秒內完成載入（LCP 指標）。使用 WebP 格式、實作懶加載（Lazy Loading），以及在 WordPress 中安裝圖片優化插件（如 ShortPixel），都是實際有效的手段。

測試方面，建議用 Google PageSpeed Insights 定期檢查圖片優化狀況，確保 Banner 不成為拖慢網站速度的元凶。

立即改善你的 Banner 設計

做好 Banner 設計不是靠感覺，而是靠清晰的規格意識和系統化的執行流程。整理一下這篇文章的核心要點：

• 按用途選對尺寸：桌面全幅用 1920×600，側欄用 300×250，手機橫幅用 320×50，跟足平台規格才能避免後期返工
• 2x 像素輸出是基本：高密度螢幕已是主流，單倍解析度的 Banner 放上去只會顯得不專業
• 安全區域要預留：四邊各留 10-15% 緩衝，核心內容永遠置中，跨裝置顯示才能穩定
• 壓縮格式要選對：WebP 是現時最佳選擇，JPEG 保持 75-85% 品質，不要為了縮細檔案而犧牲畫質
• CTA 要清晰有力：對比色、動詞開頭、放對位置，這三點做好，點擊率自然有改善空間

如果你現在有一個 Banner 正在用，不妨抽幾分鐘在手機上打開網站睇睇，是否清晰可見？CTA 按鈕是否容易點到？文字有沒有被裁切？很多時候問題一眼就能發現。有需要的話，歡迎聯絡我們團隊，提供專業的 WordPress 網頁設計及 Banner 設計服務，由規格制定到視覺呈現一手包辦。