一位製造業買方來到您的網站，看到的主視覺是一個時髦的 SaaS 儀表板。一位金融科技潛在客戶來了，看到的也是同一張圖。兩人都不覺得這個頁面是為他們打造的，幾秒內就離開了。問題不在於到達頁面沒有圖片，而在於不管訪客是誰、需要什麼，所有人看到的都是同樣的圖片。
到達頁面的圖片通常只被選一次，多半由設計頁面的人決定，然後展示給每一位訪客。在擁有多個產業與買家角色的 B2B 網站上，這代表大多數訪客看到的都是別人世界的畫面。讓主圖符合訪客的產業、職務或階段，是成本較低的個人化方式之一，因為不需要新文案，但前提是圖片要傳達具體的訊息。本文說明各種圖片類型的用途、影片何時值得使用、如何將視覺對應到區隔，以及決定這一切是否有效的效能與無障礙細節。
為什麼通用的到達頁面圖片在 B2B 中行不通
圖片通常是訪客第一眼看到的東西，因此在閱讀標題之前就已形塑第一印象。通用圖片本身傷害不大；真正的代價是錯失讓訪客看到熟悉事物的機會。
對於擁有多種買家人物誌的 B2B 公司來說，只用一組圖片會造成結構性劣勢。評估您平台的工程副總，與同樣在評估的行銷長，對視覺的期待不同。一位想看技術架構、串接或資料流程；另一位則對儀表板、廣告活動指標或 ROI 圖表有反應。當兩人看到的都是同一張籠統的辦公室照片時，誰都得不到讓他們繼續往下捲動的相關性訊號。帶他們進來的廣告也是如此；我們關於何時使用回應式多媒體廣告的指南說明了如何讓多媒體廣告素材與頁面保持一致。
在玻璃辦公室裡握手的圖庫照片是最常見的問題。它們一眼就能認出是圖庫素材，因此毫無加分作用，還佔據了原本可以放產品截圖、真實客戶或工作流程圖的空間。如果您要在到達頁面的視覺上測試一件事，就拿真實圖片（您的產品、客戶、團隊）與圖庫照片對照測試。
讓視覺與訪客分眾相符
個人化圖片背後的概念，是縮短從到站到「這是為我準備的」之間的時間。實際做法是把圖片版本對應到您已經在追蹤的分眾。如果您用訪客識別偵測公司產業、規模或地理位置，同樣的資料點就能決定頁面上出現哪些圖片。
將區隔對應到圖片的方式：
依產業呈現的視覺。對製造業訪客展示工廠現場，對金融服務業展示交易室，對醫療產業展示醫院工作流程。銷售的產品相同，但視覺情境會配合訪客的日常工作而改變。
依角色設計的視覺。技術型買家對架構圖、程式碼片段與串接流程有反應；商業型買家則對儀表板、圖表與成果指標有反應。讓視覺語言與買家的專業背景相符，代表您了解他們的觀點。
依階段調整視覺。首次訪客適合看到概括性的效益插圖，以建立您做什麼的印象。已看過產品內容的回訪者，則對詳細的截圖、比較表或客戶佐證反應較好。
公司規模。企業級訪客可能對展示規模、資安認證或跨團隊工作流程的圖片有反應。較小的公司則對展示速度、簡單易用與快速成效的圖片更有共鳴。
圖片類型及各自最適合的時機
不同的視覺元素在到達頁面上發揮不同的功能。了解這些差異，能幫助您有意識地決定哪些要個人化、哪些維持不變。
主視覺圖片決定第一印象，並框定整個價值主張。它佔據頁面上最寶貴的位置。展示產品實際使用情境的主視覺，最好是訪客熟悉的資料或場景，比抽象圖像更有說服力。對個人化頁面來說，主視覺是最自然的第一個變化元素，因為每位進站的訪客都會看到。
產品截圖能具體證明您賣的是什麼，但使用不當可能讓頁面顯得雜亂。一張標註了與訪客使用情境最相關功能的截圖，效果勝過多張沒有標註的截圖。如果您的區隔資料顯示訪客在意分析功能，就展示分析儀表板；如果他們在意整合，就展示整合面板。
插圖與客製圖像擅長化繁為簡。當您需要解釋抽象的工作流程或多步驟流程時，客製插圖幾秒鐘就能傳達需要好幾段文字才能說清楚的內容。對於需要依訪客技術程度調整說明的個人化頁面，它們特別有用。請在到達頁面文案簡報中註明每個區塊需要的視覺素材，讓設計與文案一起規劃。
社會認同圖片包括客戶標誌、團隊照片與客戶案例縮圖。這些都可以依訪客的產業或公司規模層級進行個人化。對一家中型 SaaS 公司來說，看到其他中型 SaaS 公司的標誌，會比看到無法產生共鳴的財星 500 大企業標誌更令人安心。我們的 B2B 到達頁面範例說明了每種頁面類型應優先呈現哪種實證元素。
背景圖片營造氛圍，卻不搶走注意力。細緻的漸層或幾何圖案，效果往往勝過攝影背景，因為它們增加層次感卻不會分散注意。這類元素很少需要個人化，因為它們的角色是襯托，而不是傳達相關性。
到達頁面上的影片：什麼時候值得放
影片是您能加入的最重的視覺元素，無論是頁面大小還是它要求的注意力。我們的看法是：到達頁面上的影片，應該回答一個訪客無法從截圖得到答案的問題，通常是「實際有人使用時是什麼樣子？」如果影片只是配上音樂重複標題，一張精心挑選的截圖能更快達到同樣的效果。關於到達頁面以外的影片，請參閱我們的B2B 影片行銷指南。
影片在 B2B 頁面上通常能發揮效益的地方：
- 在 Demo 與註冊頁面放產品導覽。用 60 到 90 秒展示核心工作流程，讓訪客在預約通話前就能自行判斷是否適合。游標移動要慢，介面在播放尺寸下要清楚可讀。
- 在後期階段頁面放上客戶故事。客戶用自己的話說明問題，是標誌無法提供的佐證。把它放在它所支持的論點旁邊，而不是放在另外的影片庫中。
- 網路研討會與活動頁面。30 秒的講者短片能證明這場活動值得花時間參加。活動結束後，再以錄影取代。
而它通常不適合的地方：作為標題後方自動播放的背景循環影片（會與文案競爭並拖慢載入時間），以及作為取得關鍵資訊的唯一途徑（許多 B2B 訪客是在上班時靜音瀏覽）。
加入影片又不拖慢頁面速度
- 使用預覽圖片，點擊後才載入播放器。完整的 YouTube 或 Vimeo 嵌入會在任何人按下播放前就載入腳本。Google 的 Lighthouse 文件建議以外觀元件延遲載入第三方嵌入內容，也就是用靜態預覽，在使用者互動時才換成真正的播放器。
- 延遲載入首屏以下的嵌入內容。如web.dev 的 iframe 延遲載入指南所述，為 iframe 加上
loading="lazy"即可延後載入畫面外的播放器。 - 所有影片都加上字幕。字幕能服務靜音觀看的觀眾，也是含音訊預錄影片的無障礙要求。
- 不看影片也要看得到 CTA。表單或按鈕絕不應該取決於有人看到最後。
衡量影片是否有幫助
GA4 的加強型評估功能會為已啟用 JS API 支援的嵌入式 YouTube 影片記錄 video_start、video_progress 和 video_complete 事件。有兩個數字比觀看次數更重要：播放率（播放次數除以頁面訪客數），以及有播放與沒播放的訪客各自的轉換率。第二個數字要小心解讀。會按下播放的訪客本來就比較投入，因此觀看者的轉換率較高，並不能證明是影片造成的。公平的做法是針對有影片與沒有影片的頁面進行 A/B 測試，並以轉換而非觀看時間來判斷。
影片也很適合個人化。製造業訪客與軟體業訪客可以看到同一段導覽，只是錄製時使用兩組不同的展示資料；一旦腳本完成，成本其實比想像中低。
個人化頁面的視覺層級
圖片會影響訪客在頁面上的瀏覽路徑。在文字多的頁面上，人們傾向先橫向掃過頂部，再沿左側往下（F 型模式）；在內容稀疏的頁面上，視線常從左上到右上再往下呈 Z 字形移動。請依這些路徑擺放圖片。
把個人化主視覺圖片放在 F 型的頂端，也就是視線最先落下的地方。輔助視覺沿著垂直瀏覽路徑擺放。如果圖像中使用方向性提示，例如人物的視線或圖表中的箭頭，請讓它們指向行動呼籲，而不是背離它。
尺寸會建立層次。較大的圖片代表重要性。如果您希望目標客戶的訪客專注在某個特定成果或功能上，就讓那張圖片成為頁面上最主要的視覺。次要圖片（例如客戶標誌或輔助截圖）應保持較小，用來強化而非互相競爭。
給主圖足夠的空間。一張清楚、符合區隔、周圍留白的圖片，比三張擠在一起爭奪注意力的圖片更容易閱讀，而且只需維護一個版本，而不是三個。
個人化到達頁面圖片的逐步工作流程
導入圖片個人化不需要重建整個網站。以下是一個從小規模開始、逐步擴展的實用工作流程。
步驟 1：挑選最大的合格分群。從您的分析工具或訪客識別工具拉出資料。哪些產業、公司規模或角色占了合格流量的大部分？先從規模夠大、可以衡量，而且差異明顯到換不同圖片確實有意義的分群開始。
步驟 2：稽核目前到達頁面上的圖片。列出流量最高的到達頁面上的每一張圖片。針對每一張，問自己：它能同樣打動三個客群嗎？如果可以，它要嘛是一張強而有力的通用圖片，要嘛是一張誰也打動不了的普通圖片。標記出客群專屬版本可以增加相關性的圖片。
步驟 3：為每個標記的版位製作 2 到 3 個圖片版本。不需要全面改版。以主視覺圖片來說，可能就是同一版面的三個版本，搭配不同的背景圖、不同的產品截圖或不同的使用情境插圖。保持構圖與 CTA 位置一致，這樣您測試的是圖片內容，而不是頁面結構。
步驟 4：設定以區隔為基礎的顯示規則。在您的個人化平台中，將每個版本對應到其目標區隔。為不符合任何區隔的訪客定義預設版本。使用每個區隔的測試帳戶預覽，確認對的訪客看到對的圖片。
步驟5：衡量並反覆優化。依區隔追蹤轉換率，而不只是看整體。一張能提升製造業訪客轉換的主視覺圖片，可能會降低 SaaS 訪客的成效。請在每個區隔內執行 A/B 測試，把圖片變更的影響與其他頁面元素區隔開來。在測試開始前就決定樣本數（我們的 A/B 測試樣本數指南說明了做法），至少執行兩整週，也不要因為儀表板數字好看就提早停止。
技術效能：速度 vs 視覺品質
晚到的個人化主視覺，比準時出現的通用主視覺更糟。主視覺圖片通常就是最大內容繪製（LCP）元素，因此它的大小和載入順序決定了頁面感覺起來有多快。
使用新式格式。Google 的文件指出，WebP 有損圖片比同等 JPEG 小25-34%，WebP 無損圖片比 PNG 小26%。AVIF 通常壓縮得更小。透過<picture>元素提供 AVIF 或 WebP，並以 JPEG 作為備援。
與其照抄別人的檔案大小上限，不如為您自己的頁面設定預算：在 PageSpeed Insights 中以行動裝置設定檢查主視覺的檔案大小與 LCP，並將任何明顯比預設版本更大的版本視為錯誤。
使用帶有 srcset 屬性的響應式圖片。對手機訪客提供 2000px 寬的圖片會浪費頻寬並延遲渲染。讓瀏覽器依視窗寬度選擇合適尺寸的圖片。對個人化頁面而言，這代表每個圖片版本都需要一組自己的響應式尺寸，但建置工具可以自動處理。
不要延遲載入主視覺。它位於首屏，延遲載入只會讓它更慢出現；請改為標記 fetchpriority="high"，只對頁面下方的圖片使用延遲載入。對於區隔版本，最乾淨的做法是在伺服器端或邊緣節點決定版本，讓正確的圖片從一開始就在 HTML 中。如果替換是在用戶端進行，請預留圖片的尺寸，避免載入時版面跳動。
所有圖片版本的無障礙設計
每個個人化圖片版本都需要自己的替代文字。展示製造業工作流程的主視覺圖片，替代文字應描述該場景，而不是可套用於任何版本的通用文字。螢幕閱讀器會朗讀頁面上的內容，替代文字應與該區隔中明眼訪客實際看到的內容一致。
好的替代文字會簡潔描述圖片內容，並與上下文相關聯。請控制在 100 個字元以內。裝飾性圖片（背景、間隔元素）應使用空的 alt 屬性，讓螢幕閱讀器略過。功能性圖片（例如有連結的圖像）則需要描述連結目的地的替代文字。
圖片載入失敗時會以視覺方式顯示替代文字，因此即使是網路緩慢的明眼訪客，替代文字也能作為備援。當您有個人化的圖片版本時，這是每個版本都需要獨特、具描述性的替代文字，而非共用佔位文字的另一個原因。
個人化視覺的常見錯誤
剛開始做圖片個人化的團隊，常會過度個人化。依訪客區隔替換頁面上的每張圖片，會造成維護負擔，也會稀釋真正重要的變更所帶來的影響。請把個人化集中在一兩個影響力最高的圖片版位（通常是主視覺與主要社會認同區塊），其餘保持一致。
另一個常見錯誤，是用區隔資料做出讓人感到被冒犯的假設。在訪客表明身分之前就顯示他們的公司標誌，已經越界了。顯示與其產業相關的圖像很有幫助；顯示他們辦公大樓的照片則讓人不安。分界在於情境相關性與監視之間。
同時測試太多版本是第三個陷阱。四個區隔乘以三個圖片版位，每個再有幾個版本，就已經產生數十種組合，遠超過 B2B 流量所能測試的範圍。在每個區隔內一次只測試一個變數，等到達統計顯著性，並在每項變更上建立信心後，再疊加更多變更。
對於正在執行更全面 B2B 到達頁面優化計畫的團隊，圖片個人化是合理的早期步驟，因為它需要的新內容比文案個人化少。問題在於它仰賴真實、客群專屬的視覺素材；如果您只能做到每個產業換一張不同的圖庫照片，不如把時間花在文案上。
從哪裡開始
拿出您流量最高的到達頁面，用一個問題檢視主視覺圖片：來自您最大分眾的訪客，能在圖中認出自己的工作嗎？如果不能，就換成他們會認得的產品截圖或客戶圖片，並與現有版本進行測試。只有在真實圖片勝過圖庫圖片之後，才值得為各分眾製作不同版本。如果您想在不自行建立規則的情況下提供這些版本，Markettailor 能將訪客識別資料串接到頁面內容，包括圖片。
