image-optimization
使用 Next.js 15 图像、AVIF/WebP 格式、模糊占位符、响应式大小和 CDN 加载器进行图像优化。在提高图像性能、响应式大小调整或 Next.js 图像管道时使用。
SKILL.md
| Optimization | LCP Impact | CLS Impact | Bandwidth |
| AVIF format | -20-30% load | None | -50% size | | Responsive sizes | -30-50% load | None | -40% size | | Blur placeholder | Perceived faster | Prevents shift | +1kb | | Priority loading | -500ms+ | None | None | | Lazy loading | None (below fold) | None | Deferred |
| No width/height | CLS from layout shift | Always set dimensions | | Eager load all | Slow initial load | Use lazy loading | | No priority on LCP | Slow LCP | Add priority prop | | PNG for photos | Large file size | Use AVIF/WebP | | Single image size | Wasted bandwidth | Use responsive sizes |
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/yonatangross/skillforge-claude-plugin --skill image-optimization- 分类
- </>开发工具
- 认证
- —
- 收录时间
- 2026-02-01
- 更新时间
- 2026-02-18
快速解答
什么是 image-optimization？
使用 Next.js 15 图像、AVIF/WebP 格式、模糊占位符、响应式大小和 CDN 加载器进行图像优化。在提高图像性能、响应式大小调整或 Next.js 图像管道时使用。 来源：yonatangross/skillforge-claude-plugin。
如何安装 image-optimization？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/yonatangross/skillforge-claude-plugin --skill image-optimization 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code 或 Cursor 中使用
这个 Skill 的源码在哪？
https://github.com/yonatangross/skillforge-claude-plugin
详情
- 分类
- </>开发工具
- 来源
- user
- 收录时间
- 2026-02-01