一筆關鍵字廣告費砸下去，訪客準時落在官網首頁，畫面完整跑出來，捲軸都還沒滑動，分頁卻先關掉了。這種事情比想像中常發生。文案改了又改，按鈕顏色也測過幾種版本，頁面速度優化到位，訪客還是留不住。多數人回頭檢查時，會先看標題、副標、按鈕文字，卻漏掉那張撐滿整個螢幕、訪客進站第一眼就會看到的首圖。
首圖是訪客登陸首頁時最先落點的視覺區塊，通常佔滿第一屏的大半版面，比任何一句文案都先被眼睛掃過、被大腦判讀完畢。網站首圖選擇做對了，等於在訪客還沒讀到一個字之前，就先替品牌說了一句話；選錯了，後面文案寫得再好，訪客也不會留下來看。
這篇要拆的是幾種在台灣網站上很常見的首圖失敗案例，全部都指向同一件事，這張圖有沒有讓訪客覺得「這是我要找的」，而不是秒退離開。看完你會知道自己的首頁踩到哪一種、又該往哪個方向調整，先從首圖為什麼能在短短幾秒內就決定訪客去留講起。
為什麼首圖決定訪客要不要留下來？
卡爾頓大學（Carleton University）的研究團隊 Lindgaard、Fernandes、Dudek 與 Brown 在 2006 年做過一個實驗。研究只讓受測者看網站畫面 50 毫秒，幾乎是眨眼時間的十分之一，受測者依然能對這個網站的視覺美感給出評價，而且這個評價和多看了 500 毫秒之後給出的評分高度一致。換句話說，訪客對一個網站順不順眼、可不可信的第一印象，幾乎在畫面跑出來的瞬間就定案，後面看得再久，多半也只是在替這個瞬間的判斷找理由。
這背後有兩個機制在同時運作。第一個來自 Google Research 團隊 Tuch、Presslaber、Stöcklin、Opwis 與 Bargas-Avila 的研究，發現畫面的視覺複雜度，以及畫面跟訪客既有期待長不長得像同類網站的原型相符度，在 50 毫秒、甚至縮短到 17 毫秒的曝光時間內，就已經會影響訪客對美感的判斷；原型相符度越高，訪客越傾向認為這個網站可信、討喜。也就是說，如果首圖不符合訪客心裡這類服務的網站該長什麼樣子的既有印象，第一印象就已經先扣分，不管後面文案寫得多用心，都得先把這筆扣分補回來。
第二個機制來自 Nielsen Norman Group 針對橫幅盲視長年累積的眼動追蹤研究，發現畫面只要落在訪客慣性認定是廣告版位的位置，或看起來像那種到處都在放的樣板視覺，訪客的注意力機制就會直接跳過，連內容是什麼都不會進入意識。首圖如果做得太像樣板、太用力想營造高級感，反而會被歸類成可以忽略的雜訊，等於白白放了。
這兩個機制合起來，剛好能解釋台灣很多網站首頁犯的錯，不是圖不夠精美，而是精美的方向用錯了地方。第一種常犯的錯，就藏在那些看起來放哪個產業都通用的示意圖裡。
抽象示意圖，讓訪客看不懂你在賣什麼
想像一家承接客製化網站設計的團隊，首頁最顯眼的位置放了一張齒輪咬合、雲端連著幾條發光線條的插畫。這張圖出現在做網站設計的公司首頁沒問題，出現在做會計軟體、做人資系統，甚至做寵物用品電商的首頁，一樣完全通用，訪客根本分不出差異。
上一節提到的原型相符度，在這裡就會出問題。這類萬用向量插畫找不到任何具體對應物，跟任何一家同類服務都能互換，訪客看完三秒，答不出這個網站提供什麼，等於直接浪費掉那幾秒鐘的機會。這種圖看起來很像那麼回事，實際上什麼都沒說。
判斷一張首圖是不是過度抽象，看兩個地方就好：這張圖能不能講出具體是什麼，是拍一支手機、一張辦公桌、一位正在操作系統的人，還是完全找不到實體對應物的齒輪與雲朵；換掉品牌名字，這張圖放到隨便一個同業網站上還通不通。只要通得過，就代表這張圖沒有真正在替這個網站說話。
改善方向很直接：換成跟自家商品、服務、使用情境直接相關的具體畫面，例如實際操作介面的畫面、產品本身，或使用情境的真實場景，而不是隨便一張能套進任何產業的比喻圖。
抽象示意圖的問題是「看不出在賣什麼」。另一種更常見的失敗剛好相反，訪客一眼就認出這是什麼，只是認出的是「這張圖是買來的」。
免費圖庫的既視感，訪客為什麼會直接略過？
一張笑容燦爛到有點不自然、打光均勻得像攝影棚剛拍完的照片，握手的兩個人西裝筆挺，背景是落地窗辦公室，這種畫面訪客不用細看就認得出來，這是圖庫照片，而且很可能在別的網站上也見過同一張。
這正好命中上一節提到的橫幅盲視。訪客的注意力機制不是根據這張圖好不好看做篩選，而是根據這張圖像不像廣告或樣板做篩選。越通用、越像庫存的畫面，越容易被歸類成可以直接跳過的雜訊，跟畫面本身的美術品質反而沒什麼關係。Nielsen Norman Group 的橫幅盲視研究也指出，這種歸類是下意識、幾乎不經思考的判斷，訪客不是決定要略過，而是視覺系統自動把它濾掉。
Webflow 在講首圖挑選原則時，也特別點出這個問題。對有具體商品或服務的網站來說，圖庫照片跟自家實際提供的東西對不上，反而會拖慢訪客的判斷，甚至讓人直接離開。
改善方向也很清楚：真實的團隊照片、真實的產品或工作場景，永遠比外包的擺拍照更有辨識度；如果預算上真的只能用圖庫，至少要挑構圖夠特殊、不是那種到處都在用的萬用款，降低撞圖的機率。
圖片本身的內容選對了，接下來還有一關常常被忽略，那就是文字疊上去之後，訪客看不看得清楚在讀什麼。
文字疊在複雜背景上，手機版最容易看不清楚
WebAIM 在《The WebAIM Million 2025》裡分析了全球前 100 萬個首頁，發現文字對比度不足，也就是文字顏色跟背景色差距不夠、低於 WCAG 2 訂出的可讀門檻，是所有首頁裡最常見的問題，出現在 79.1% 的首頁上，平均每一頁就有 29.6 處對比不足的文字。這個數字代表的不是特例，而是多數網站首頁都在犯的通病，而首圖疊字正是最容易犯下這個問題的地方。
常見的錯法很直觀。標題文字直接鋪在畫面最雜亂、明暗變化最大的區塊，沒有加深色遮罩，也沒有做漸層過渡，桌機螢幕勉強能辨認，手機版裁切之後問題更明顯，焦點物件可能被移到畫面邊緣，文字連帶被擠壓甚至截斷，訪客連這個網站在講什麼都看不清楚。
W3C 的 WCAG 訂出明確的量化門檻：一般內文對比需達到 4.5:1，大型顯示文字，包括放在首圖上的標題，門檻放寬到 3:1；只要低於這個比例，文字在正常視力下都會變得吃力，遑論在戶外強光或手機小螢幕上閱讀。
改善方向不難做，只是常被跳過：在文字底下加一層深色遮罩或漸層，把對比度直接拉到門檻之上；把標題留在畫面相對乾淨、不會被裁切的安全區內；桌機版與手機版分開設計裁切點，而不是同一張圖等比例縮放了事。
文字對比顧好了，首圖不一定就沒問題，有些首圖連對比都還沒讓訪客看出破綻，就先在載入階段把訪客弄丟了。
首圖太重，訪客連圖都還沒看到就關閉分頁
為了讓首頁看起來夠有質感，把一張沒壓縮過的高解析度大圖直接放上首頁，是另一種常見的失誤方向。圖片本身的內容跟文字對比都沒問題，問題出在檔案大小，訪客的裝置還在把這張圖一點一點下載下來，畫面遲遲跑不出來，而多數人根本等不到那一刻。
Google 在 web.dev 的 Core Web Vitals 文件裡，把最大內容繪製時間，也就是 Largest Contentful Paint，簡稱 LCP，訂為衡量網頁載入體感的核心指標之一，多數情況下，LCP 量到的正好就是首圖跑出來的時間點。門檻訂得很明確：2.5 秒以內算良好，超過 4 秒就被判定為不佳。首圖如果沒壓縮過，實際載入時間常常遠遠超過這個門檻，而訪客的耐心通常撐不到那麼久，秒退往往就發生在這個階段。
Google 另一份 WebP Compression Study 的實測顯示，同樣的畫質水準下，WebP 格式的檔案大小比 JPEG 小 25% 到 34%，比 PNG 小約 26%。單純把首圖從 JPEG 或 PNG 轉存成 WebP，通常就能把載入時間拉回門檻之內，不需要犧牲畫面的清晰度。
改善方向就三件事：先把檔案壓縮到合理大小，轉存成 WebP 格式，再實際測一次載入時間，確認落在 Google 訂出的良好門檻裡。內容選對、對比顧到，檔案大小這關沒守住，前面做的努力還是可能白費。
檔案、內容、對比這幾個技術面顧好之後，還缺一套簡單的方法，讓你回頭檢查自己的首圖撐不撐得住。
先問自己這三題，看首圖過不過關
前面四種常見的失敗案例，換句話說都在講同一件事，網站首圖選擇比的就是有沒有通過訪客的第一眼審查。與其記住四個案例故事，不如把它們收斂成三個可以隨時自問的問題，不管什麼順序檢查都行，只要有一題答不出來，這張首圖大概就該換了。
- 三秒瞄過這張圖，答得出「這是不是我要找的」嗎？這一題在檢查畫面符不符合訪客對這類服務原本的期待，也就是前面提到的原型相符度；答不出來，代表這張圖跟訪客心裡的預期對不上。
- 拿掉旁邊的文字，這張圖自己說得出你們是做什麼的嗎？很多首圖是靠標題文案硬撐意義，圖本身只是裝飾；把文字蓋住之後，如果畫面完全看不出在提供什麼服務，就是掉進了抽象示意圖的陷阱。
- 把品牌名字換掉，這張圖還能一眼認出是你嗎？這一題在檢查獨特性；如果換掉名字之後，這張圖放到同業任何一家網站都不違和，代表它離免費圖庫的既視感只差一步，訪客的注意力機制照樣會把它當成可以忽略的樣板。
三題都答得出來，這張首圖大概就撐得住訪客那幾秒鐘的審查；只要有一題卡住，代表已經抓到該從哪裡下手調整。
首圖不需要追逐動畫特效、視差捲動這些流行一時的手法，能不能通過訪客那三秒鐘的審查，比畫面炫不炫重要得多。網站首圖選擇做對與否，看的不是排場，而是撐不撐得住訪客那幾秒鐘的審查；真正有用的首圖，只是誠實回答了訪客心裡那句「這是不是我要找的」。
首圖也不是放上去就一勞永逸的資產。產品調整了、服務範圍變了、品牌視覺重新設計過，都是回頭把這三題再問一次的時機，首頁換上的下一張圖值不值得留住訪客，把這三題重新問一遍就知道。