網站設計廠商最常被問到的一個問題之一：「請問這邊要放什麼尺寸的圖片？」或是說「這邊 Banner 尺寸應該要是多少？」
事實上，這些問題乍看之下很單純，但其實有各種各式各樣的情況，因此難以簡單的回答一個絕對的數字。接下來我們這篇文章要分析釐清各種狀況，並且說明如何在不同情況下如何選擇適合的圖片尺寸。
這種情況最常見的就是首頁的 Banner，通常會是一張大圖片佔滿整個螢幕寬度。因此直覺當然是，圖片尺寸寬度等於螢幕寬度就對了，但事實是這樣嗎？可以先思考以下幾個問題：
答案當然是否定的，既使同樣是電腦也會有分 15 吋、13 吋，手機也有大小之分。除此之外，電腦螢幕是橫向的，而手機螢幕則是直向的，因此這兩者的比例也不一樣。舉例來說 Macbook 的寬高比例為 16:10、iPhone 的寬高比為 19.5:9。
如果你的狀況是 Banner 只是作為裝飾的背景，在圖片裡面沒有想要明確傳達資訊時，那麼我們會建議就讓超出螢幕範圍外的區域被裁切也沒關係。這邊以「集客數據行銷 Inbound Asia」的首頁第一區塊為例，你可以看到在桌面版本時可以看到背後的完整大樓，但在手機版時只會看到部分的大樓背景，由於重點是要傳達壓在 Banner 上的 HTML 文字而非背景圖片本身，所以這樣做是 OK 的。
小結：這個狀況無論使用哪一種尺寸的圖片都可以
如果你的狀況是 Banner 上帶有字的資訊，以這個 Visages 的例子來說，你可以看到為了維持 Banner 的比例，圖片的高度降低以外，因為要避免 Banner 過小還會設定一個最低高度，最終導致寬度仍然超出螢幕，因此超出螢幕寬度的部分也被裁切掉了。
小結：這個狀況沒有適合的圖片尺寸，因為沒有辦法預期 Banner 字的多寡、大小、位置以外，訪客的裝置寬高也是會影響呈現的結果。
如果你真的很想要完整呈現 Banner 內容，那麼你可以採用等比例縮放但不限制最小高度的解決方案。優點是保留了所有資訊，但缺點是如果上面的文字資訊太多看起來會太小。實際參考可以參考這個「立坽的小窩」
小結：這個狀況沒有適合的圖片尺寸，因為沒有辦法預期 Banner 字的多寡、大小、位置以外，訪客的裝置寬高也是會影響呈現的結果。
在不同螢幕尺寸下使用不同大小跟比例的圖片有可能可以解決前面的各種問題，不過仍然要想清楚有哪幾種尺寸大小要更換幾張不同的圖片，這對於美工是一個麻煩的工作以外，你也會需要請網站廠商開發這樣的功能讓你可以上傳不同尺寸螢幕對應到不同的圖片。
小結：假設真的要定義的話，螢幕的尺存其實是「無限多種」，因為訪客也是有可能縮放瀏覽器的大小和寬度，這個解法看起來很完美，但在實作上是難以達到完美的。
