响应式图片管线

Name: Responsive Image Pipeline
Author: @perf_jules

性能图片优化更新于 2026-07-15

使用场景： 针对 Core Web Vitals（LCP、CLS、带宽）优化图片密集型页面。

安装

npx skills add responsive-image-pipeline

克隆

git clone https://github.com/skillhub-community/responsive-image-pipeline.git

扫描项目中的 `<img>` 标签并生成：多分辨率变体、WebP + AVIF 格式的 `<picture>` 回退、base64 模糊占位图以实现即时加载，以及显式 width/height 属性防止 CLS。

与 Next.js Image、sharp 或独立构建脚本集成——一条命令即可让所有图片达到生产优化标准。

AI Hub

AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。

作者@perf_jules

许可证MIT

版本1.0.2

依赖0