用途：为网页中的图片提供现代响应式与加载优化方案，让图片在不同屏幕尺寸、像素密度与浏览器下选取合适文件。
主要能力：
- 分辨率切换：用 srcset 与 w 描述符列出多尺寸图片，用 sizes 说明渲染宽度，浏览器据此选择最优文件，src 作为不支持 srcset 时的回退。
- 艺术指导：用 <picture> 与 media 条件为移动端、平板、桌面提供不同裁剪或宽高比，可同时结合 srcset 做多分辨率。
- 现代格式回退：按 AVIF、WebP、JPEG/PNG 顺序声明 source，最后用 img 兜底。
- 加载属性策略：LCP/首屏用 loading="eager"、fetchpriority="high"；其余用 lazy 与低优先级；所有图片建议 decoding="async"。
- 避免布局偏移：为 img 提供 width 与 height；容器查询组件中可用 CSS 与 object-fit 控制渲染尺寸。
使用方式：在 HTML 中按上述模式书写 srcset、sizes、source 与 img 属性。常见 sizes 写法包括：全宽 100vw；内容图 (max-width: 800px) 100vw, 800px；两列 (max-width: 600px) 100vw, 50vw；三列 (max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw；卡片 (max-width: 600px) 100vw, 300px；画廊 (max-width: 600px) 50vw, 220px。常用生成宽度：400、600、800、1200、1600、1920。
适用场景：首屏主图、内容图、卡片缩略图、画廊、需要不同裁剪或格式回退的图片。
限制：sizes 使用视口媒体查询，无法直接表达容器查询宽度；容器查询场景需预留足够宽的 srcset 范围，或让 CSS 控制尺寸。每种格式与尺寸的图片文件需自行准备。资料未提供安装命令、收费或平台信息。