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 で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/yonatangross/skillforge-claude-plugin
詳細
- カテゴリ
- </>開発ツール
- ソース
- user
- 初回登録
- 2026-02-01