为不同屏幕提供语义不同的图片构图需用<picture>配合<source media>按宽屏优先、窄屏兜底的顺序书写，media必须为合法CSS媒体查询；格式降级时按type="image/avif"→type="image/webp"→<img src>顺序实现自动选择；<img>上需设srcset+sizes支持Retina，decoding="async"和loading="eager"优化性能，深色模式需专用资源而非滤镜。
需要为不同屏幕提供语义不同的图片构图时
比如手机端只保留人脸特写，桌面端展示完整场景——这不是缩放问题，而是“该看什么”的决策。浏览器按 <source> 顺序匹配，第一个 media 为真就加载对应 srcset，后面的全跳过。所以宽屏规则要放前面，窄屏兜底放最后。
常见错误现象：<source media="(max-width: 768px)"> 放在最上面，结果所有设备都加载小图；或者断点写成 media="768px"（非法媒体查询），整个 <source> 被静默忽略。
- 必须用合法 CSS 媒体查询，如
media="(min-width: 769px) and (max-width: 1200px)" - 每个
srcset只需一个路径，比如hero-mobile-crop.jpg，不用带w或x描述符（那是分辨率适配的事） - 别依赖
orientation: landscape，iOS Safari 行为不一致，容易失效
需要按浏览器支持能力降级图片格式时
现代格式如 image/avif、image/webp 压缩率高，但老浏览器不认。用 <source type="image/avif"> + <source type="image/webp"> + <img src="fallback.jpg"> 就能实现自动格式选择：浏览器从上往下试，遇到第一个支持的 type 就停。
关键点在于顺序即优先级。AVIF 放最前，WebP 次之，JPEG 最后兜底。如果把 JPEG 的 <source> 写在最上面，哪怕浏览器支持 AVIF，也会加载 JPEG。
立即学习“前端免费学习笔记（深入）”；
-
type属性值必须是标准 MIME 类型，写成type="avif"或type="webp"无效 - 所有
srcset路径必须真实存在，404 不报错，只会静默 fallback 到下一项，调试得靠 Network 面板清缓存确认实际加载项 -
<picture>内最后一个子元素必须是<img>，且带src和alt，否则不匹配任何<source>时区域留白
需要兼顾视口宽度和像素密度时
单靠 media 只能切构图，切不了清晰度。这时候要在 <img> 上加 srcset 和 sizes：比如同一张桌面图，给 DPR=2 的设备提供 @2x 版本，同时用 sizes 告诉浏览器“在 1200px 宽视口下，这张图占 80vw”，它才能从 srcset 里挑最接近的尺寸。
容易踩的坑是混用 w 和 x 描述符。比如 srcset="hero-1200.jpg 1200w, hero@2x.jpg 2x" 会直接导致整个 srcset 被浏览器忽略，回退到 <img> 的 src。
-
sizes必须写在<img>上，不能写在<source>里 - 如果只做 art direction（不同构图），
srcset里可以只放一个文件；如果还要支持 Retina，就得补2x版本 -
decoding="async"推荐加在<img>上，防止大图解码阻塞主线程
企业官网首页大图需要深色模式适配时
纯靠 CSS 滤镜反转图片会导致文字发虚、细节丢失。正确做法是用 <source media="(prefers-color-scheme: dark)"> 提供专色优化的暗色版大图资源，比如对比度更高、阴影更柔和的版本。
同理，@media (prefers-reduced-motion) 也能配独立静态图，满足无障碍要求。但注意：这些 media 查询必须写在 <source> 上，浏览器在加载阶段就完成匹配，不是 JS 控制的。
- 深色图资源必须真实存在，且构图/色调经过人工调优，不能只是原图加滤镜
- 首屏大图建议设
loading="eager"，避免懒加载导致视觉空白 -
<img>的alt文本要描述画面核心信息（如“XX科技总部大楼外立面，玻璃幕墙反射蓝天白云”），不能写“banner1”
