必须配sizes才能让srcset的w单位生效，否则浏览器按100vw回退加载大图；sizes需用媒体查询匹配真实CSS布局宽度，如(max-width: 479px) 100vw, (max-width: 767px) 50vw, 33vw。
img 标签的 srcset 和 sizes 属性怎么配才不白写
只加 srcset 不配 sizes，浏览器大概率会忽略你写的高分辨率图——它不知道这些图对应多宽的容器，只能退回到 src。必须同时声明 sizes，告诉浏览器“在不同视口宽度下，这张图会占多少 CSS 像素宽”。
常见错误是把 sizes 写成固定值，比如 sizes="300px"。这会让所有设备都按 300px 计算，失去响应意义。正确做法是用媒体条件匹配布局断点：
<img
src="photo-small.jpg"
srcset="photo-small.jpg 480w,
photo-medium.jpg 768w,
photo-large.jpg 1200w"
sizes="(max-width: 479px) 100vw,
(max-width: 767px) 50vw,
33vw">
-
(max-width: 479px) 100vw：小屏下图片撑满视口 -
(max-width: 767px) 50vw：中屏下占一半视口宽（注意断点要和 CSS 布局一致） -
33vw：大屏默认值，对应三栏布局中每张图约三分之一视口宽
picture 元素里 source 的 media 和 type 属性谁先生效
media 匹配优先级高于 type。浏览器从上到下逐个检查 <source>，第一个 media 为真且资源可加载的，就停住，不再往后看。哪怕后面有更匹配的 type，也不会触发。
所以顺序不能错：宽屏条件放前面，窄屏放后面；同一尺寸下，优先放 WebP，再 fallback 到 JPEG。
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(min-width: 768px)" type="image/webp" srcset="hero-large.webp 1x, hero-large-2x.webp 2x"> <source media="(min-width: 768px)" type="image/jpeg" srcset="hero-large.jpg 1x, hero-large-2x.jpg 2x"> <source media="(max-width: 767px)" type="image/webp" srcset="hero-small.webp 1x, hero-small-2x.webp 2x"> <img src="hero-small.jpg" alt="hero"> </picture>
- 如果把 JPEG 的
<source>放 WebP 前面，即使浏览器支持 WebP，也会直接选 JPEG -
<img>是最终 fallback，必须保留，且其src应该是广泛兼容的格式（如 JPEG/PNG） -
media中的断点需与 CSS 媒体查询严格对齐，否则会出现“CSS 显示为两栏，但图片仍按一栏加载”的错位
为什么 lazy loading + srcset 组合后首屏图片不显示
Chrome 和 Edge 对 loading="lazy" 的实现有个隐性规则：当 img 没有明确的 width 和 height，且又用了 srcset，浏览器可能无法及时计算占位高度，导致懒加载机制误判图片已在视口外，从而跳过加载。
这不是 bug，而是性能权衡——没有尺寸信息时，浏览器不敢预留空间，干脆延迟直到滚动触达。
- 给
img加内联width和height（推荐使用 HTML 属性，不是 CSS） - 或者用
aspect-ratioCSS 属性配合width: 100%，但注意 Safari 15.4+ 才稳定支持 - 首屏关键图片建议显式设置
loading="eager"，别依赖自动判断 - 不要在
<picture>外层加loading，只作用于内部<img>
WebP 和 AVIF 图片在构建流程里怎么安全降级
不能只靠 <picture> 的 type fallback，因为部分旧 Android WebView 或 Electron 内核识别 image/avif 类型但实际解码失败。得加一层运行时检测。
简单可靠的做法是用 document.createElement('picture').canPlayType('image/avif') 判断，但注意这个 API 在 Safari 和 Firefox 中返回空字符串，得结合 UA 或特性嗅探补全。
- 构建时生成多格式资源是必须的，但上线前务必在真实低端机（如 Android 6–8）上验证 AVIF 是否真能显示
- Webpack/Vite 插件如
vite-plugin-imagemin默认不处理 AVIF，需手动配置avif编码器（如cavif） - CDN（如 Cloudflare、Cloudinary）开启自动格式转换时，
Accept请求头必须透传，否则服务端无法知道客户端支持什么格式
响应式图片真正的复杂点不在语法，而在 layout、资源生成、CDN 配置、运行时环境四者之间的对齐。少一个环节，srcset 就只是多写了几个 URL。
