响应式图片需同时设置max-width: 100%和height: auto；srcset必须配sizes，且sizes要匹配真实布局宽度；换构图/格式需用；懒加载用loading="lazy"，错误降级用onerror。
只用 <img> 标签加几个属性，就能让图片在不同设备上清晰、不拉伸、不卡顿加载——关键不是写多少 JS，而是把 srcset、sizes 和基础 CSS 配对用对。
必须同时设置 max-width: 100% 和 height: auto
这是响应式图片的底线。漏掉 height: auto，图片在缩小时会被压扁；只写 width: 100% 则小图会被强行拉宽失真。
-
max-width: 100%：确保图片不溢出父容器，但允许它比容器窄（比如小图居中） -
height: auto：强制按原始宽高比缩放，否则浏览器不会联动调整高度 - 别给
<img>设固定height或min-height，会破坏等比逻辑 - 如果图片下方有空白，加
display: block比调vertical-align更可靠
srcset 必须配 sizes，且 sizes 要反映真实布局宽度
只写 srcset 不写 sizes，浏览器会默认按 100vw 计算，结果可能加载远大于实际需要的图——比如图片在 Flex 容器里只占 50% 宽，却载入了 1200w 的大图。
-
sizes是字符串，不是 CSS 规则，语法要严格：例如"(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" - 每个
srcset条目后必须带单位：用480w（推荐）或2x，不能混写，也不能漏 - 图片尺寸建议按 1.5× 步进生成：320w → 480w → 768w → 1200w → 1920w，覆盖主流断点
- 如果用 Grid 布局，
sizes中的宽度值得和grid-template-columns实际渲染宽度一致，比如minmax(250px, 1fr)下，单列最大宽度 ≈ 视口宽 ÷ 列数
复杂场景必须用 <picture></picture>，<source></source> 匹配是 AND 逻辑
<img> 的 srcset 只能解决“同一构图、不同尺寸/分辨率”的问题；换裁剪、换格式、换方向，就得靠 <picture></picture>。
-
<source></source>按顺序匹配，media和type同时满足才生效，比如media="(min-width: 1024px)" type="image/webp"缺一不可 - 最具体的规则放最前面，例如先写
(min-width: 1024px) and (min-resolution: 2dppx)，再写通用 fallback - 拼错
type="image/webp"（比如多写分号或大小写错误），整条<source></source>就被忽略 - 兜底的
<img>必须存在，且src和alt都不能省——没有它，整个结构就失效
懒加载和错误降级要写在 HTML 层，别等 JS 初始化
性能优化和容错不该依赖 JS 加载完成。从 HTML 标签层面就该埋好钩子。
-
loading="lazy"是原生支持，Chrome 76+、Firefox 75+、Safari 15.4+ 都已稳定支持，直接加在<img>上即可 - 加载失败时，
onerror="this.src='placeholder.svg'"是最小成本降级，比监听全局error事件更及时 - 路径统一用相对路径，从当前 HTML 文件所在目录起算；避免混用
./images/和images/，否则部署到子路径时全崩 - 开发阶段快速排查：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0)，立刻列出所有加载失败的图片
真正难的不是写对某一行代码，而是 sizes 值是否和实际 CSS 布局宽度一致、srcset 是否覆盖了你真实部署环境里的设备分布、以及 <picture></picture> 的 media 条件有没有被其他样式或 JS 干扰。这些没法靠文档查出来，得靠 DevTools 的 Network 和 Rendering 面板实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
