响应式图片用原生html即可实现，关键在、srcset和sizes协同：用于艺术方向或格式切换，srcset提供多尺寸资源，sizes声明布局宽度，三者缺一可能导致选图错误。
响应式图片不需要 JavaScript，用原生 HTML 就能搞定，关键在 <picture></picture>、srcset 和 sizes 的组合用法——但错一个属性，浏览器就可能加载错图或忽略响应逻辑。
什么时候该用 <picture></picture> 而不是只靠 srcset
当你要根据视口宽度、设备像素比、甚至用户偏好（比如暗色模式）切换完全不同的图片资源时，<picture></picture> 是唯一选择。比如：小屏用裁剪过的竖构图，桌面用完整横构图；或者 prefers-reduced-motion 下用静态图替代动图。
-
<source></source>的media属性必须是有效的媒体查询（如(max-width: 768px)），写成max-width: 768px（缺括号）会静默失效 - 多个
<source></source>按顺序匹配，第一个满足条件的生效，后续被忽略——所以宽屏规则要放在后面 - 必须保留底部的
<img>标签，它既是兜底（所有<source></source>都不匹配时）、也是可访问性必需节点（alt在这里写）
srcset 和 sizes 必须配对才有效
只写 srcset，浏览器会按默认规则（通常是视口宽度）选图，但无法准确预判布局尺寸；加上 sizes，才能告诉浏览器“这张图在不同断点下实际占多宽”，从而选出最接近的分辨率资源。
-
srcset列出的是资源本身的信息："small.jpg 480w, medium.jpg 1024w, large.jpg 1920w"，w单位指图片源文件的固有宽度 -
sizes描述的是布局行为：sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 33vw"，表示“小屏占满全宽，中屏占一半，大屏占三分之一” - 如果
sizes写成固定值如"500px"，那浏览器永远按 500px 宽度选图，失去响应意义
常见加载失败原因：路径、格式、兼容性三连坑
图片没显示？控制台没报错？大概率是这三类问题之一。
- WebP 或 AVIF 图片在旧浏览器里直接被跳过——
<source></source>的type属性必须精确匹配 MIME 类型，比如type="image/webp"，写成type="webp"无效 - 相对路径在
<source></source>中以当前 HTML 文件为基准，不是以 CSS 或 JS 位置为基准；混用/开头的绝对路径和相对路径容易导致 404 - Safari 13.1 之前不支持
fetchpriority="high"，加了反而可能触发解析警告；Chrome 对decoding="async"支持良好，但 Firefox 曾在某些版本里忽略它
真正难的不是写对语法，而是测清每个断点下浏览器实际加载了哪张图——打开 DevTools 的 Network 面板，勾选 “Large icons”，按真实设备尺寸缩放页面，再刷新，看请求的文件名和大小是否符合预期。漏掉这步，再漂亮的 markup 也只是纸上谈兵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
