〔 Web制作 〕

srcset・sizes生成ツール

画像ファイル名と複数の幅から、レスポンシブ画像用のHTMLを生成します。

Responsive Images

srcset・sizes・画像HTMLを生成

画像候補の幅を登録し、レスポンシブ画像用のコードをまとめて作成します。

画像幅

1〜10000px。不正値と重複は生成時に除外します。

px
px
px
px
px
imgタグの追加設定

4種類の画像候補を幅の小さい順に生成しています。

〔 このツールでできること 〕

実務の小さな確認を、すばやく。

複数サイズで書き出した画像のファイル名と幅を、srcset・sizes・imgタグへまとめます。幅は昇順に並べ、重複や範囲外の値は除外するため、候補の整理にも使えます。

使い方

  1. 01

    画像名・拡張子と、用意した画像幅を入力します。

  2. 02

    画面上での表示パターンとimg設定を選びます。

  3. 03

    生成されたsrcset・sizes・HTMLをコピーします。

具体例

image-375.jpg 375w,
image-768.jpg 768w,
image-1200.jpg 1200w

sizes="(max-width: 1200px) 100vw, 1200px"

よくある利用シーン

  • • レスポンシブ画像のimgタグを作るとき
  • • AVIF・WebPを含むpictureタグを準備するとき
  • • 書き出し済み画像の候補幅を整理するとき

関連ツール

画像サイズ・DPR計算 1x・2x・3xの書き出しサイズを計算します。 アスペクト比計算 画像の縦横比からサイズを計算します。