网页Banner怎么做？先检查电脑和手机上的裁切

网页Banner不是导出一张横图就结束。电脑上完整的画面，在手机的窄容器里可能只剩背景；标题如果已经画进图片，也可能变得难读。先知道页面会怎样摆放和裁切素材，再安排主体、留白和不同尺寸的版本。

先向页面负责人确认图片怎么显示

记录电脑和手机的图片容器比例、展示高度、标题与按钮位置，以及页面使用铺满裁切还是完整显示。生成图片的像素尺寸和最终显示范围是两回事：同一张图使用铺满裁切时，超出容器的部分会被隐藏，不能只在图片查看器里验收。

如果标题由网页文字呈现，底图就只承担主体和气氛，给文字留下干净区域。商品名、活动日期、价格等经常变化的信息优先由页面维护，避免每次改文案都重新生成整张图。是否适合这样做，应与实际页面结构一起确认。

把主体和文字区分开安排

假设页面介绍一款台灯，电脑端需要左边放标题、右边放商品。先提供真实商品图，说明灯的外形、开关和材质不能改变，再要求左侧保持简洁。手机端若标题放在图片上方，可以另外做主体更居中的竖向构图，不必强迫横图同时满足两种版式。

• 必须保留：真实商品外观、主要识别特征和页面需要展示的细节。
• 可以变化：背景、道具位置与光线，但不能让画面暗示商品并不具有的功能。
• 需要留白：标注标题、按钮实际覆盖的范围，而不是只写“构图高级”。
• 分别交付：电脑和手机版本，以及两者共同使用的原始素材。

Lovart公开页面有图片创作、点选编辑、文字编辑和扩图方向，可以用于探索构图与修订素材。扩展背景之后仍要检查透视、重复纹理和主体外观，不能只看画面是否铺满。

不要把一张横图直接缩成手机图

先画出两种容器的可见范围。如果手机只显示横图中间的一小块，主体必须能落在这块区域；若主体与标题需要的区域相互冲突，就制作第二种构图。在支持焦点位置的页面中可调整图片显示位置，但这不能补救画面本身没有足够空间的问题。

交给前端时注明每张图对应的容器、建议焦点和不可裁掉的元素。页面如果采用不同图片源，应确认手机确实加载了手机版；浏览器预览窗口变窄而图片不切换时，先排查页面设置，再去改素材。

在真实页面检查交付结果

检查最大与最小常见宽度、长标题和不同文字行数。主体、Logo和重要细节不能被裁掉，文字要与底图有足够对比，按钮也不能盖住必要信息。只看首页截图不够，还要查看用户滚动后和图片尚未加载时的布局。

按网站支持的格式导出图片，比较压缩前后细小边缘与文字区域。大图不一定在网页上更清晰，加载也可能更慢；采用合适的显示尺寸与响应式图片源，再检查实际文件体积。位图里的文字不会因格式转换变成可编辑文本。

保存原图、修改版和最终交付版，文件名标明用途、设备和版本，例如banner-desktop-v2与banner-mobile-v2。把素材使用范围、参考来源和需要保留的商品事实一并交接，后续换图才能沿同一标准检查。

常见问题

一张图能适配所有设备吗？能否共用取决于构图和容器。裁切不会丢失核心信息时可以共用，冲突明显时准备不同版本。

图片里已经有标题怎么办？先检查手机上能否读清、标题是否需要经常更新。必要时保留背景并在页面重新排文字，避免将小字反复放大锐化。

功能依据：Lovart公开产品页面，核对日期为2026年10月12日。