用途
该技能用于在代码审查中检查图片资源、标记（markup）以及 CDN 或构建转换配置，目标是「为 Web 优化所有图片」。图片通常占页面体积的 50% 以上，未优化的图片会造成加载缓慢、带宽浪费、Core Web Vitals 评分差，并在移动网络下影响用户体验。
主要能力
技能提供四种工作模式：
- Check（检查）：扫描代码库中所有图片资源和 img 元素，逐项验证：格式是否合适（照片用 WebP/AVIF，图标用 SVG，PNG 仅用于透明图）；宽度大于 100px 的图片是否具备响应式 srcset 和 sizes 属性；是否包含 width/height 属性以防止布局偏移；首屏以下的图片是否设置 loading='lazy'；文件大小是否合理（照片 < 200KB，图形 < 50KB）。问题按严重程度分组并附文件路径。
- Fix（修复）：针对发现的问题给出修正：将 JPEG/PNG 照片转换为 WebP 并提供 AVIF 回退；添加 400w、800w、1200w、1600w 变体的 srcset 及合适的 sizes 属性；添加与宽高比匹配的显式 width/height；为折叠下方图片添加 loading='lazy'，首屏优先图片不加懒加载；照片压缩至 80% 质量，AVIF 为 60%；图标和 Logo 使用 SVG。输出修正后的 HTML 图片标记。
- Explain（解释）：说明图片优化对 Core Web Vitals 的影响，尤其是未优化图片如何影响 Largest Contentful Paint（LCP）和 Cumulative Layout Shift（CLS）；比较 AVIF、WebP、JPEG 的压缩差异及各自适用场景与浏览器支持；解释 srcset 与 sizes 如何配合提供合适尺寸的图片，以及 width/height 属性为何能防止布局偏移；包含带宽节省计算与加载性能提升。
- Code Review（代码审查）：审查与图片优化相关的资源、标记和交付配置，标出格式选择、尺寸或加载行为违反规则的具体文件或组件，并说明如何在 DevTools 中确认修复。
使用方式
该技能以规则形式提供，可通过上述 Check、Fix、Explain、Code Review 四种模式调用。完整实现细节、代码示例和框架特定指南见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/images/image-optimization。
适用场景
适用于前端代码审查、性能优化、Core Web Vitals 改进、图片资源治理等场景，尤其适合需要系统性检查图片格式、响应式尺寸、懒加载和布局稳定性的项目。
限制
资料未提供该技能的具体安装命令、依赖要求、支持的框架版本或收费信息，暂未提供。