img加width/height像素值会覆盖max-width:100%的弹性行为，导致不响应式；正确做法是移除html中硬编码宽高，改用css的max-width: 100%; height: auto;配合srcset与sizes实现多端适配。
为什么 <img> 加 width 和 height 属性后反而不响应式了？
因为浏览器会把这两个属性当作「强制固定尺寸」来处理，哪怕你写了 max-width: 100%，只要 width 是像素值（比如 width="600"），它就会覆盖 CSS 的弹性行为。现代响应式图片必须靠 HTML 属性 + CSS 协同，而不是只靠样式。
实操建议：
- 删掉
<img>标签里所有硬编码的width和height属性（如width="800" style="max-width:90%"） - 改用 CSS 控制尺寸：
img { max-width: 100%; height: auto; }—— 这是响应式基础，缺一不可 - 如果保留
width/height，仅用于防止布局偏移（CLF），请用「宽高比盒子」或aspect-ratio替代，而非像素值
如何让同一张图在手机、平板、桌面加载不同分辨率版本？
靠 srcset + sizes，不是靠 JS 判断设备宽度。浏览器自己根据视口宽度、设备像素比（dpr）、网络条件选最合适的资源。
实操建议：
-
srcset列出多个源：比如srcset="photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes告诉浏览器「这张图在不同断点下大概占多宽」：比如sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" - 必须保留
src作为降级：它不会被忽略，当浏览器不支持srcset时就用它 - 别写
sizes="100vw"就完事——这会让高 DPR 设备（如 iPhone）也拉低分图，浪费带宽
为什么用了 <picture></picture> 还是加载了错误尺寸的图？
常见原因是 <source></source> 的 media 查询没覆盖全，或者 srcset 里漏了关键尺寸，导致浏览器 fallback 到 <img> 的 src，而那个 src 往往是桌面大图。
实操建议：
- 每个
<source></source>必须带media或type，且顺序要从窄到宽（否则前面的media匹配不到就跳过） - 确保最后一个
<source></source>覆盖最大视口，或干脆去掉media，让它兜底 -
<img>标签仍需有src和alt，不能空着；它的src应该是中等尺寸图，不是最大图 - 用 Chrome DevTools 的 Network → Filter →
largest-contentful-paint查看实际加载的是哪个资源，别信预览缩略图
WebP / AVIF 图片怎么安全 fallback 给不支持的浏览器？
靠 <picture></picture> 的格式优先级机制，不是靠用户代理判断。浏览器只加载第一个它能解码的 <source></source>，后面的全跳过。
实操建议：
- 把新格式放前面：
<source type="image/avif" srcset="..."></source>→<source type="image/webp" srcset="..."></source>→<img src="fallback.jpg" ...> - AVIF 目前 Safari 16.4+ 才稳定支持，iOS 用户可能还卡在 16.3，所以 WebP 层不能省
- 别用
caniuse数据直接写死支持表——有些安卓 WebView 表现和 Chrome 不一致，以实测为准 - 生成多格式时注意压缩参数差异：AVIF 在低质量档（q=20）可能比 WebP 更糊，别盲目设统一 quality
真正麻烦的不是语法，而是得同时兼顾尺寸适配、格式兼容、带宽感知和 layout shift 控制。尤其是 sizes 的表达式和 srcset 的宽度描述，稍不匹配，浏览器就按自己理解“合理选择”，结果往往不合理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
