一位制造业买家进入您的网站，看到的首屏图片是一个时髦的 SaaS 仪表盘。一位金融科技潜在客户访问时，看到的也是同一张图片。两人都不觉得这个页面是为自己打造的，几秒钟内就离开了。问题不在于落地页缺少图片，而在于无论访客是谁、需要什么，展示的都是同样的图片。
落地页图片通常只选一次，一般由设计页面的人决定，然后展示给每一位访客。在一个面向多个行业和买家角色的 B2B 网站上，这意味着大多数访客看到的是别人的世界。让主图与访客的行业、角色或阶段相匹配，是成本较低的个性化方式之一，因为它不需要新文案，但只有当图片传达了具体信息时才有用。本文介绍每种图片类型的用途、视频何时值得投入、如何把视觉内容映射到细分，以及决定这一切能否奏效的性能和无障碍细节。
为什么通用的落地页图片在 B2B 中行不通
图片通常是访客视线最先落下的地方，所以它们在标题被阅读之前就塑造了第一印象。一张通用图片本身伤害不大，代价在于错失了展示访客熟悉之物的机会。
对于有多个买家画像的 B2B 公司，只用一套图片会造成结构性劣势。评估您平台的工程副总裁与做同样事情的 CMO，对视觉的期待不同。一个想看技术架构、集成或数据流；另一个对仪表盘、营销活动指标或 ROI 图表更有感觉。当两人看到的都是同一张笼统的办公室照片时，谁都得不到让他们继续往下看的相关性信号。带他们来的广告也是如此；我们关于何时使用自适应展示广告的指南介绍了如何让展示广告创意与页面保持一致。
在玻璃办公室里握手的图库照片是常见的反面典型。它们一眼就能认出是图库图片，所以毫无价值，还占据了本可以放产品截图、真实客户或工作流程图的位置。如果您只在落地页视觉上测试一件事，就用真实图片（您的产品、您的客户、您的团队）去和图库图片对比。
让视觉元素匹配访客细分
个性化图片的初衷，是缩短从到达页面到意识到“这是为我准备的”之间的时间。实际做法是把图片变体对应到您已经在跟踪的细分上。如果您用访客识别来检测公司的行业、规模或地区，同样的数据就可以决定页面上显示哪些图片。
将细分人群映射到图片的方法：
按行业展示视觉内容。向制造业访客展示工厂车间，向金融服务业展示交易台，向医疗行业展示医院工作流程。销售的产品是同一个，但视觉场景会随访客的日常工作环境而变化。
基于角色的视觉素材。技术型买家对架构图、代码片段和集成流程图更有感觉；业务型买家对仪表盘、图表和成果指标更有感觉。让视觉语言与买家的专业背景相匹配，表明您理解他们的视角。
基于阶段的视觉素材。首次访客适合看概括性的利益点插图，以了解您是做什么的。已经浏览过产品内容的回访者，对详细截图、对比表或客户证明点反应更好。
公司规模。企业级访客可能对展示规模、安全认证或多团队协作流程的图片更有感觉。小公司则更认同展示速度、简便和快速见效的图片。
图片类型及其各自的最佳使用场景
不同的视觉元素在落地页上承担不同的功能。理解这些区别，有助于您有意识地决定哪些要个性化、哪些保持不变。
首屏主图决定第一印象，并为整个价值主张定调。它占据页面上最宝贵的位置。展示产品实际使用情况的主图（最好用访客熟悉的数据或场景），比抽象图形更有说服力。对于个性化页面，主图自然是第一个可以变化的元素，因为每位到访者都会看到它。
产品截图能具体证明您卖的是什么，但使用不当会让页面显得杂乱。一张突出与访客使用场景最相关功能的标注截图，比多张没有标注的截图效果更好。如果您的细分数据显示访客关心分析功能，就展示分析仪表盘；如果他们关心集成，就展示集成面板。
插画和定制图形擅长化繁为简。当您需要解释一个抽象的工作流或多步骤流程时，定制插画几秒钟就能传达需要好几段文字才能说清的内容。对于需要根据访客技术水平调整讲解方式的个性化页面，它们尤其有用。请在落地页文案简报中注明每个模块需要哪种视觉素材，让设计和文案同步规划。
社会证明类图片包括客户 logo、团队照片和客户案例缩略图。这些都可以个性化，展示访客所在行业或公司规模档位的 logo。一家中型 SaaS 公司看到其他中型 SaaS 公司的 logo，会比看到无法产生共鸣的财富 500 强 logo 更安心。我们的B2B 落地页案例展示了每种页面类型应该以哪种证明元素开篇。
背景图片营造氛围，又不抢夺注意力。微妙的渐变或几何图案往往比摄影背景效果更好，因为它们增加了层次感又不分散注意力。这类元素很少需要个性化，因为它们的作用是衬托，而不是传递相关性。
落地页视频：什么时候值得放
视频是您能添加的最“重”的视觉元素，无论是页面体积还是对注意力的要求。我们的观点：落地页上的视频应该回答一个访客无法通过截图得到答案的问题，通常是“真正有人使用时是什么样子？”如果视频只是配着音乐重复标题，一张精心挑选的截图能更快达到同样效果。落地页之外的视频，请参阅我们的 B2B 视频营销指南。
视频在 B2B 页面上通常能带来回报的地方：
- 在演示页和注册页放置产品讲解视频。用六十到九十秒展示核心工作流程，让访客在预约通话前自行判断是否合适。光标移动要慢，界面在播放尺寸下要清晰可读。
- 在后期阶段页面上放客户故事。客户用自己的话讲述问题，是客户标志无法提供的证明。把它放在所支持的论点旁边，而不是放进单独的视频库。
- 网络研讨会和活动页面。一段30秒的讲者片段能说明这场活动值得花时间参加。活动结束后，用录像替换它。
以及它通常不适合的地方：作为标题后面自动播放的背景循环视频（它会与文案争夺注意力并拖慢加载），以及作为获取关键信息的唯一方式（许多 B2B 访客在上班时浏览，并且关闭了声音）。
添加视频而不拖慢页面
- 使用封面图，点击后再加载播放器。完整的 YouTube 或 Vimeo 嵌入会在任何人点击播放之前就加载脚本。Google 的 Lighthouse 文档建议用外观层延迟加载第三方嵌入内容，即先显示静态预览，在用户交互时再替换为真正的播放器。
- 对首屏以下的嵌入内容使用延迟加载。为 iframe 添加
loading="lazy"可以推迟加载屏幕外的播放器，详见 web.dev 的 iframe 延迟加载指南。 - 为所有内容添加字幕。字幕服务于静音观看的用户，也是带音频的预录视频的无障碍要求。
- 不看视频也能看到 CTA。表单或按钮绝不应依赖于访客把视频看完。
衡量视频是否有帮助
对于启用了 JS API 支持的嵌入式 YouTube 视频，GA4 的增强型衡量功能会记录 video_start、video_progress 和 video_complete 事件。有两个数字比观看次数更重要：播放率（播放次数除以页面访问者数）以及播放过视频的访问者与未播放者的转化率对比。对后者要谨慎：点击播放的访问者本来就更投入，所以观看者转化率更高并不能证明是视频带来的。公平的测试是对有视频和无视频的页面做 A/B 测试，以转化而非观看时长来评判。
视频也很适合个性化。制造业访客和软件业访客可以看到用两套不同演示数据录制的同一段讲解视频，一旦脚本写好，成本比听起来要低。
个性化页面的视觉层级
图片决定了访客在页面上的浏览路径。在文字密集的页面上，人们往往横扫顶部，再沿左侧向下看（F 型模式）；在内容稀疏的页面上，视线常从左上到右上再往下呈之字形移动。请根据这些路径放置图片。
将个性化首屏图片放在 F 形的顶部，也就是视线最先落下的地方。辅助视觉元素沿纵向浏览路径排列。如果图片中使用了方向引导，例如人物的视线或图表中的箭头，请让它们指向您的行动号召，而不是背离它。
尺寸决定层次。图片越大，越显重要。如果您希望来自目标客户的访客关注某个具体成果或能力，就把那张图片作为页面上的主视觉。客户 Logo 或辅助截图等次要图片应保持较小，起强化作用而不喧宾夺主。
给主图留出空间。一张清晰、与细分人群匹配、周围留白的图片，比三张挤在一起争夺注意力的图片读起来更快，而且只需维护一个变体而不是三个。
落地页图片个性化的分步工作流程
实施图片个性化并不需要重建整个网站。下面是一个从小处着手、逐步扩展的实用工作流程。
第1步：选出规模最大的合格细分。从分析工具或访客识别工具中提取数据。哪些行业、公司规模或角色构成了合格流量的主体？从规模足够大、可以衡量，且差异足够明显、确实值得使用不同图片的细分开始。
第 2 步：审查当前落地页的图片。列出流量最高的落地页上的每张图片。对每张图片问一问：它对三个细分人群的吸引力是否相同？如果是，它要么是一张很强的通用图片，要么是一张对谁都没有吸引力的普通图片。标记出那些换成细分人群专属版本能增加相关性的图片。
第3步：为每个标记的位置制作2-3个图片变体。您不需要全面重新设计。对于首屏图片，可以是同一布局的三个版本，分别使用不同的背景图、不同的产品截图或不同的使用场景插图。保持构图和 CTA 位置一致，这样测试的是图片内容，而不是页面结构。
第 4 步：设置基于细分人群的展示规则。在个性化平台中，把每个变体映射到对应的目标细分人群。为不符合任何细分条件的访客设定默认内容。使用来自每个细分人群的测试账户预览，确认正确的访客看到正确的图片。
第5步：衡量并迭代。按细分群体跟踪转化率，而不只是看整体。一张提升了制造业访客转化的首屏图片，可能会拉低 SaaS 访客的效果。在每个细分群体内运行 A/B 测试，将图片改动的影响与其他页面元素区分开来。在测试开始前确定样本量（我们的 A/B 测试样本量指南介绍了方法），至少运行两个完整周，不要因为仪表盘看起来不错就提前停止。
技术性能：速度与视觉质量
姗姗来迟的个性化主视觉，比按时出现的通用主视觉更糟。主视觉图片往往是最大内容绘制（LCP）元素，因此它的大小和加载顺序决定了页面给人的速度感。
使用现代格式。Google 的文档显示，WebP 有损图片比同等 JPEG 小25-34%，WebP 无损图片比 PNG 小26%。AVIF 的压缩率通常更高。通过 <picture> 元素提供 AVIF 或 WebP，并以 JPEG 作为后备。
与其照搬别人的体积限制，不如为自己的页面设定预算：在 PageSpeed Insights 中以移动设备配置检查首屏的文件大小和 LCP，并把任何明显比默认版本更重的变体当作缺陷处理。
使用带 srcset 属性的响应式图片。向移动端访客提供2000px宽的图片会浪费带宽并延迟渲染。让浏览器根据视口宽度选择合适尺寸的图片。对于个性化页面，这意味着每个图片变体都需要一套自己的响应式尺寸，不过构建工具可以自动完成。
不要延迟加载主视觉图。它在首屏，延迟加载只会让它更晚出现；应改为标记 fetchpriority="high"，只对页面更下方的图片做延迟加载。对于细分人群变体，最干净的做法是在服务器端或边缘节点决定变体，让正确的图片从一开始就在 HTML 中。如果替换发生在客户端，请预留图片尺寸，以免加载时布局跳动。
所有图片变体的无障碍设计
每个个性化图片变体都需要自己的替代文本。展示制造业工作流程的首屏图片，其替代文本应描述该场景，而不是一段适用于任何变体的通用文字。屏幕阅读器会播报页面上的内容，替代文本应与该细分中视力正常的访客实际看到的内容一致。
好的 alt 文本会简洁地描述图片内容，并与上下文相关联。控制在 100 个字符以内。装饰性图片（背景、间隔图）应使用空的 alt 属性，让屏幕阅读器跳过。带链接的图片等功能性图片，需要用 alt 文本描述链接目标。
图片加载失败时会以文字形式显示 alt 文本，这意味着即使对网速慢的正常视力访客，alt 文本也起到兜底作用。当您有个性化的图片版本时，这也是每个版本都需要独特、描述性的 alt 文本，而不是共用一个占位文本的又一个原因。
个性化视觉素材的常见错误
刚开始做图片个性化的团队往往会过度个性化。根据访客细分替换页面上的每一张图片，会带来维护负担，也会稀释真正重要的改动的效果。把个性化集中在影响最大的一两个图片位置上（通常是首屏和主要的社会认同模块），其余保持一致。
另一个常见错误是利用细分数据做出让人感觉被冒犯的假设。在访客表明身份之前就展示其公司 logo，越界了。展示与其行业相关的图片，是有帮助的。展示其办公楼的照片，则令人不安。区别在于情境相关性与监视之间。
第三个陷阱是一次测试太多变体。四个细分人群乘以三个图片版位，每个再有几个变体，就已经有几十种组合，远超 B2B 流量能测试的范围。在每个细分人群内一次只测试一个变量，等待统计显著性，对每项改动建立信心后再叠加更多。
对于正在推进更全面 B2B 落地页优化计划的团队，图片个性化是一个合理的早期步骤，因为它需要的新内容比文案个性化少。问题在于，它依赖真实的、针对细分人群的视觉素材；如果您能做的只是每个行业换一张图库照片，不如把时间花在文案上。
从哪里开始
拿出流量最高的落地页，带着一个问题审视首屏主图：来自您最大细分的访客能否在图中认出自己的工作？如果不能，换成他们能认出的产品截图或客户图片，并与现有版本做对比测试。只有当真实图片胜过图库图片后，才值得按细分制作不同变体。如果您想投放这些变体又不想自己搭规则，Markettailor 可以把访客识别数据与包括图片在内的页面内容打通。
