レスポンシブ画像マークアップ生成ツールとは
レスポンシブ画像マークアップにより、ブラウザは訪問者の画面とレイアウトに適した画像ファイルを選択できます。適切なマークアップには、width、height、loading、decoding、有用なaltテキストも含まれます。静的サイトでは、画像に固定のエクスポートファイル名があることが多く、最終ビルド出力に明確なパスが必要なため、これが役立ちます。
クイックアンサー
srcset、sizes、width、height、altテキスト付きのレスポンシブimgまたはpictureマークアップを生成します。静的サイトでのレイアウトシフト、画像候補の欠落、アクセス不能なalt属性を防ぐのに役立ちます。
Last updated: 2026-06-11
制限事項
- srcset候補は公開出力の指定されたパスに存在する必要があります。生成されたマークアップはファイルパスを参照します。各画像ファイルが正しい場所にコピーされていることを確認する必要があります。
- sizes属性はブラウザが選択するsrcset候補に影響します。sizes値が正しくないと、ブラウザが必要以上に大きいまたは小さい画像をダウンロードする可能性があります。
- picture要素内のWebPソースには、WebPをサポートしない古いブラウザ向けのフォールバックimg srcが必要です。フォールバックがない場合、サポートしないブラウザには画像が表示されません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- デフォルトの画像URL、altテキスト、幅、高さを入力します。
- 画像URLと幅のペアとしてsrcset候補を追加します。
- プレーンなimgタグを生成するか、WebPソース付きのpicture要素を生成するかを選択します。
- マークアップをコピーし、すべての画像ファイルが公開出力に存在することを確認します。
主な用途
- 静的なHTMLページ用にレスポンシブ画像を準備する。
- レイアウトシフトを引き起こすwidthとheight属性の欠落を防ぐ。
- WebPとフォールバック画像パスを含むpictureマークアップを作成する。