Image

核心用法

Image Skill 是一套面向 Web 性能工程的图片优化规范，通过量化阈值指导开发者平衡视觉质量与加载效率。其核心工作流包含四个维度：

1. 性能预算管控：按内容位置（首屏/首屏外）和设备类型设定硬性体积上限——首屏大图150KB、移动端绝对上限200KB，防止 Largest Contentful Paint (LCP) 劣化。

2. 智能格式选型：基于内容类型建立决策矩阵——照片类优先 AVIF/WebP 渐进降级，透明需求强制 WebP+PNG 双保险，矢量图形 SVG 优先，动画严格限制 GIF 调色板规模。

3. 质量阶梯策略：区分场景容忍度——电商产品95%保质量防跳出，风景摄影可接受80-85%以换取带宽，人像保留88-92%保护肤色层次。

4. 响应式工程化：规范密度描述符上限（2x）、强制四档断点覆盖、Aspect Ratio 变化超20%时启用 <picture> 艺术指导，关键图片仅预加载最大变体。

显著优点

• 量化可执行：所有规则附带明确数值（KB、百分比、px），消除团队争议
• 多目标优化：同步覆盖 Core Web Vitals、无障碍、存储成本三个维度
• 降级完备：AVIF→WebP→JPEG 的 fallback 链条确保浏览器兼容性
• 细节专业：涵盖 EXIF 剥离、ICC 配置、Lanczos3 重采样等底层优化

潜在局限

• 静态规范：未涉及运行时自适应（如客户端网络状况动态调整质量）
• CDN 未提及：缺乏边缘优化策略（如 Cloudflare Polish 或 Imgix 参数）
• 现代格式支持：AVIF 编码速度、解码能耗对低端设备的影响未量化
• CMS 集成：未提供与主流构建工具（Next.js Image、Gatsby Sharp）的映射指南

适合人群

• 前端性能工程师与 Web Vitals 专项优化团队
• 电商/媒体类站点技术负责人（尤其关注 LCP 与转化率关联）
• 设计系统维护者需制定跨团队图片交付标准

常规风险

• 质量阈值误用：盲目套用「80% quality」未区分编码器差异（mozJPEG vs cjpeg），可能导致同参数下视觉质量波动
• 过度压缩反馈循环：开发环境网络优良易低估真实用户感知，建议结合 WebPageTest 3G 模拟验证
• 无障碍疏忽： decorative image 的 aria-hidden 与 CSS display:none 混淆，可能造成辅助技术识别不一致

Image Skill 综合评估

核心用法

Image Skill 是一份纯 Markdown 格式的图像性能优化配置规范，并非可执行程序。它定义了完整的 Web 图像优化策略矩阵，涵盖性能预算、格式选择、质量阈值、响应式实现、无障碍标准及压缩技术六大维度。

关键配置亮点：

• 性能预算体系：首屏大图 150KB 上限（LCP 优化），首屏缩略图 25KB，首屏以下内容 400KB/视口，移动端绝对上限 200KB
• 格式选择决策树：>800px 照片优先 AVIF 60%，透明需求用 WebP alpha，动画 WebP 限 3MB，矢量用 SVG
• 质量精细控制：人像 JPEG 88-92%（肤色保护），风景 80-85%，电商产品 95%（防购物车流失），WebP 比 JPEG 低 10-15% 起始
• 响应式规则：密度 1x/1.5x/2x（拒绝 3x 浪费），断点 480/768/1200/1920w，长宽比变化 >20% 触发 picture 元素
• 无障碍与压缩：文字叠加 4.5:1 对比度，alt 文本 125 字符限制，渐进式 JPEG 强制启用，EXIF/ICC 自动剥离

显著优点

1. 量化指标清晰：所有阈值均有具体数字（KB、百分比、像素），避免模糊表述，便于工程落地
2. 场景化区分：人像/风景/电商/动画等不同场景给出差异化策略，拒绝一刀切
3. 性能与体验平衡：既设定硬性预算（如 150KB Hero 上限），又保留质量红线（电商 95%），兼顾 Core Web Vitals 与商业转化
4. 现代格式优先：AVIF 为主、WebP 兜底、JPEG 基线，符合 2024-2025 技术栈趋势
5. 零维护成本：纯配置文档无需更新依赖，无版本兼容问题

潜在缺点与局限性

1. 非自动化工具：仅提供规范，无实际压缩/转换功能，需配合 imagemin、Squoosh、Sharp 等工具链执行
2. AVIF 兼容性假设：以 AVIF 为首选格式，但部分旧浏览器（Safari <16、部分企业环境）仍需额外检测逻辑
3. 移动端 10-15% 质量降幅：该数值为经验区间，实际需根据设备屏幕 PPI 动态调整，静态百分比可能欠精准
4. 200px 懒加载阈值：对于快速滚动场景或无限流，200px 可能偏激进，需 A/B 验证
5. 缺乏视频/字体等资源预算：专注图像，完整性能预算需自行扩展

适合人群

• 前端工程师：构建图像优化流水线时的配置参考基准
• 性能工程师：制定团队 Core Web Vitals 达标策略
• 全栈开发者：快速获取行业通行的图像压缩参数
• 技术负责人：作为 Code Review 中图像相关 PR 的验收标准

常规风险

• 误用为执行工具：新手可能误以为 Skill 自身具备压缩功能，实际需外部工具配合
• 参数照搬风险：电商 95% 质量、人像 88-92% 等数值需结合具体视觉验收，非绝对真理
• 格式 Serving 复杂度：AVIF/WebP/JPEG 多版本生成增加构建复杂度与存储成本

安全结论

该 Skill 为纯声明性配置文档，无可执行代码、无网络请求、无文件系统操作、无数据收集。安全扫描获得 S+ 满分 100，攻击面为零，可无条件信任。