设计网站时，如何选择背景图

一张背景图到底该用大图轮播、纯色底纹，还是只用一张模糊的渐变？这个问题没有统一答案，取决于你的网站类型、内容密度和加载预算。判断维度可以归成三个：图要服务内容还是服务气氛、单张图的体积控制在多少、这张图以后谁来换。先想清楚这三点，选图就不会来回改。

设计网站时，如何选择背景图，本质是把「好看」拆成可执行的技术指标。下面按实际操作顺序拆开讲。

先定背景的职责，再谈画面

背景图在页面里通常承担两种角色：气氛型和信息型。气氛型用于品牌首页，图本身不承载信息，只负责第一屏的调性；信息型背景往往带产品、场景或纹理，需要和文案、按钮配合。角色定错，后面全拧。

一个判断方法：把背景图撤掉，换成纯色，页面信息是否还完整传达？如果撤掉后主标题和按钮依然清晰，这张图就是气氛型，选图时可以偏抽象、偏大场景；撤掉后页面显得空，说明它承担了信息，那就必须选有明确主体、且主体不落在文字区域的画面。

按经验，企业官网首页第一屏背景图的有效展示区域高度在 600-900 像素之间，画面视觉重心要留出左侧或居中的文字安全区，主体偏右或偏下的构图更容易排文案。

素材来源与授权，别在最后一步卡住

图片来源大致分为三类：免费商用图库、付费图库、自行拍摄。免费图库的风险在于同一张图被大量网站使用，辨识度低；付费图库单张授权一般在几十到几百元，企业站一整套视觉配 3-5 张就足够。自拍成本高，但胜在专属。

授权核对要落到具体条款：是否允许商业用途、是否允许修改裁剪、是否需要署名。多数图库的免费授权要求署名，一旦漏标，后期被追责会很麻烦。企业站建议直接用买断或明确可商用的授权，把授权截图和订单号存档，换人接手时不至于说不清。

顺带一提，背景图定下来之后，插入页面的具体方法（尺寸压缩、格式选择、对齐方式）和普通内容图并不完全一样，关于设计网页如何添加图片的细节，在《设计网页如何添加图片》里已经按操作步骤拆过一遍，可以对照着做。

体积、格式与加载，这组数字要卡死

背景图最容易拖慢首屏。手机端用户对白屏的容忍度很低，一张没压缩的相机原图动辄 5-10MB，加载体验直接崩。

可执行的压缩口径：

• 首屏背景图压缩后控制在 200-400KB，超过 500KB 就要回头再压；
• 宽屏大图导出宽度一般 1920 像素即可，不必按原图 4000 像素上线；
• 照片类画面用渐进式 JPEG，纯色或渐变用 WEBP，透明叠加层用 PNG；
• 移动端用媒体查询单独加载一张裁剪过的竖版图，别让手机去加载桌面大图。

还有一层是背景图与文字的可读性。文字压在图上，对比度不够就会糊成一片。做法是在图片上叠一层半透明色块，黑色遮罩透明度按经验取 30%-50%，或者在图片下方垫一层由深到浅的渐变。别指望靠加粗字重硬扛。

响应式下的裁切，先想好丢哪一块

同一张图在 27 寸显示器和手机上呈现的区域完全不同。桌面端横构图的主体，到了竖屏会被左右裁掉大半。选图时就要判断：这张图裁掉两侧之后，中间还成立吗？

实操上，把背景图按 16:9、4:3、9:16 三种比例各裁一版看效果，主体居中或偏上的图适配性更好；人脸、产品主体靠近画面边缘的图，在移动端容易只剩半张。这一环节做扎实，能省去上线后返工改图的时间。

不同页面类型的选图对照

背景图不是全站一张通用。首页、栏目页、详情页的诉求不一样，下面这组对照可以直接拿去对表。

详情页大面积铺背景图是常见误区，阅读区背后有花纹或照片，眼睛会累，用户停留时间反而下降。阅读型页面的背景，安静的纯色更合适。

后期更换与素材归档

背景图不是一次性投入。促销季、新品上线、品牌换色都会触发更换，选图时就要考虑换图成本。做法是定一套视觉规则：主色、允许的图片风格、文字安全区位置，后续换图只替换画面，版式不动。

归档同样要落到文件命名上，比如「首页首屏-1920-2024夏季版.jpg」，把尺寸、位置、版本写进文件名，配一张替换记录表。实际遇到过的情况是，换图时找不到原始分层文件，只能拿压缩过的图二次叠加文字，越换越糊。原始素材和授权凭证放在固定目录，谁接手都能找到。

常见问题解答

免费图库的图能直接用在企业官网吗？

多数免费图库提供商业授权，但通常要求署名或限制修改范围。上线前逐条核对授权说明，保留授权页面截图，涉及人物肖像的画面额外确认是否有模特授权。

背景图用视频代替图片可行吗？

可以，但代价是体积和性能。视频背景一般控制在 10 秒以内循环、体积 2-3MB 以内，并提供静态首帧兜底，移动端默认降级为图片，否则弱网下会长时间黑屏。

背景图和主图有什么区别，能混用吗？

背景图是衬在内容后面的底层，主图是内容本身。混用会导致层级混乱，文字压在主图上既挤又乱。把两者分开处理，背景做减法，主图做加法。

总结

回到最初那个问题，设计网站时，如何选择背景图的答案不在美图库里，而在你对页面职责、加载预算和后期维护这三件事的判断里。先定角色，再卡体积，最后留好换图的余地，一张背景图才算选对了。