因为移动设备差异大，单一图片无法兼顾清晰度、体积和加载时机；需用picture+media query按宽度断点与像素密度双维度精准匹配资源，并注意WebP回退、CDN缓存键含Accept头、img须设width/height等细节。

为什么比单纯用更适合商品主图

因为移动设备屏幕尺寸、像素密度和网络条件差异大，单一图片源无法兼顾清晰度、体积和加载时机。能按媒体查询精准匹配资源，浏览器只下载当前设备真正需要的那一张，避免在4G弱网手机上强塞2MB的2x Retina图。

移动端商品主图的典型配置结构

电商场景下，主流做法是按宽度断点 + 像素密度双维度控制。关键不是堆参数，而是让每个有明确不可替代性：

• media="(min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2)"：仅桌面高分屏加载@2x WebP大图
• media="(min-width: 768px) and (max-width: 1199px)"：平板中等分辨率，用WebP压缩到800px宽
• media="(max-width: 767px)"：手机竖屏，强制加载500px宽+轻量WebP（甚至可加quality=60）
• 最外层<img>必须提供JPEG回退，且src指向最小尺寸的JPEG（如product-small.jpg），否则IE11或旧版Android WebView会空白

容易被忽略的三个坑

很多项目配好了却没生效，问题往往不在语法本身：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• loading="lazy"不能直接写在<source>上——它只对最外层<img>有效，但加在<img>上时，浏览器仍会按逻辑选源，不影响懒加载行为
• 如果<picture>父容器用了transform或overflow: hidden，Chrome可能无法正确判断视口位置，导致loading="lazy"失效，需改用contain: layout或移除transform
• width和height属性必须设在<img>上（哪怕只是占位值），否则Safari会拒绝触发懒加载，且CLS（布局偏移）分数暴增

WebP回退与CDN缓存协同要点

浏览器支持WebP是渐进过程，但服务端CDN缓存策略会放大格式误判风险：

立即学习“前端免费学习笔记（深入）”；

• 不要依赖User-Agent做服务端格式切换——现代CDN（如Cloudflare、阿里云DCDN）支持Accept: image/webp请求头自动回源，更可靠
• <source type="image/webp">必须放在<source type="image/jpeg">之前，否则Firefox可能跳过WebP尝试
• CDN缓存键（Cache Key）里务必包含Accept头，否则WebP用户可能拿到JPEG缓存，白屏几秒后才降级显示

实际部署时，最常出问题的是「以为配了WebP就万事大吉」，结果发现CDN没开Accept头识别，或者忘了给<img>写width/height，导致懒加载静默失效。这些细节不显眼，但直接影响首屏LCP和用户是否划走。