Banner图在电脑上预览时好看，不代表在手机上就能正常用。移动端适配图片涉及的是一组具体检查项：主体有没有被裁掉、文字在小屏上还能不能读、图片体积会不会拖慢加载、后台替换后前后台是否一致。这些和审美关系不大，更多是发布前必须逐项过一遍的操作。
为什么“看着好看”这个标准不够用
电脑屏幕和手机屏幕的显示比例差别很大。同一张横幅图放在宽屏上能完整展示，放到窄屏上往往会被裁掉两侧，或者被压缩变形。设计师在电脑上确认的那一版，和用户手机上实际看到的那一版，很可能不是同一个画面。
更麻烦的是，Banner图里常带文字和按钮。电脑上字号看着合适，到手机上可能小到看不清，或者因为换行把一句话拆得很别扭。如果只凭“页面预览好不好看”来判断，这些问题在发布前是发现不了的。
所以移动端适配图片的判断标准，应该从“好不好看”换成“关键信息在窄屏上还完不完整、清不清楚、加不加载得出来”。
发布前先确认这几个显示问题
第一，看主体位置。把Banner图放到手机宽度下预览，确认人物、产品、logo这些核心元素没有被裁出画面。如果主体偏在两侧，就要考虑重新裁一版，或者把主体往中间挪。
第二，看图上文字。Banner上如果有促销语、活动时间、按钮文字，逐条确认在手机宽度下是否完整显示、有没有被截断或换行到看不清。文字是图片的一部分，改起来不如改HTML文字方便，所以宁可少放，也别堆太多。
第三，看按钮和链接位置。有些Banner把可点击区域做在图片上，手机端裁切后按钮可能被切掉一半，用户点不到。发布前要实际在手机上点一遍，确认点击区域还在。
第四，看图片和背景的衔接。图片边缘如果和页面背景色不一致，在手机上容易出现明显的色块或白边，这类问题在电脑上不一定看得出来。
图片体积和加载，也要一起看
移动端网络环境比办公室宽带复杂得多。Banner图往往是页面上最大的一张图，如果体积没控制好，用户打开页面时可能先看到一块空白，等图片慢慢加载出来。
处理思路是：先按实际展示尺寸导出图片，不要用一张超大图硬缩。展示宽度是多少，就按接近这个宽度导出，避免让手机去下载一张远大于屏幕尺寸的图。格式上，照片类内容适合用压缩后体积更小的格式，带透明背景或简单图形的可以用支持透明的格式，具体选哪种，按团队现有工具和后台支持情况决定。
导出后自己先看一眼文件大小，如果明显偏大，就再压一次。压缩时注意别把文字压糊，尤其是图上有小字的时候，压缩过度会直接影响可读性。
后台替换Banner时容易漏掉的步骤
很多问题不是出在设计阶段，而是出在后台替换阶段。运营人员拿到新图，直接上传、保存，没有回到手机端再看一遍，结果前台显示的还是旧图，或者新图被拉伸了。
替换时建议按这个顺序走：先确认新图的尺寸和后台要求的尺寸一致；上传后不要只看后台预览，要用手机打开前台页面实际看一眼；确认图片显示正常后，再检查图上的链接是否还能点、跳转地址对不对；最后清一下浏览器缓存或换个设备再看一次，避免看到的是缓存的旧图。
如果后台支持为不同设备设置不同的Banner图，那就要分别确认电脑版和手机版各自显示的是哪一张，别出现手机端还在用电脑版大图的情况。
把检查变成固定动作
移动端适配图片这件事，靠每次临时想起来检查，很容易漏。更稳妥的做法是把它变成发布流程里的固定一步：Banner图上传后，用手机打开前台页面，从主体、文字、按钮、体积、链接这几个角度各看一遍，确认没问题再算发布完成。
如果团队里有多个运营人员，可以把这几个检查点写进发布清单，谁替换谁核对。这样即使换了人，也不会因为“看着挺好看”就直接上线。
下次替换Banner图时，不妨先别急着评价好不好看，先用手机打开页面，把上面这几项过一遍，再决定要不要调整。
