<picture>不适合直接展示高清缩略图，因其仅作资源分发开关，不生成、不压缩、不控制尺寸；缩略图必须是服务端预生成的真实小图（如thumb-120x90.jpg），否则将导致加载原图、首屏卡顿、布局抖动三连击。
直接说结论： <picture> 不适合直接展示“高清缩略图”——它负责的是格式/尺寸/设备适配决策，而缩略图本身必须是服务端生成的真实小图；用错会导致加载原图、首屏卡顿、布局抖动三连击。
为什么不能只用 <picture> 替代缩略图？
很多人误以为套个 <picture> 就能“自动高清缩略”，其实它不生成图、不压缩图、也不控制展示尺寸。它只是个“资源分发开关”：告诉浏览器“在什么条件下该加载哪张图”。如果你的 srcset 里全是原图路径（比如 product-2000x1500.jpg），那无论怎么写 <source>，用户手机上照样下载 2MB 大图。
- 缩略图必须是独立小图文件，如
thumb-120x90.jpg（体积控制在 10–30 KB） -
<picture>的作用是：为这张小图再做一层响应式或格式降级，比如 WebP + 小屏 / JPEG + 旧浏览器 - 漏掉服务端缩略图生成，
<picture>写得再漂亮也是空中楼阁
正确的 picture + 缩略图组合写法
目标：在新闻列表页卡片中，桌面显示横构图缩略图（300×180），手机显示竖构图头像图（120×120），且优先 WebP、JPEG 降级。
<picture> <source media="(max-width: 480px)" srcset="thumb-120x120.webp 1x, thumb-240x240.webp 2x" type="image/webp"> <source media="(max-width: 480px)" srcset="thumb-120x120.jpg 1x, thumb-240x240.jpg 2x" type="image/jpeg"> <source media="(min-width: 769px)" srcset="thumb-300x180.webp 1x, thumb-600x360.webp 2x" type="image/webp"> <source media="(min-width: 769px)" srcset="thumb-300x180.jpg 1x, thumb-600x360.jpg 2x" type="image/jpeg"> <img src="thumb-300x180.jpg" width="300" height="180" alt="新闻缩略图"> </picture>
- 每个
<source>必须有明确media条件，且不重叠（如不用(max-width: 768px)和(max-width: 1024px)同时存在） -
type属性必须写全：image/webp、image/jpeg，否则浏览器忽略该<source> -
<img>的src是最终 fallback，必须指向一个真实存在的 JPEG（IE/旧 Safari 只认它） -
width和height必须写死数值（单位省略），防 layout shift；不要依赖 CSS 控制尺寸
sizes 属性怎么配才不白写？
sizes 不是可选项，它决定浏览器从 srcset 里挑哪张图。写错等于让浏览器瞎猜——比如在 3 列网格中占 33% 宽度的缩略图，sizes="100vw" 会让手机加载桌面尺寸图。
立即学习“前端免费学习笔记（深入）”；
- 表格内缩略图：固定宽度 150px →
sizes="150px" - 响应式卡片（移动端单列、平板双列、桌面三列）→
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 别用
sizes="100vw"当万金油，除非你真希望每张图都按视口全宽加载 - 如果
<source>已用media切断点，sizes应与之对齐，例如media="(max-width: 480px)"对应sizes="(max-width: 480px) 100vw"
容易被忽略的兼容性与性能陷阱
WebP 优先不是加个 type 就完事；现代浏览器选对了图，但旧环境可能直接跳过所有 <source>，只加载 <img>。这时候如果 <img> 的 src 指向的是 WebP，旧浏览器就挂白图。
-
<img>的src必须是 JPEG（或 PNG），不能是 WebP - IE 完全不支持
<picture>，需额外 JS polyfill 或服务端 UA 判断降级 - 缩略图区域禁用
loading="lazy"：它们本该首屏加载，懒加载反而拖慢交互响应 - 不要给
<picture>外层加width/height样式，它不接受；尺寸控制必须落在内部<img>上
最常出问题的地方，其实是服务端没生成对应尺寸+格式的缩略图文件——前端写得再标准，404 了也白搭。
