一件外套要給不同身形的人穿，不能只靠「整件等比例縮小」打發，高個子穿起來肩線會歪掉，矮個子穿起來袖口拖到地上，版型得跟著身形重新剪裁才合身。banner 的處境很像，同一張視覺要放進桌機的橫向寬螢幕，也要塞進手機的窄直畫面，只用「整張等比例縮小」硬塞進去，常見結果是主體被切掉一半、文字擠到邊緣快看不見。這種依裝置比例重新調整版面、讓構圖不失真的做法，就叫響應式 banner 設計，重點不在把圖縮小，而在讓構圖本身能隨畫面比例重新分配。
沒抓好這套邏輯的 banner，往往上線後才發現問題。電腦版看起來好好的活動主視覺，換到手機瀏覽器，主角的臉被裁到只剩半顆頭，按鈕直接被擠出畫面外找不到，設計工夫跟著打了折扣。只要抓對安全範圍跟構圖邏輯，同一組素材不管裝置比例怎麼變，主體、文字、按鈕都還能穩穩留在畫面裡。先從「為什麼同一張 banner，桌機好看、手機卻被裁到重點」講起，再一路拆到安全範圍怎麼抓、什麼時候該分成兩張做。
為什麼同一張 banner，桌機好看、手機卻被裁到重點？
問題出在兩種裝置的可視畫面比例天生就不一樣。桌機瀏覽器打開，可視畫面接近橫向寬幅；手機直放，則整個反過來變成窄直幅，兩者的寬高比甚至可以差到三倍以上。同一張 banner 要塞進這兩種形狀完全不同的容器，若用最常見的「裁切置中」處理，也就是把整張圖從中心點裁一塊出來、填滿整個畫面，寬螢幕裁掉的多半是圖片上下兩端，窄螢幕裁掉的則是左右兩側。原本安排在畫面上緣的標語、兩側的裝飾主體，遇到這種裁法很容易被切掉一半，嚴重時整塊消失。
跟裁切置中相對的是「等比例縮放」，做法是整張圖等比縮小或放大，不裁切任何一塊，但容器形狀對不上時，不是上下留白、就是左右留白，版面看起來像貼了一張大小不合的貼紙。裁切置中則相反，容器填得滿，卻拿掉了圖片的一部分內容。這也是為什麼裁切置中最容易出狀況，它犧牲的往往不是背景的留白，而是精心安排過的主體或文字。
Google Ads 的回應式廣告圖片規範，就明訂廣告主要準備三種比例的素材：橫式 1.91:1、正方形 1:1、直式 9:16，並且提醒同一組圖片會依實際版位自動調整尺寸，同時留白區域不應超過整張圖的八成，主體要維持是視覺焦點。這代表同一張素材在不同比例容器裡會被系統自動裁切，並不是 banner 特有的麻煩，而是各家平台共通要面對的現實，只是不少人自己設計 banner 時，沒把這件事考慮進版面配置。
手機版與桌機版的可視比例落差
具體換算成數字更有感。桌機版 banner 常見的寬高比落在 3:1 到 2.4:1 之間，偏橫向寬幅；手機版 banner 或 App、網站首頁的主視覺，則多半落在 9:16 到 9:19.5 之間，偏窄直幅，兩者寬高比最多能差到三倍以上。以一張 3:1 的橫式 banner 為例，若直接等比例塞進 9:16 的手機畫面，原本在左右兩側的內容，可能有三到四成的寬度會被裁掉，這還只是「塞得進去但裁很多」的情況，遇到裁切置中，更常見的是連中間偏側邊的主體都保不住。
不是把圖縮小而已，是整個構圖邏輯要換一套
手機版 banner 常見的處理方式，是把桌機版那張圖直接等比例縮小，套進 App 或行動版網站的版位，這一步看起來合理，卻剛好搞錯了問題的層次。等比例縮放調整的只是整張圖有多大，構圖裡每個元素彼此的相對位置完全沒變；桌機版寬螢幕習慣把主體擺一側、文字擺另一側，左右並排，四周留白當緩衝。這種排法縮小後塞進手機的窄直畫面，文字容易被壓縮到快看不清，主體也常常被擠壓變形，看起來就像一張被硬塞進小格子的圖。
真正該換的是構圖邏輯本身，不是圖片大小。手機版需要的是重新構圖，把主體移到畫面正中央，文字從左右並排改成上下堆疊，讓每個元素在窄直的畫面裡都有自己站得住的位置，而不是延續桌機版橫向並排的邏輯硬套進來。等比例縮放只改了大小，重新構圖改的是元素跟元素之間的位置關係，這正是兩者最根本的差別。
不是每張 banner 都得整個重畫。判斷的關鍵在於兩件事：banner 上有沒有疊加大量文字或按鈕、主體本身是不是天生置中且左右對稱。假設是一張主體置中的商品情境圖，四周只有簡單留白，光靠抓好安全範圍、裁切置中通常就夠用；但如果 banner 上疊了活動標語、CTA 按鈕，或主體天生就偏一側，像是人物站在畫面左側、右側留大片背景，沿用同一種排法幾乎必然出狀況，這時候重新構圖幾乎是唯一選項。不少做外銷的中小企業官網，首頁主視覺常把產品圖放在畫面一側、標語放另一側，這種佈局若沒有針對手機版重新排過，窄畫面上很容易兩邊都顧不到。
banner 的安全範圍該怎麼抓，主體跟文字才不會被切到？
安全範圍的概念很直覺，先在設計稿上框出一塊不管畫面怎麼裁、這裡永遠會被看到的中心區域，把 logo、主標題、CTA 按鈕這些不能少的元素都放進這個範圍裡；四周留出的空間，才是可以被犧牲、被裁掉也沒關係的緩衝，通常用背景色塊或裝飾圖案填滿。這正是響應式 banner 設計裡最基本、也最容易被忽略的一步。抓安全範圍不需要憑感覺用猜的，因為社群平台、廣告平台處理不同裝置顯示時，早就用同一套邏輯訂出具體規格。
YouTube 的頻道橫幅規範是最具體的示範。官方建議上傳 2560×1440 像素的圖片，尤其是給電視螢幕顯示用；最小可接受 2048×1152 像素，但文字與 logo 真正安全的範圍，只有中央 1235×338 像素，換算下來，畫面四周超過一半的區域，隨時可能在不同裝置上被裁掉，只有正中央那一小塊才是保證看得到的。LinkedIn 的頁面封面圖片規格也是同樣邏輯，官方提醒封面圖片會依螢幕大小做水平或垂直裁切，建議把關鍵資訊放在遠離邊緣的位置，尤其避開右下角，置中安排才能確保在不同螢幕尺寸下都維持可見。
抓安全範圍的通則是，越靠近畫面中心越安全，越靠邊緣越容易被犧牲，不用每次都重新推算。哪些元素一定要放進安全範圍不能妥協：主標題、CTA 按鈕、logo，還有人像 banner 常見的人物臉部，這些一旦被裁掉，banner 等於失去意義。可以放邊緣、就算被裁也不影響傳達的，是背景、裝飾線條、大面積的留白，把這些犧牲品往邊緣擺，把不能犧牲的元素往中間收，安全範圍就抓對了。
主體置中安全，靠邊危險
主體的位置有一個簡單的判斷原則。只要這張 banner 有機會在不同裝置上被裁切邊緣，主體就該盡量安排在水平與垂直都接近中心的地帶，避免落在畫面最左或最右三分之一的區域。那正是不同比例容器最先犧牲掉的位置。如果拿到的素材主體本來就偏一側，像是人物站在畫面右邊三分之一處，寧可重新構圖、把主體挪到中間，或乾脆換一張構圖更居中的素材，也不要硬靠後製裁切去救，裁切能救的是畫面比例，救不回本來就偏掉的構圖。
文字與按鈕離邊緣越遠，被切風險越低
文字跟 CTA 按鈕是 banner 裡最禁不起被裁到的部分。文字被裁一半就失去意義，按鈕被裁到剩一半，連點都點不到。實務上的抓法，是讓文字區塊跟畫面邊緣保持一段緩衝，不要讓文字或按鈕的邊界直接頂著 banner 的四個邊，這段緩衝就是留給不同裝置裁切時的容錯空間。
Google Ads 的官方建議也呼應這個方向，圖片本身應避免直接疊加文字，連後製貼上去的商標圖層也不建議。真正被允許的，是商標本來就自然融入畫面的素材，例如商品包裝上原本印著的品牌標誌；針對回應式廣告裡會自動生成影片版位的素材，官方也特別提醒不要把文字或商標放在圖片邊緣，避免在自動組合調整時被犧牲掉。
手機版的文字字級也不該直接沿用桌機版的比例硬縮小。手機瀏覽距離雖然比桌機近，但畫面本身窄了很多，若字級照桌機版等比例縮小，常常會小到看不清楚，也容易被系統誤判成裝飾元素而非重要資訊，連帶影響可讀性跟點擊率。比較穩妥的做法，是手機版文字獨立設定字級跟行距，而不是被動繼承桌機版縮小後的結果。
桌機版跟手機版 banner，什麼時候該分開做兩張？
這個問題沒有「都分開做最保險」這種一刀切的答案，判斷的依據其實就是前面兩節推導出的東西：banner 上疊加的文字跟 CTA 有多少、主體是不是天生就非對稱，還有這張 banner 的更新頻率跟製作成本能不能負擔。
如果一張 banner 的主體本身置中對稱，文字量少到只有一句短標語甚至沒有文字，而且不常更新，那麼只靠抓好安全範圍、讓同一張圖搭配裁切置中，通常就足夠應付桌機跟手機的差異，不需要另外多做一張。
反過來，如果 banner 疊加的文字資訊量大，像是活動主標、副標、多個按鈕同時存在，主體強烈偏向某一側，例如人物站在畫面左側三分之一，或者這是一張需要常態更新的活動性 banner，那麼分開設計桌機版跟手機版兩張，幾乎是必須的，硬靠一張圖套安全範圍，遲早會遇到裁不乾淨的狀況。
兩種做法對後續維護成本的影響也不一樣：只做一張圖、靠安全範圍應付兩種比例，維護起來省事，改一次全站同步；分開做兩張，雖然多一道製作跟校對的工序，但長期換季、換活動時，兩個版本可以獨立調整內容，不會被同一張圖的構圖綁死。哪一種划算，取決於這張 banner 未來要更新的頻率，越常更換的 banner，分開做兩張的維護成本反而更低。
交稿前怎麼測試，才知道有沒有裁到重點？
交稿前與其憑感覺看一眼，不如照一套固定流程實際預覽過一輪。至少要在四種畫面寬度下各看一次：寬螢幕桌機、窄螢幕筆電、平板直向，還有手機直向，這四個斷點涵蓋了目前最常見的裝置比例區間，少測任何一個，都可能漏掉某個尺寸下的裁切問題。
每個斷點下，檢查清單可以聚焦在四件事：
- 主體是否完整：人像、商品、logo 有沒有被切到一半或整個消失。
- 文字是否可讀：字級在最窄的手機畫面下依然看得清楚，不會小到糊成一團。
- 按鈕是否完整可點：CTA 按鈕的邊界有沒有被裁到畫面外，點擊範圍是否還足夠大。
- 留白比例是否協調：被犧牲的緩衝區塊看起來自然，而不是因為裁切留下一塊不成比例的空白。
只要這四項在四個斷點下都通過，這張 banner 在不同裝置上失真、裁到重點的風險就已經降到很低。
banner 就像一件要改給不同身形穿的衣服。量身之前，先抓出「不管怎麼改都不能動」的核心版型，也就是響應式 banner 設計裡最關鍵的安全範圍，把主體、文字、按鈕都收進這個範圍裡；範圍以外的留白跟裝飾，才是真正可以彈性調整、甚至能被犧牲的地方。下次 banner 交稿前，花幾分鐘把手機版跟桌機版都各自預覽過一輪，比上線後才被發現「重點被切掉」，要省事得多。