responsive-images
✓srcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 次の場合に使用します: ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換。
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Standards: Web Performance Best Practices, Core Web Vitals
| Use Case | Widths to Generate | Sizes Attribute |
| Full-width hero | 800w, 1200w, 1600w, 2400w | 100vw | | Content width | 400w, 800w, 1200w | (max-width: 768px) 100vw, 800px | | Grid cards (3-col) | 300w, 600w, 900w | (max-width: 768px) 100vw, 33vw | | Sidebar thumbnail | 150w, 300w | 150px |
srcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 次の場合に使用します: ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換。 ソース: jezweb/claude-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jezweb/claude-skills --skill responsive-images- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
responsive-images とは？
srcset、サイズ、遅延読み込み、最新の形式 (WebP、AVIF) を使用して、パフォーマンスの高いレスポンシブ イメージを実装します。 CLS 防止のためのアスペクト比、アート ディレクションのための画素、LCP 最適化のためのフェッチ優先度をカバーします。 次の場合に使用します: ページへの画像の追加、Core Web Vitals の最適化、レイアウトのずれの防止、アート ディレクションの実装、または最新の形式への変換。 ソース: jezweb/claude-skills。
responsive-images のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jezweb/claude-skills --skill responsive-images インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/jezweb/claude-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01