responsive-images について
responsive-imagesは、ビューポートの大きさ、ピクセル密度、ブラウザー対応状況に合わせた画像実装を扱うデザインスキルです。レスポンシブなサイズ指定、形式のフォールバック、読み込み優先度、レイアウトシフト対策を説明します。
主な機能
- 01srcsetとsizesによる画像選択
- 02AVIF・WebP・JPEGのフォールバック
- 03pictureとメディアクエリーによる切り替え
- 04画像位置に応じた読み込み優先度の設定
- 05widthとheightによる表示領域の確保
活用シーン
- 01ヒーロー画像のLCP最適化
- 02画像読み込みによるレイアウトシフトの削減
- 03レスポンシブグリッド向け画像の提供
- 04画面下部の画像読み込みの遅延
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/responsive-imagesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/aspect-ratio.mdlazy-loading.mdmodern-formats.mdpicture-element.mdsrcset-sizes.md詳細
レスポンシブ画像
概要
レスポンシブ画像では、ビューポート、デバイスピクセル比、ブラウザーの機能に応じて適切なサイズと形式の画像を配信します。適切に実装すると、レイアウトシフト（CLS）を防ぎ、最大コンテンツ描画（LCP）を最適化し、最新の形式を使って帯域幅を50～70％削減できます。
使用する場面： 画像を含むあらゆるページ。特に、コンテンツ画像、ヒーロー画像、商品写真、ギャラリーレイアウトで使用します。
使用しない場面： インライン SVG アイコン、CSS の背景パターン、Canvas で描画するグラフィック。
クイックリファレンス
| パターン | 方法 | 要点 |
|---|---|---|
| レスポンシブなサイズ指定 | 幅記述子（w）を使った srcset と sizes | ブラウザーがビューポートと DPR に適した画像を選択します |
| 最新の形式 | AVIF、WebP、JPEG ソースを指定した <picture> | AVIF は JPEG より70％、WebP は50％ファイルサイズを削減します |
| アートディレクション | media クエリを使った <picture> | ビューポートごとに異なるトリミングを指定します |
| LCP ヒーロー画像 | loading="eager" + fetchpriority="high" | Core Web Vitals のためにダウンロードを優先します |
| ファーストビューより下の画像 | loading="lazy" | ビューポートに近づくまで読み込みを遅らせます |
| CLS の防止 | width + height 属性 | 読み込み前にブラウザーが領域を確保します |
| 固定コンテナー | object-fit: cover または contain | 制約のある領域内でアスペクト比を維持します |
| 形式のフォールバック | AVIF、WebP、JPEG の順にソースを指定 | 圧縮率の高い形式を先に、あらゆる環境で使えるフォールバックを最後に指定します |
推奨画像サイズ
| 用途 | 生成する幅 | Sizes 属性 |
|---|---|---|
| 全幅ヒーロー画像 | 800w、1200w、1600w、2400w | 100vw |
| コンテンツ幅 | 400w、800w、1200w | (max-width: 768px) 100vw, 800px |
| グリッドカード（3列） | 300w、600w、900w | (max-width: 768px) 100vw, 33vw |
| サイドバーのサムネイル | 150w、300w | 150px |
読み込み戦略
| 画像の位置 | loading | fetchpriority | 理由 |
|---|---|---|---|
| ヒーロー画像／LCP | eager | high | LCP を最適化し、ダウンロードを優先します |
| ファーストビュー内（LCP 以外） | eager | 省略 | 通常どおり読み込みます |
| ファーストビューより下 | lazy | 省略 | ビューポートに近づくまで読み込みを遅らせます |
| 画面外のカルーセル | lazy | 省略 | 操作されるまで読み込みを遅らせます |
形式の比較
| 形式 | 品質 | ファイルサイズ | ブラウザーの対応 | 用途 |
|---|---|---|---|---|
| JPEG | 良好 | 中程度 | 100％ | 写真、複雑な画像 |
| PNG | ロスレス | 大きい | 100％ | ロゴ、透過画像 |
| WebP | 優秀 | 小さい | 96％以上 | 最新のブラウザー、写真 |
| AVIF | 優秀 | 最小 | 93％以上 | 最新形式。フォールバックが必要です |
よくある間違い
| 間違い | 正しい方法 |
|---|---|
| img 要素に width 属性と height 属性を指定しない | CLS によるレイアウトシフトを防ぐため、必ず width と height を指定します |
| LCP のヒーロー画像を遅延読み込みする | LCP 画像には loading="eager" と fetchpriority="high" を使用します |
| 可変幅画像に密度記述子（1x、2x）を使用する | sizes 属性とともに幅記述子（400w、800w）を使用します |
| コンテンツ画像に alt テキストがない | 説明的な alt テキストを指定します。装飾画像に限り alt="" を使用します |
| JPEG のみを配信し、最新形式へのフォールバックを用意しない | <picture> を使い、AVIF と WebP のソースを JPEG にフォールバックさせます |
委任
- ページのレスポンシブ画像の問題と CLS の問題を監査する：
Exploreエージェントを使い、HTML をスキャンして属性の欠落、不適切な読み込み方法、形式の不足を確認します - ページ内のすべての画像を、最新形式に対応した picture 要素に変換する：
Taskエージェントを使い、AVIF／WebP／JPEG のフォールバック構成で img タグを書き換えます - 複数ページのサイト向けに画像最適化パイプラインを計画する：
Planエージェントを使い、srcset のブレークポイント、形式変換ワークフロー、CDN 統合を設計します
参考資料
コメント
Markdown 対応