摘要：产品页直接使用相机原图时，CSS缩小尺寸并不会减少下载体积，手机仍需传输和解码大文件。本文说明如何生成响应式图片、保留产品细节并完成百度移动落地页验收。
工厂拍完新品后，把一张八千像素、十几兆的照片直接上传到产品页，再用CSS把显示宽度设成六百像素。电脑上看着清楚，客户用手机打开时却要等很久，首屏还会先留出一块空白。产品页显示得小，不等于浏览器下载的文件也小。
相机原图为什么会拖慢移动落地页
浏览器拿到图片地址后，会下载完整文件，再按页面样式缩放。原图宽度即使超过页面十倍，CSS也不会替用户省掉传输量。手机网络波动时，大文件占住连接，标题和操作按钮已经出现，主图仍在解码，客户看到的就是迟迟不完整的首屏。
图片像素过大还会增加内存占用。长边八千像素的JPEG下载后需要展开成更大的位图，旧手机切换页面时容易卡顿。若页面没有写width和height，浏览器在图片加载完成前无法预留准确空间，正文会被向下推，阅读位置随之跳动。
首屏主图也不适合统一使用lazy loading。客户进入页面后立刻需要看到产品外观，延迟加载反而会推迟关键内容。页面下方的细节图可以按滚动位置加载，但主图应在初始HTML中给出明确地址、尺寸和alt，避免等脚本执行后才请求。
怎样按页面位置生成可用图片版本
原始照片应留在内部资料库，网页使用单独生成的发布版本。先裁掉无关背景，校正方向和色彩，再按实际展示位置输出尺寸。产品主图可以保留一份较大的查看版本，同时生成适合桌面和手机的中小尺寸，不能每个位置都调用同一个原文件。
常用做法是输出480、960和1440像素宽的WebP，由srcset和sizes告诉浏览器怎样选择。手机卡片可能只需要480像素，产品页主图使用960像素，高分辨率屏幕或放大查看再取1440像素。具体档位要结合页面容器宽度，不能把数字当成所有网站的固定答案。
图片文件名绑定产品主键、视角和版本，例如pump-x7-inlet-side-v2.webp。后台记录原图来源、发布日期和适用型号，避免外观相近的设备被替换错。alt说明画面中的产品和视角，如“X7泵入口侧接口”，不写“高清大图”或重复堆叠产品关键词。
压缩时要检查铭牌边缘、接口螺纹和刻度线。背景出现少量压缩痕迹通常不影响判断，产品边缘发糊则需要提高质量或调整裁切。带细小尺寸标注的技术图不应当作普通照片压缩，最好提供清晰的网页预览和独立下载文件。
上线后如何同时验收清晰度和加载过程
验收不能只在办公室宽带下刷新一次。用三百九十像素视口和受限网络打开页面，记录主图请求的实际文件、传输体积和出现时间。检查浏览器是否选择了手机尺寸，而不是仍然下载1440像素版本；再滚到细节图区域，确认延迟加载没有阻塞正文。
查看页面源代码，确认主图、alt、width、height以及响应式候选地址都能直接读取。图片URL应返回200并带合理缓存，换图时使用新文件名，避免客户长期看到旧缓存。结构化数据里的image也要指向可公开访问、与正文一致的产品图。
清晰度验收要回到客户任务。销售在手机上放大接口、安装孔和外观差异，确认仍能支持初步判断；技术人员再与实物、图纸和产品手册核对视角及型号。若放大需求超过网页图片能承载的范围，应提供对应资料入口，不能靠继续增大首屏文件解决。
发布记录保存图片主键、各尺寸文件、压缩参数和页面地址。以后替换产品外观或增加型号时，维护人员沿同一规则生成发布版本。客户得到的是加载及时且能看清关键细节的页面，百度移动抓取看到的图片关系也更稳定，同一型号的封面图、详情图和下载图也能保持对应。
