この道具の仕組み
各幅について「ファイル名-{幅}w.拡張子 {幅}w」のsrcsetを生成し、srcとsizesを含むimgタグに組み立てます。
入力と結果の例
入力例
- 入力
- hero.jpg・400,800,1200
- 結果
- srcset付きのimgタグ
使う前に知っておくこと
- 01入力値や前提条件によって、実際の結果と差が出る場合があります。
- 02重要な判断に使う場合は、元資料や公式情報でも確認してください。
- 03極端に大きい値や長い入力では、ブラウザの数値・処理上限の影響を受けます。
srcset・sizes生成
srcset・sizes生成は、レスポンシブ画像のimgタグ（srcset・sizes属性）を生成します。 入力内容はこの端末のブラウザ内で処理し、結果と前提を同じ画面で確認できます。
入力はブラウザ内で処理登録不要最終検証 2026.07.15
入力する
見えている項目だけで使えます。
詳細設定必要なときだけ変更できます
結果を見る
入力すると、すぐに更新されます。
imgタグ4 サイズ
<img
src="hero-1600w.jpg"
srcset="hero-400w.jpg 400w,
hero-800w.jpg 800w,
hero-1200w.jpg 1200w,
hero-1600w.jpg 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt=""
>各幅の画像を別途書き出す必要があります（画像リサイズツールが使えます）。ブラウザが画面幅とsizesから最適な画像を選びます。