src 是强制项，必须与 srcset 配合使用以确保兼容性和可访问性；最小尺寸图应设为 src 作为兜底，sizes 需准确反映布局宽度，否则会导致选源错误。
srcset 必须配 src，否则 fallback 会失效
只写 srcset 不写 src，在部分旧浏览器（如 IE）中图片直接不显示；现代浏览器虽可能取第一个候选源，但不符合规范，也破坏可访问性逻辑。
正确做法是把最小尺寸图设为 src，作为兜底项：
@@##@@
-
src是强制项，不是可选；建议用 400w 或 320w 这类小图，兼顾低带宽和加载速度 -
srcset中所有候选用w描述符时，必须统一，不能混入2x - 不写
sizes时，浏览器默认按100vw计算渲染宽度，极易导致小屏加载大图
sizes 属性不是 CSS，而是字符串上下文
sizes 告诉浏览器“这张图在当前视口下大概占多宽”，它本身不控制样式，只是提供计算依据。写错会导致浏览器选错源——比如明明只占 300px 宽，却加载了 1200w 的图。
常见写法示例：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
- 每个条件后紧跟一个宽度值，支持
vw、px，但不支持calc()或 CSS 变量 - 如果图片在 flex 或 grid 容器中缩放，
sizes必须反映实际布局宽度，不能硬写100vw - 媒体条件顺序重要：浏览器从左到右匹配第一个真值，所以宽屏条件要放后面
图片尺寸列表建议按 1.5× 步进生成
主流设备逻辑像素宽度集中在 320、480、768、1200、1920 等节点，用 1.5× 步进（如 320w → 480w → 768w → 1200w）能覆盖绝大多数 DPR 和断点组合，避免冗余文件或缺口。
- 320w 适配 iPhone SE / 小屏安卓
- 768w 覆盖 iPad 竖屏、中屏平板
- 1200w 对应桌面窄屏（如 1366×768 分辨率）
- 超过 1920w 的图通常没必要，除非明确支持 4K 显示且内容关键
- 生成时注意保留原始宽高比，避免裁剪失真；可用构建工具（如 sharp + webpack）批量导出
别忽略 onerror 和 placeholder 降级路径
开发阶段光靠 alt 文本看不出是路径错误、网络中断还是资源缺失。没有视觉反馈时，问题容易被掩盖。
- 单图快速加降级：
onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;" - 批量监听更可靠：
document.querySelectorAll('img').forEach(img => img.addEventListener('error', e => { console.warn('Image load failed:', e.target.src); })); - 调试时在控制台运行：
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有空图 - 路径务必用相对路径，从 HTML 所在目录起算；混用
./images/和images/在多入口项目里极易出错
sizes 始终匹配真实布局宽度——尤其当图片嵌在 flex/gap/grid 且有 padding/border/margin 时，那个“渲染宽度”得手动算清楚，不然再全的 srcset 也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
