最稳妥方案是<img>配对使用srcset与sizes；单写srcset会被浏览器忽略，导致移动端仍加载大图，浪费带宽和首屏性能。
列表页里直接用 <img> 标签加 srcset + sizes 是最稳妥的响应式方案，但必须配对使用，单写 srcset 会被浏览器忽略——尤其在移动端，图片照常加载大图，带宽和首屏都吃亏。
为什么列表项里的图片不能只靠 max-width: 100%
这行 CSS 只管“缩放”，不管“加载”。列表页通常有 10–50 张图，如果每张都只写 <img src="large.jpg">，手机会下载整张 1200px 宽、2MB 的图，再缩到 375px 显示——像素全下了，内存占了，但用户只看到 30KB 有效信息。真响应式得让浏览器从源头选小图。
-
srcset提供候选图源（如"thumb-480w.jpg 480w, thumb-800w.jpg 800w"），但浏览器不知道该选哪张 -
sizes必须同步声明：“这张图在列表里占多宽”，比如sizes="(max-width: 768px) 100vw, 25vw"（小屏占满，大屏四列） - 没
sizes，浏览器默认按100vw算，大概率选错尺寸，srcset形同虚设
<picture> 在列表页多数是过度设计
除非列表项需要「构图级适配」，比如手机端裁人脸、桌面端展全景，否则别用 <picture>。它增加 DOM 深度、提高解析开销，且每个 <source> 都要写 media 查询，维护成本高。
- 纯尺寸适配（480w/800w/1200w）→ 用
<img srcset + sizes>足够 - 格式降级（WebP → JPEG）→
<picture>合理，但需确保 fallback 的<img>在最后且含alt - 列表项用背景图？可以，但
background-image无法设置alt，图标类操作按钮（如删除、分享）仍得用<img>
列表中图片路径与语义容易踩的坑
列表项里图片不是装饰，是内容的一部分：新闻缩略图要传达主题，商品图要承载点击行为，所以路径和语义不能马虎。
立即学习“前端免费学习笔记（深入）”；
-
src路径以 HTML 文件为基准，别混用./images/和images/；构建后路径变动时，相对路径最容易失效 -
alt必须有意义，不能是空字符串或 “图片”；列表项是商品？写alt="iPhone 15 Pro 钛金属灰色 256GB"；是文章？写alt="程序员如何高效学习 Rust 语言" - 避免把
<img>单独包在<a>里再加样式，应让整个<li>或<article>可点击，用 CSS 控制 hover/focus 状态 - 加载失败时快速定位：加
onerror="this.style.display='none'"或统一监听error事件，开发期跑Array.from(document.images).filter(i => i.naturalWidth === 0)扫雷
真正难的不是写对语法，而是对齐三个维度：CSS 布局断点、sizes 里写的视口条件、实际图片资源的尺寸档位——三者差一个像素，浏览器就可能选错图。上线前务必在 Chrome DevTools 的 Network 面板里勾选 “Disable cache” 并切换设备模拟器，逐个验证加载的是不是预期那张。
