レスポンシブ画像 Srcset 生成ツール
設定可能なブレークポイント、フォーマット、sizes 属性で <img srcset> と <picture> 要素の HTML を生成します。
このツールについて
レスポンシブ画像 Srcset 生成ツールは、Web開発者がレスポンシブ画像用の正しくフォーマットされた <img srcset> および <picture> 要素マークアップを作成するための無料ブラウザベースツールです。複雑な srcset 属性を手書きし、複数の画像フォーマットやブレークポイントの正しい構文を覚える代わりに、ビジュアルインターフェースで設定を行い、本番環境で使えるHTMLを即座に取得できます。
レスポンシブ画像は、現代のWebパフォーマンスの要です。srcset 属性は利用可能な画像幅をブラウザに伝え、現在のビューポートとデバイスピクセル比に最適なファイルを選択できるようにします。sizes 属性と組み合わせることで、モバイルデバイスでのページ重量を劇的に削減できます — すべてのデバイスに単一の大きな画像を配信する場合と比較して、画像バイト数を50-80%節約できることも珍しくありません。
<picture> 要素はフォーマットネゴシエーションをサポートすることでさらに進化しています。サポートしているブラウザには WebP や AVIF などの次世代フォーマットを配信し、JPEG や PNG への自動フォールバックが可能です。AVIFは通常、同等品質のJPEGより30-50%小さいファイルを実現し、WebPは25-35%の節約を提供します。
このツールは両方の出力モードを生成します：基本的なレスポンシブ画像用のシンプルな <img> タグ（srcset と sizes 付き）と、フォーマットベースのアートディレクション用の複数の <source> タグを含む完全な <picture> 要素です。画像最適化に取り組んでいる場合は、ファイルサイズ削減のための画像圧縮ツールや、複数解像度バリアント生成のための画像リサイズツールも役立つでしょう。DevToolboxの全ツールと同様に、すべての処理はブラウザ内で完結します。
使い方
- ベース画像URLを入力します。これは元の画像のパスです。ツールはファイル拡張子の前に幅のサフィックスを挿入してバリアントを生成します（例：
hero-640w.jpg）。 - アクセシビリティのためのAlt テキストを設定します。生成される
alt属性に含まれます。 - 出力モードを選択します：シンプルなレスポンシブ画像には
<img srcset>、自動フォーマットネゴシエーション付きのマルチフォーマットサポートには<picture>を選びます。 - 画像フォーマット（AVIF、WebP、PNG、JPG）を選択します。
<picture>モードでは各フォーマットが<source>要素を生成します。 - ブレークポイントを追加、削除、編集して設定します。デフォルトのブレークポイントは一般的なデバイス幅：320、640、768、1024、1280、1536ピクセルをカバーしています。
- 自動生成された Sizes 属性を確認するか、「Custom」に切り替えてカスタムのレスポンシブsizesを記述します（例：
(max-width: 640px) 100vw, 50vw）。 - Loading（lazy/eager）、Decoding（async/sync/auto）、Fetch Priority（auto/high/low）属性を設定します。Copy（またはCtrl+Shift+C）をクリックして、生成されたHTMLをクリップボードにコピーします。
よくある質問
srcsetとpicture要素の違いは何ですか？
<img>タグのsrcset属性は、ビューポート幅とデバイスピクセル比に基づいて、同じ画像の異なる解像度バリアントからブラウザが選択できるようにします。<picture>要素は複数の<source>タグと<img>フォールバックをラップし、フォーマットネゴシエーション（例：ChromeにはAVIF、古いブラウザにはJPEGを配信）とアートディレクション（異なるビューポートで異なるクロップ）を可能にします。シンプルな解像度切り替えにはsrcsetを、フォーマット選択やアートディレクションが必要な場合は<picture>を使用します。
sizes属性とは何ですか？なぜ重要ですか？
sizes属性は、画像がダウンロードされる前に、様々なビューポート幅で画像がどの幅でレンダリングされるかをブラウザに伝えます。これがないと、ブラウザは画像が100vw（フルビューポート幅）であると仮定し、必要以上に大きなファイルをダウンロードする可能性があります。適切なsizes属性により、ブラウザはsrcsetから最小の十分な画像を選択し、帯域幅を節約してパフォーマンスを向上させます。
レスポンシブ画像にAVIFとWebPのどちらを使うべきですか？
理想的には、<picture>要素を使って両方を使用します。AVIFはより良い圧縮を提供しますが（JPEGより30-50%小さい）、エンコードが遅く、ブラウザサポートがやや限定的です。WebPは25-35%の節約を提供し、ほぼ普遍的なブラウザサポートがあります。<source>タグでAVIFを最初にリストし、WebPを次のフォールバック、JPEG/PNGを最終フォールバックとして最大の互換性を確保します。
どのブレークポイント幅を使うべきですか？
一般的なブレークポイント幅は、主要なデバイスカテゴリに対応しています：320px（小型スマートフォン）、640px（大型スマートフォン）、768px（タブレット）、1024px（小型ノートPC）、1280px（デスクトップ）、1536px（大型モニター）。ただし、最善のアプローチは、デバイス幅ではなく実際のレイアウトブレークポイントに基づいて幅を選択することです。
loading='eager'とloading='lazy'はいつ使うべきですか？
アバブザフォールド（スクロールなしで最初のビューポートに表示される）画像にはloading='eager'（または属性を省略）を使用します。これらはLargest Contentful Paint（LCP）に重要です。ビロウザフォールドの画像にはすべてloading='lazy'を使用し、ユーザーがスクロールして近づくまでダウンロードを遅延させます。ヒーロー画像には、最大のLCPパフォーマンスのためにeagerローディングとfetchpriority='high'を組み合わせます。
ファイルサフィックスパターンはどのように機能しますか？
ツールはベースURLのファイル拡張子の前にサフィックスを挿入します。例えば、ベースURLが'hero.jpg'で640pxのサフィックスが'-640w'の場合、生成されるURLは'hero-640w.jpg'になります。画像パイプラインに合わせてサフィックスをカスタマイズできます — 例えば、Retina画像用の'@2x'やTシャツサイズの'-sm'/'-md'/'-lg'など。サフィックスはブレークポイントごとに完全に編集可能です。
データは安全ですか？
はい。すべてのHTML生成はクライアントサイドのJavaScriptを使用してブラウザ内で完全に行われます。画像URL、設定、その他のデータがサーバーに送信されることはありません。内部URL、ステージング環境、その他の機密設定でも安全にお使いいただけます。
関連ツール
画像リサイズツール
ブラウザ内でカスタムサイズで画像をリサイズ。アスペクト比維持、出力形式選択、バッチ処理対応。
画像圧縮ツール
ブラウザ内で品質やリサイズ設定付きで画像を圧縮します。前後のファイルサイズを比較できます。
CSSメディアクエリビルダー
幅、高さ、向きなどの条件でCSSメディアクエリをビジュアルに構築します。
メタタグ生成ツール
HTMLメタタグ、Open Graph、Twitter Cardタグをライブプレビュー付きで生成します。
Preload / Prefetchジェネレーター
HTML preload、prefetch、preconnect、dns-prefetchリンクタグをベストプラクティス検証付きで生成します。