HTML5响应式图片核心目标是按需加载尺寸合适、格式现代、清晰度匹配的图片：srcset+sizes适用于同一构图多分辨率场景，picture用于构图或格式变化场景，须配sizes、type、media及fallback策略。
HTML5 响应式图片的核心目标是：在不同设备上加载**尺寸合适、格式现代、清晰度匹配**的图片，不浪费带宽，也不牺牲视觉质量。最佳方案不是堆砌标签，而是按需选择 srcset + sizes 或 <picture>，并配以合理策略。
优先用 srcset + sizes 处理“同一构图、多分辨率”场景
适用于头图、文章插图等不需要换裁剪、只须适配屏幕宽度或像素密度的情况。这是最轻量、兼容性好、浏览器支持最广的方式。
-
srcset 列出带宽度描述符（w）的源文件，如
"photo-480.jpg 480w, photo-768.jpg 768w, photo-1200.jpg 1200w"，让浏览器知道每张图的原始宽度 -
sizes 必须写，告诉浏览器“这张图在不同断点下实际占多宽”，例如
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"；不写 sizes，浏览器默认按 100vw 计算，极易选错大图 - src 是降级兜底，用于不支持 srcset 的旧浏览器，也作为最终 fallback
必须用 <picture> 处理“构图/格式/语义变化”场景
当需要为手机屏换竖版构图、为桌面屏用横幅大图，或优先加载 WebP/AVIF 但需 JPEG 降级时，<picture> 是唯一可靠方案。
-
每个 <source> 按顺序匹配，浏览器取第一个满足
media或type条件的，不匹配则回退到内部<img> -
media 断点要和 CSS 实际布局一致，比如用
(max-width: 768px)，就意味你的网格或容器在此宽度下确实切换了布局 -
type 属性用于格式优先级，如先试
image/webp，再 fallback 到image/jpeg，注意所有同条件的 source 需成对出现 - alt 文字只写在 <img> 上，<source> 不支持 alt，也不渲染
关键避坑与增强技巧
很多性能问题不是代码写错，而是忽略了浏览器决策逻辑或部署细节。
立即学习“前端免费学习笔记（深入）”；
-
别把高 DPR 图混进 w 描述符里：如
"img@2x.jpg 1200w"是错的；2x 图应搭配2x描述符，如"img@1x.jpg, img@2x.jpg 2x" -
背景图不做响应式主力：CSS 的
background-image无法声明多个源或 media 条件，关键插图务必用 HTML 图片元素 - 配合 loading="lazy"：对非首屏图片加懒加载，进一步减少初始请求压力
- 服务端或 CDN 可能干扰：即使前端代码正确，某些 CDN 会强制返回 WebP 或忽略 DPR，上线前务必用 Network 面板验证实际加载的是哪张图
格式与交付建议
现代格式能显著减小体积，但必须保障降级可用。
- 优先生成 WebP（兼容性好），AVIF（更优压缩但 Safari 支持晚，需谨慎）
- 所有 WebP/AVIF 都要配对应 JPEG/PNG fallback，且确保 fallback 图片尺寸、质量与现代图一致
- 图片上传前做压缩：用 Squoosh、sharp 或 ImageOptim 批量处理，避免“高清但超大”假象
- 考虑用
<img width="..." height="...">声明固有尺寸，防止布局偏移（CLS）
