多數人替網站首屏做決定的時候，想的是「這裡該放一張吸睛的大圖，還是留白給文案講清楚」，而且大半當成美感偏好在挑，這禮拜覺得圖比較有氣勢就整張圖鋪滿，下禮拜嫌字太少又補一句標語卡在角落。這種挑法背後藏著具體代價，做錯的首屏，可能同時讓真人訪客沒讀完就滑走，也讓搜尋引擎與 AI 摘要系統完全讀不到這頁在講什麼。
真正該問的問題，從來不是「圖多一點還是字多一點比較好看」，而是「首屏這幾秒鐘該完成哪一份工作」，讓正在瀏覽的訪客，跟同時在爬這頁的搜尋引擎，都能立刻知道這頁跟他有什麼關係。這份工作要靠圖還是靠字撐起來，答案不是看流行版型多花俏，是看這個頁面被造訪的方式。
首屏該給圖還是給字，這道選擇題問錯了方向
「首屏該放圖還是該放字」這個問法本身，已經預設了圖與字是互斥選項，好像選了其中一種就代表放棄另一種。但這兩者從來不是二選一的陣營，而是同一件事的兩種手段，兩者要合作完成的工作是讓造訪的第一秒就交代清楚這頁在講什麼。假設有兩個首屏，一個是滿版產品情境照片，完全沒有可讀文字，另一個是密密麻麻一大段自我介紹，完全沒有圖片，兩者都會出問題，只是問題發生在不同的地方：前者讓真人與搜尋引擎都摸不清內容，後者讓讀者少了一眼進入情境的線索。
真正該問的，不是圖或字誰該上場，是這個首屏、這個當下要完成哪一份工作。一個頁面主要靠自然搜尋帶進完全陌生的訪客，跟一個頁面服務的是已經認得這個品牌、只是回來查資料的熟客，兩者需要首屏做的事完全不一樣。前者需要文字扛下這頁跟我有什麼關係這句核心訊息，後者可以讓圖片多分擔一些情緒與氛圍。純圖不帶文字的首屏，先在讀者與搜尋引擎兩端同時付出代價。
純圖不帶文字的首屏讓讀者與搜尋引擎都看不懂內容
「首屏放一張滿版大圖，不搭配任何可讀文字」是最常見的做法之一，尤其常見於強調視覺質感的形象頁與活動頁。但這個做法要付出的代價分成兩邊，一邊是真人訪客的注意力配置，另一邊是搜尋引擎與 AI 系統能不能讀到內容，這兩邊各自有具體的數據可以攤開來看。
讀者能不能一看就懂，決定他還願不願意往下看
Nielsen Norman Group（NN/g）在 2018 年做過一輪眼動追蹤研究，比對 2010 年的舊資料，發現使用者停留在「頁面折線以上」（above the fold，也就是不必往下滑就看得到的區域）的瀏覽時間占比，從 2010 年的 80% 降到 2018 年的 57%。乍看像是折線位置的重要性在下降，但 NN/g 同時指出，降幅主要反映長頁面變多了，折線位置本身的注意力落差本質沒有改變，一般網站仍有超過 42% 的瀏覽時間落在頁面最上方 20% 的區域，超過 65% 落在最上方 40%；在搜尋結果頁這個比例還更高，47% 落在最上方 20%，75% 以上落在最上方 40%。NN/g 建議把關鍵的商業與使用者目標保留在頁面最上方，次要資訊才往下放，並用清楚的標題與粗體字幫使用者辨認重點區塊。
同一份研究團隊在另一篇〈The Fold Manifesto〉裡，分析了 57,453 次眼動注視點後發現，折線正上方 100 像素的瀏覽量比正下方 100 像素多出 102%。另一組來自 Google 自家展示廣告研究的數據也呼應這個落差，折線以上廣告的可視率比折線以下高 66%。兩組數據平均下來差距約 84%，NN/g 的結論是使用者對折線上下內容的對待方式差異巨大，不是 5%、10% 這種小差距可以形容的。使用者不會因為好玩才往下滑，滑動本身是有目的的行為，折線以上的內容夠不夠吸引人，直接決定使用者願不願意付出往下滑這個額外的互動成本。如果首屏是一張沒有文字的圖，讀者連判斷這頁值不值得往下滑的線索都沒有，滑走的機率自然更高。
搜尋引擎與 AI 都讀不到圖片裡的文字
另一端的代價發生在機器讀者身上。首屏常見的做法是把標題文案直接燒進圖片裡，不管是整張圖片本身內嵌美術字，還是用 CSS 背景圖撐版、文字疊在圖片上，對搜尋引擎跟 AI 摘要系統來說，這段文字幾乎等於不存在。這不是危言聳聽，是 Google 官方文件白紙黑字寫的規則。Google Search Central 的〈圖片搜尋引擎最佳化最佳做法〉明確建議使用標準 HTML 圖片元素，並給出對照範例，較佳做法是 <img src="puppy.jpg" alt="黃金獵犬" />，不佳做法是把文字寫進 <div style="background-image:url(puppy.jpg)">黃金獵犬</div> 這種 CSS 背景圖裡。文件原話寫得很直接：「Google 不會為 CSS 圖片建立索引。」也就是說，如果首屏是一張 CSS 背景圖，文字又是燒進圖檔裡的美術字，這段文字對 Google 來說形同不存在。
Google 的 John Mueller 在 Reddit 上被問到「網站大部分文字都做在圖片裡，SEO 會怎樣」，他的回答是要務實判斷：「這些文字只是你頁面上本來就有的相同文字，例如公司名稱與地址，還是真的有實質內容，如果拿掉這些圖片，這些內容就會從你的網站上消失？」換句話說，重要且獨特的文字內容一定要有真正的文字版本，不能只活在圖片裡。這個判準同樣適用在 AI 摘要系統上，Google 的〈搜尋生成式 AI 功能最佳化指南〉說明 AI 摘要與 AI 模式的運作基礎是靠檢索增強生成，運用核心搜尋排名系統，從搜尋索引中檢索相關網頁再生成回覆。AI 摘要能看到的內容，來源仍是同一套搜尋索引，圖片裡讀不到、索引不到的文字，同樣進不了 AI 摘要的參考範圍。同一份文件也提到，加入高品質圖片和影片可以在網頁上輔助文字內容，官方原話把圖片定位成輔助，不是文字內容的替代品。
大圖優先的首屏是最常見的載入速度殺手
純圖無字的代價還不只在讀不讀得懂，首屏滿版大圖幾乎必然成為 Largest Contentful Paint（LCP）的判定元素，而且是全網最常見的 LCP 拖累來源之一。LCP 是 Core Web Vitals 三大指標之一，用來評估感知載入速度，門檻是 2.5 秒以內算良好。Google 官方 web.dev 對 LCP 候選元素的定義寫得很清楚，包含 <img>、<svg> 內的 <image>、<video>，用 CSS url() 函式載入的背景圖片，以及包含文字節點的區塊層級元素。換句話說，一段夠大的標題文字本身就可以是 LCP 元素，不是只有圖片才算數。web.dev 文中舉的實例是某個 Google 搜尋結果頁面，最大元素是一段純文字段落，在任何圖片或標誌載入完成前就已經顯示，全程都是 LCP 認定的元素。
HTTP Archive《2025 Web Almanac》的 Performance 章節在 2026 年 1 月發布，取樣 2025 年 7 月的資料，涵蓋數百萬個網站，發現目前桌機頁面有 74% 達到良好 LCP，行動裝置只有 62%。這份報告明確定義 LCP 判定元素通常是首頁橫幅圖片、標題，或一段顯著的文字區塊，同時指出 85.3% 的桌機頁面與 76% 的行動頁面，LCP 元素是一張圖片。這正是首屏大圖普遍拖累 LCP 分數的規模證據。效能監測平台 CoreDash 根據真實使用者流量統計，圖片型 LCP 元素的第 75 百分位載入時間是 744 毫秒，文字型 LCP 元素只要 388 毫秒，圖片型幾乎慢了一倍。CoreDash 也指出，用 CSS url() 背景圖當首屏是 LCP 優化的反模式，因為瀏覽器的預載掃描器根本找不到這張圖，等於把圖片本來就慢的問題再拖得更久。
這不是只影響一個技術分數，web.dev 的案例研究〈Vodafone：LCP 提升 31% 後，銷售量提升了 8%〉給出真正因果對照的證據。Vodafone 針對到達頁面做 A/B 測試，優化版的做法包含首屏圖片重新調整大小、避免載入可視區域外的圖片，結果比對照版 LCP 快 31%，直接帶來銷售量成長 8%，潛在客戶到訪率成長 15%，購物車到訪率成長 11%。這是官方公開、有 A/B 對照的因果案例，不是相關性推測。首屏那張圖有沒有被妥善處理，連帶影響的不只是頁面速度分數，是實際的營收數字。
純文字的首屏少了讓人一眼進入情境的圖像
前面兩節不是在主張首屏乾脆別放圖，誠實面對圖片的價值同樣重要。一張選對的圖，能在讀者還沒開始逐字閱讀前，就先建立情境與情緒連結，這是純文字，尤其是密密麻麻一段說明文字，做不到的效率。NN/g 在〈Ensure High Contrast for Text Over Images〉開頭就指出這個正面價值，眼動追蹤研究顯示，人們會被與自己當下任務相關、承載資訊的照片吸引，並傾向忽略純裝飾性圖片；圖片也能引發正向的情緒反應，促使使用者採取行動。
這正是純文字首屏相對弱的地方。文字要靠讀者自己在腦中組出畫面，圖片是直接給。一段說明產品情境的文字寫得再精準，讀者還是得花力氣把文字轉換成畫面，一張對的照片可以省掉這個轉換的力氣，讓讀者在一秒內感受到這是不是他要找的東西。判準因此不是要不要圖，是這張圖有沒有在做它該做的事，承載資訊、跟讀者當下的任務相關，而不是純粹填版面的裝飾。這也是為什麼下一步要問的不是圖或字誰上場，是這個頁面的性質決定了文字跟圖片各自該扛多少責任。
頁面的搜尋意圖決定首屏文字與圖片的比重
前面兩種代價，一種是純圖失分，一種是純字失分，追根究柢都在講同一件事：這個頁面主要靠什麼方式被看到，訪客進來的當下認不認得這個品牌，決定了文字要不要扛下第一句核心訊息，圖片要不要退到輔助位置。這裡沒有放諸四海皆準的黃金比例，只有適合這個頁面搜尋意圖與目標的比重，答案要看訪客是帶著陌生的搜尋意圖找上門，還是本來就認得這個品牌回頭查資料。
靠搜尋找上門的陌生訪客，文字得扛下第一句話
第一種情境是服務頁、部落格文章，或還沒累積品牌知名度、主要靠自然搜尋帶進陌生流量的頁面。這種頁面的訪客第一次落地，就要在幾秒內判斷這頁在講什麼、能不能解決他的問題，這份工作只能靠首屏的標題與價值主張這段真文字扛下來。圖片在這種情境只能當輔助，負責示意或情境化，不能指望圖片本身傳達訊息。
原因回到前面兩節已經攤開的證據：搜尋引擎與 AI 讀不到圖裡的字，一段燒進圖檔的標題文案對 Google 的索引來說形同不存在；讀者這邊也一樣，一個完全陌生的訪客不會有耐心對著一張圖自己腦補這頁的主題，他需要的是一句看得懂的話，告訴他這頁值不值得往下讀。對這類頁面而言，首屏的文字分量該優先於圖片的視覺震撼，圖片可以美，但不能取代那句核心訊息的位置。
已經認得你的訪客，圖片能扛下更多情緒與情境
第二種情境是品牌官網首頁、活動頁，或老客戶會回訪查資料的頁面，訪客本來就知道這是誰，也知道自己要找什麼。這種情況下，圖片可以承擔更多建立情緒與氛圍的工作，文字負擔可以更輕，一句精簡的定調文案就夠，因為訪客不需要靠首屏文字從零認識這個品牌。
但即使在這個情境，判準也不是拿掉文字，而是文字仍然在，只是不需要扛下說明的責任，改成扛定調與號召。呼應前面 NN/g 的論點，圖片能引發正向情緒反應這件事，套在已經認得品牌的情境最成立，因為讀者不需要圖片幫他建立這是什麼的認知，圖片只需要負責這感覺對不對。只不過同一篇研究也提醒，即使在這個情境，只要首屏還有任何文字疊在圖片上，可讀性仍然是硬門檻，對比不夠，情緒營造得再好，文字一樣讀不下去。
文字疊在圖片上，對比不足會讓兩者都失去作用
多數首屏最後還是會走文字疊加在圖片上這個折衷做法，不管是陌生訪客的頁面用小張情境圖搭配標題，還是熟客頁面用大圖搭配定調文案。但這個做法能不能成立，關鍵不在美感，在對比度。NN/g 在〈Ensure High Contrast for Text Over Images〉給出具體可執行的門檻，疊加在圖片上的文字，一般字級對比度至少要達到 4.5:1，大字級，也就是 18 級以上，或 14 級粗體以上，至少要 3:1。這是無障礙規範的門檻，不是設計品味問題。
原文區分了兩個概念，legibility 是辨識個別字元的能力，readability 是實際讀懂文意的能力。對比不夠時，讀者要嘛瞇眼硬讀，要嘛乾脆跳過這段文字，不管是哪一種，這段文字實質上都沒有發揮作用，前面幾節談的文字該扛的責任，也就落空了。具體的做法並不難，在文字後方加半透明遮罩，可以整張圖都加，也可以只蓋文字所在的區域；對圖片局部加模糊處理；加文字陰影或外框；或是乾脆把文字放在圖片本身較暗或較單調的區域。NN/g 的結論寫得很直接：「不需要在好用與好看之間二選一，只要同時兼顧兩者就能兩全。」
回到最開頭的那個問法，首屏該給圖還是給字，從來就不是一道選美感的題目。真正決定答案的，是這個頁面被誰看到、怎麼被看到，陌生的搜尋訪客需要文字先把話說清楚，認得品牌的熟客可以讓圖片多分擔一些情緒，不管哪一種，只要文字疊上圖片，對比度就是不能妥協的底線。下次要決定首屏怎麼擺，與其糾結該放哪張美圖，不如先問這個頁面主要靠什麼方式被找到，答案通常已經在那裡了。