ぱんだツールズぱんだツールズ

レスポンシブ画像 srcset 生成

複数解像度に一括リサイズ＋picture/srcsetコードを自動生成

ぱんだツールズファイルはサーバーに送信されません

よくある質問

srcset とは何ですか？

srcset は HTML の img 要素の属性で、画面サイズや解像度に応じて最適な画像を自動選択させる仕組みです。例えばスマホには小さな画像、PCには大きな画像を配信することで、表示速度を改善しながら高品質な表示を実現できます。

picture 要素と img + srcset の違いは？

img + srcset はブラウザが画面幅に応じて最適サイズを自動選択します。picture 要素はそれに加えて形式（WebP/JPEG 等）の切り替えも制御でき、より細かい最適化が可能です。このツールでは両方のコードを出力します。

対応している画像形式は？

JPEG・PNG・WebP・GIF など、ブラウザが対応しているすべての画像形式を読み込めます。出力は選択した形式（JPEG または WebP）で書き出されます。

ブレイクポイントはカスタムできますか？

はい。デフォルトで用意した幅（320〜1920px）に加えて、任意の幅をカスタム入力できます。不要なサイズのチェックを外すことでスキップも可能です。

出力される ZIP に何が含まれますか？

選択したすべてのブレイクポイント幅でリサイズされた画像ファイルと、そのまま貼り付けられる HTML コードが記載された code.txt が含まれます。

ファイルはサーバーに送信されますか？

いいえ、すべての処理はお使いのブラウザ内の Canvas API で完結します。画像ファイルが外部に送信されることはありません。

WebP と JPEG どちらを選べばよいですか？

WebP は JPEG と比べ同じ品質で 25〜35% ファイルサイズが小さく、Core Web Vitals（LCP）改善に効果的です。現代のブラウザはほぼすべて WebP に対応しているため、特別な理由がなければ WebP を推奨します。

sizes 属性はどう書けばよいですか？

出力コードには sizes="(max-width: 768px) 100vw, 50vw" のような例が含まれています。実際のレイアウトに合わせて値を調整してください。例えばコンテンツ幅が常に 800px 以下なら sizes="800px" のようにも書けます。

画像ツール一覧

すべて見る

画像圧縮

JPEG・PNG・WebP画像をブラウザ内で圧縮。ファイルサイズを大幅削減。

使う →

AI画像背景削除

AIが自動で被写体を検出し背景を除去。人物・商品・動物など複雑な背景もブラウザ内で透過PNG化。

使う →

HEIC→JPEG変換

iPhoneのHEIC写真をJPEGに変換。ブラウザ内処理でサーバー送信なし。

使う →

部分モザイク・ぼかし処理

選択した部分だけにモザイク・ぼかしをかけて加工。顔・住所など一部だけ隠したいときに。複数箇所対応。

使う →

このツールについて

使い方

  1. 画像をドロップゾーンにドラッグ＆ドロップ（またはクリックして選択）
  2. 出力したい幅のチェックボックスを選択（デフォルト: 320〜1920px の6サイズ）
  3. 出力形式（WebP または JPEG）と品質を選択
  4. 「srcset 用画像を生成」ボタンをクリック
  5. 生成された HTML コードをコピー、または画像と一緒に ZIP でダウンロード

このツールの特徴

  • ✓picture と img srcset 両方出力：用途に応じてどちらのコーディングスタイルでも使えます
  • ✓カスタム幅対応：デフォルトの 6 サイズ以外に任意の幅を追加できます
  • ✓WebP / JPEG 選択：WebP を選ぶと同画質でファイルサイズを 25〜35% 削減できます
  • ✓完全無料・登録不要：ブラウザ内のみで処理するためファイルがサーバーに送られません
  • ✓ZIP 一括ダウンロード：全サイズの画像と HTML コードをまとめて取得できます

こんなときに便利

  • •Next.js や Nuxt.js の Image コンポーネントを使わず手動で srcset を書きたい
  • •静的サイトや WordPress で Lighthouse の「適切なサイズの画像」指摘を解消したい
  • •LCP（Largest Contentful Paint）を改善するためヒーロー画像を最適化したい
  • •スマホ・タブレット・PCで異なる解像度の画像を自動配信したい

仕組み・技術的背景

ブラウザ標準の Canvas API を使用して、元画像を各ブレイクポイント幅にリサイズします。アスペクト比は元画像から自動計算して維持されます。WebP 変換も canvas.toBlob('image/webp') で行うため外部ライブラリ不要・完全にオフラインで動作します。複数ファイルのまとめダウンロードには JSZip ライブラリを使用しています。

生成される srcset コードは W ディスクリプタ形式（例: image-640w.webp 640w）で、sizes 属性と組み合わせてブラウザが最適なサイズを自動選択します。loading="lazy" と decoding="async" もデフォルトで付与されるため、そのままパフォーマンス最適化済みのコードとして使用できます。