網頁 Banner 尺寸要多大？其實有 3 種 Banner，先看你的是哪一種

在製作 ＷordPress 網站時，Banner (橫幅) 圖片的尺寸常常讓很多人困惑，不知道應該怎麼準備，常常有人問我：「Banner 尺寸多大？」

其實這個問題要先回到你的網站外觀，先決定好網站外觀呈現方式，才會知道不同類型 Banner 的大小和比例。

另外也要了解到，每個讀者看到的畫面都會不太一樣，不僅電腦螢幕是橫向、手機螢幕是直向，兩者的比例完全不同，再加上電腦螢幕有分不同尺寸像是 13吋、15吋等，而各家廠牌的手機長寬比例也不一樣，所以基本上讀者來到我們網站，大家看到的網站都會因為裝置不同，呈現的畫面有些差異。

▍延伸閱讀：WordPress 網站圖片尺寸建議、banner尺寸多少

今天就來聊聊 3 種常見的 Banner (橫幅) 類型，幫你輕鬆搞定 Banner 的尺寸問題囉！

3 種 ＷordPress 網站常見的 Banner 類型，分別為：

• 第 1 種：Banner 只是背景，可以被裁切
• 第 2 種：Banner 是一張有字的圖片，只能等比例縮放
• 第 3 種：手機版跟電腦版分別製作不同 Banner

以下我用這幾個類型的客戶網站做為例子，來為大家說明吧！

第 1 種：Banner 只是背景，可以被裁切

如果你的 Banner 只是作為背景使用，沒有特定資訊要完整呈現，建議使用較大的尺寸，像是 1920×1080 像素 電腦螢幕滿版的尺寸。這樣即使圖片被裁切，畫質依然清晰，整體效果也很不錯。

最佳 banner 尺寸

無論使用哪一種尺寸的圖片都可以，反正被裁切沒差，但是要橫的照片唷

參考網站：麓司岸餐坊

第 2 種：Banner 是一張有字的圖片，只能等比例縮放

如果 Banner 自己就是一張圖片，上面有文字或重要資訊，不能隨便裁切，就必須保持等比例縮放。

常見的尺寸是 1920×1080 (滿版) ，或說 1920 × N 像素 (N 就是看自己喜歡的高度)，總之寬像素通常固定是 1920 px 。

壞處就是手機版看字會比較小。另外，這類設計要注意的是，如果banner有好幾張，採圖片輪播方式呈現，那之後設計的 banner 都要固定是一樣的尺寸，放上去才會一致、才會好看。

最佳 banner 尺寸

沒有一個固定的適合的圖片尺寸，因為 Banner 自己就是一張圖，讀者裝置的「寬」和「高」也會影響呈現的結果。要說建議的話，就是寬像素固定在 1920 px，長像素在 1080 以內。

參考網站：流域學校

第 3 種：手機版＆電腦版分別製作不同 Banner

手機版＆電腦版要分別製作不同的 Banner，這個真的就很看時間和成本考量！

好處當然就是電腦、手機不同裝置看起來都會很美，但就要請平面設計師製作兩種版本的 banner，一張直的給手機用、一張橫的給電腦用。

• 電腦版: 常用 1920×600 像素 或 1920×800 像素。寬像素固定在 1920px 就對了，長度就看個人喜好。
• 手機版: 常用 N × 428 像素 (N可用自己喜歡的長像素)

最佳 banner 尺寸

可以參考上面的常用尺寸。其實螢幕尺寸百百種，因為讀者也有可能縮放瀏覽器的大小，所以在呈現上幾乎是無法有固定的呈現方式給讀者的

參考網站：擺溪流展覽

安妮小結

大家覺得哪種 banner 形式是最好的呢？

其實沒有一個最好的 Banner 形式，對你來說最方便、最能達到目標的，就是最好的 banner 類型。

我自己最喜歡的是第一種 Banner 類型，最具有方便性與機動性，因為如果後續要更動背景圖、文案，都是 5 分鐘內可以解決的事。有些業主公司內部會時常更新 Banner 設計，以搭配電商活動， 那就會選第二種 Banner 形式。有些網站注重美觀，Banner做好以後基本上就不會換了，就會選擇第三種形式。

所以 Banner 跟很多事情一樣，適合你的，就是最好的。

希望這篇文章能幫助你輕鬆搞定 Banner 尺寸，讓你的網站更有吸引力！如果不知道該怎麼規劃 Banner，歡迎來找我聊聊囉！

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