用途：帮助在网页中实现现代响应式图片，让图片按显示环境提供合适尺寸与格式，并优化加载优先级。技能来自 profpowell/project-template，URL 为 https://www.skills.sh/profpowell/project-template/responsive-images。
主要能力：一是分辨率切换，用 srcset 配 w 描述符列出多尺寸文件，用 sizes 描述渲染宽度，由浏览器结合视口与像素密度选择；二是艺术指导，用 picture 与 source media 为不同视口提供不同裁剪或宽高比；三是格式回退，按 AVIF、WebP、JPEG/PNG 顺序用 type 与 source 提供优雅回退；四是加载属性，按上下文配置 loading、decoding、fetchpriority，如 LCP/Hero 图用 eager、high。
使用方式：图片至少包含 src、alt、loading、decoding、width、height。需要分辨率切换时在 img 上写 srcset 与 sizes，如 sizes="(max-width: 600px) 100vw, 50vw"；需要格式回退或艺术指导时用 picture 包裹 source 与 img。资料给出 Hero、内容图、卡片缩略图、画廊等模式，以及极简 img 与仅 srcset 的简化写法。
适用场景：响应式网站、内容页、卡片与画廊、Hero 图等需要按视口或像素密度适配的图片。
限制：sizes 只支持视口媒体查询，不直接支持容器查询；容器查询组件内需提供覆盖较全的 srcset 范围，并由 CSS 控制渲染尺寸。资料未提供自动生成多尺寸或格式变体的工具链，也未涉及具体收费、平台或效果数据。alt 应描述内容，装饰性图片用空 alt。