移动端商品页常有主图、缩略图和细节图，逐张上传高分辨率原图，容易增加首屏等待和流量消耗。做好图片压缩与网页加载性能优化，不是把每张图都压到最小，而是让当前屏幕先拿到合适尺寸的图，细节和清晰度也不受明显影响。
下面这五项设置可以按顺序调整。每次只改一项，并在相同设备、网络和页面状态下比较，才能看出收益来自哪里。
1. 图片尺寸：按展示大小准备，不盲目保留原图
先确认图片在页面中的实际显示宽度，再考虑设备像素比。例如，图片显示宽度为约360个 CSS 像素，常见手机设备像素比为2时，可先准备约720像素宽的版本；像素比为3的设备可能需要更大版本。若页面支持放大查看，还应保留适合细节查看的较大图，不能只按缩略图尺寸处理。
过大的图片会带来不必要的下载量和解码工作；尺寸太小则会模糊，尤其是纹理、文字和边缘细节。可以从主图约800至1200像素宽开始评估，实际值要结合显示区域、裁切方式和放大功能调整。这是图片压缩与网页加载性能优化中最容易被忽略的一步：压缩无法弥补尺寸与用途不匹配。
2. 文件格式：照片、透明图和图形分开选
商品摄影通常适合 JPEG 一类有损格式，颜色层次自然，文件大小也较容易控制；需要透明背景的图片可用 PNG，但大面积照片存成 PNG 往往更占空间。标志、简单图标等线条图形可考虑 SVG，它是矢量格式，适合按不同尺寸显示，但不适合直接替代复杂商品照片。
不要为了统一格式而批量转换所有素材。先检查透明背景、渐变、细小文字和边缘是否出现色块或毛边，再决定格式。若一个页面含有多类素材，分别设置比“一种格式走到底”更稳妥。
3. 压缩质量：用视觉检查确定下限
对 JPEG 图片，可把质量参数约70至85作为初始测试区间；具体观感会随图片内容、编码器和参数定义变化。纯色背景通常较容易压缩，细密纹理、珠宝反光或带文字的包装更容易显出失真。参数越低，文件通常越小，但压缩痕迹也越明显。
建议先输出三档版本，在手机实际显示尺寸下比较，而非只放大看原图。重点检查边缘、暗部渐变和细节区域；若差异难以察觉，再选体积更小的版本。文件大小只能作为参考目标：普通商品主图可先争取控制在约100至300 KB，复杂画面可能需要更大，不能为了达到单一数字牺牲辨识度。
4. 清晰度版本：让浏览器拿到适合屏幕的图
同一张主图可准备不同宽度的版本，例如约400、800和1200像素，而不是让所有手机都下载最大文件。页面应根据图片显示尺寸和设备条件选择合适版本；缩略图则单独生成小图，避免用主图缩小显示却仍传输完整文件。
版本越多，存储和生成管理成本越高；版本太少，又可能让部分设备下载过大或显示不够清晰。可先覆盖常见显示宽度，再检查桌面端、普通手机和高像素屏幕上的实际效果。此项与压缩配合，往往比单纯降低质量更能兼顾观感。
5. 加载顺序：首屏先显示，屏外图片延后
页面刚打开时，优先加载首屏可见的主图；用户还看不到的下方图片，可设置为滚动接近时再加载。这样能减少初始请求和数据传输，但不要把首屏主图也延后，否则可能拖慢主要内容出现。图片区域还应提前留出宽高位置，避免加载后内容突然跳动。
懒加载并非越多越好：如果图片距离首屏很近，等滚动后才开始请求，可能反而出现空白。图片压缩与网页加载性能优化需要同时考虑文件大小和调度时机，尤其是商品页首屏通常承担主要展示任务。
按这个顺序落地，减少反复试错
- 列出主图、缩略图、详情图，记录各自显示尺寸和是否支持放大。
- 按用途生成尺寸版本，再为照片、透明素材和图形选择合适格式。
- 从保守质量参数开始，逐档降低并在手机页面中检查细节与文件体积。
- 让首屏主图优先加载，屏外图片按需加载，并为图片预留显示空间。
- 在移动网络和常用设备上复查首屏、滚动过程及放大查看，发现模糊或等待再针对性回调。
取舍的核心是先减少无用像素和无关下载，再调整压缩质量，最后安排加载顺序。持续以真实页面观感验证，图片压缩与网页加载性能优化才不会变成只追求小文件的机械操作。
常见问题
商品主图一定要压到100 KB以内吗？
不一定。画面复杂、显示较大或需要放大时，100 KB可能影响细节。应结合显示尺寸、网络和视觉检查确定目标。
所有图片都适合懒加载吗？
不适合。首屏可见的主图应尽早加载；主要在屏外的图片再考虑延后加载。
缩略图能否直接使用主图？
可以显示，但若主图文件较大，用户仍需下载完整文件。单独生成缩略图通常更节省传输量。
压缩后看起来发糊，先改什么？
先检查源图尺寸是否足够，再提高质量参数或提供更大版本；不要仅靠增加显示锐化掩盖尺寸不足。