你是否知道如何跟設計師溝通「網頁 Banner 尺寸」呢？無論是外包製作網站、自行使用 WordPress、Wix 等服務架站，都會面臨需要製作頁首（Header）圖片而與設計師溝通的情境，或在商務中有 Banner 圖片（橫幅廣告、橫幅圖片）的製作需求，讓許多人為此而困擾。
鑒於網路上現有中文資訊都過於老舊，本篇將讓你用 3 分鐘學會如何跟設計師、外包製作團隊溝通，網頁 Banner 尺寸究竟該如何調整。
你可能感興趣的相關文章：ＷordPress 網站專用的 GA 設定方法？用 Site Kit 3 分鐘掌握網站流量！
設計的超基礎知識
網頁圖片尺寸的單位
不同的場景都需有不同的單位，氣溫有華氏跟攝氏度，重量則有公斤、公克、臺斤等，而因為製作網路圖片等素材，會依據不同裝置而有不同大小，所以我們用的單位不會是幾公分、幾公尺，而是用幾像素（Pixel）來衡量。
什麼是像素？簡單理解Pixel是什麼
像素（Pixel）又常見縮寫成 Pixel ，它是螢幕呈現畫面的最小單位。
例如我們說電腦解析度是 1920*1080 ，就代表這個畫面是由 1920 x 1080 個小點組成，相較於 800 * 600 的解析度（小點數量較少），就可以知道 1920*1080 顯示的會比較細膩、豐富。
所以我們之所以要理解「網頁 Banner 尺寸」、「網頁首圖（Header）」，就是為了能以最小的體積，讓潛在消費者跟用戶能有最好的視覺體驗，不會看到醜醜、粗糙的圖片。
溝通網頁圖片尺寸實務
與設計師溝通
電腦的網頁 Banner 尺寸該多寬？
以橫幅滿版而言，製作寬度為 1920 px 的圖片，即可讓 97.98 % 以上的用戶有完美體驗。若是想要更進一步，則可以將網頁 Banner 尺寸寬度製作為 2560 px 。
那麼，圖片尺寸該多高？
這就取決於你想要呈現 Banner 比例，有人想要做的窄一些、有人想要做成佔滿整個螢幕，因此網頁圖片高度就很因人而異。
不過若要製作滿版的圖片，基本上電腦（桌機、筆電皆相同）目前都是 16:9 的螢幕，所以 1920 px 寬度的話，不到 1080 px 的高度就可以達到滿版效果，2560 px 寬度則是 1440 px 內即可。
為何要說「以內」？
因為考量到瀏覽器上方會有其他元素（頁籤列、網址列、書籤列…等），實務上若你的網站Banner 不是那種自動跳出覆蓋全螢幕的，螢幕的高度都會被上述的元素吃掉一部分，可以用較少的像素達成滿版效果。
若是使用 WordPress 等工具架設網站，雖然高度可自由設置，但原則上建議「寬:高」的比例為「16:N+」N+為任意正整數，這樣會更容易操作頁面調整。
手機的網頁 Banner 尺寸該多寬？
以頁首（Header）需求來說，原則上電腦、手機、平板都用同一張圖即可，不過若是因為以下兩點原因，則需要了解手機的網頁 Banner 尺寸。
1. 希望加快裝置載入速度
2. 想獨立分別設計不同裝置的 Banner 或頁首
各家手機的長寬比例、解析度都有非常大的差異，使用寬度 428 px 的設計，基本上能解決 99 % 以上的使用場景。
或是你如果真的很在意、擔心未來幾年不知道解析度會如何變化，就直接做個寬度 500 px的吧。
平板的網頁 Banner 尺寸該多寬？
平板（Tablet PC）滿版寬度可以使用 1024 px，高度同樣針對想要呈現的樣式個別設定。
如果你在遙遠的未來看到這篇文
用統計網站查詢現行網頁尺寸/網站尺寸
如果你在三、五年後（例如 2027 年之後）看到這篇文，很可能適用的網頁設計尺寸又改變了（可能到時候解析度更高？）就上網查目前螢幕最大的解析度，照最大的做準沒錯。
用 Adobe 查詢主流尺寸
把 Adobe XD 打開，會跳出目前主要的畫布尺寸，可以直接參考。
本篇數據引用自統計網站 Statcounter 。
