根本原因是浏览器不知道图片在当前布局下的实际渲染宽度，仅靠css缩放会强制下载大图；必须用srcset+w描述符配合sizes（如"(max-width: 768px) 100vw, 50vw"）让浏览器在请求前精准选择最匹配的物理图片，避免带宽浪费与显示模糊。
电商网站的图片加载慢、在手机上模糊、在 Retina 屏上发虚，根本原因不是图不够大，而是没让浏览器知道“这张图在当前设备上该占多宽、该用哪张”。只靠 max-width: 100% 会白耗带宽，只写 srcset 不配 sizes 等于没写。
为什么电商图必须用 srcset + sizes 而不是只靠 CSS 缩放
商品主图常需在 375px 宽的手机屏上显示为 340px 宽，但若只给一张 1200px 的图并靠 CSS 缩放，用户仍得下载 1200px 图（约 180KB），而实际只需 340px 版本（约 45KB）。浏览器无法自动降级——它根本不知道你期望的显示宽度。
-
sizes是唯一告诉浏览器“这张图在不同断点下视觉上占多少空间”的属性，比如sizes="(max-width: 768px) 100vw, 50vw"表示：小屏时占满容器，桌面端只占一半 - 漏写
sizes，浏览器默认按100vw计算，大概率选中最大图，尤其在 flex/grid 容器中（如商品卡片占 1/3 宽）更易误判 - 电商图建议生成尺寸序列：320w、480w、768w、1024w、1440w（按 1.5× 步进，覆盖主流 DPR 和视口）
picture 元素在商品详情页不可替代的两个场景
当需要「竖屏裁人脸、横屏展全景」或「强制优先 WebP + 降级 JPG」时，<picture></picture> 是唯一解。它的 <source></source> 按顺序匹配，且 media 和 type 是 AND 关系——任一条件不满足就跳过。
- 构图切换示例：
<source media="(max-width: 600px)" srcset="shoe-mobile.jpg"></source>（特写鞋头），<source media="(min-width: 601px)" srcset="shoe-desktop.jpg"></source>（展示全鞋+背景） - 格式降级必须写全 fallback：
<source type="image/webp" srcset="shoe.webp"></source>→<source type="image/jpeg" srcset="shoe.jpg"></source>→ 最终<img src="shoe.jpg" alt="运动鞋"> - 常见错误：把
media="(max-width: 768px)"写成(max-width: 767px)，导致断点与真实 CSS 布局错位，某一行图片全加载错版本
flex/grid 商品卡片中图片塌陷和比例失真的硬解法
电商首页常用 flex 或 grid 排列商品卡片，但图片异步加载时高度为 0，卡片突然收缩，用户滚动体验极差；另外 flex 容器默认 min-width: auto 会卡住图片缩放，导致 max-width: 100% 失效。
- 必须加
min-width: 0到图片父容器（如.product-card），否则图片不随容器收缩 - 防抖动：用
aspect-ratio: 4/3（Chrome 103+/Firefox 98+）或老方案（伪元素撑开 +position: absolute图片）提前预留高度 - Grid 卡片推荐写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))+gap: 16px，避免用 margin 模拟间距（父子 margin 合并会导致错行） - 所有商品图统一加
object-fit: cover和固定高（如height: 180px），防止原始图尺寸不一导致卡片高度跳变
sizes 属性写错的三个隐蔽但致命的坑
sizes 是字符串，不是 CSS，语法容错率极低。写错一个字符，整套响应式逻辑就退化为只加载 src。
- 旧版 Edge（EdgeHTML）解析时，
(max-width: 768px)中的空格会导致整个属性失效，必须写成(max-width:768px) - Safari 12.1 之前版本不支持
w描述符，若混用480w和2x，Retina iPhone 可能只加载 1x 图 - 设计师给的断点是 768px，但 CSS 中用了
@media (min-width: 769px)，而sizes还写(max-width: 768px)，结果 iPad mini（768px 宽）永远匹配不到正确尺寸
电商图的响应式不是“写了就完事”，而是每张图都要对齐真实布局宽度、每个 sizes 都要和 CSS 断点咬合、每个 <source></source> 都要验证 fallback 是否真被加载——这些细节不手动测一遍，性能优化就只是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
