srcsetジェネレーター
新着指定した幅からsrcsetとsizesを使ったレスポンシブな<img>マークアップを作成。
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
srcset・sizes・pictureマークアップを一カ所で生成
レスポンシブ画像マークアップを手書きするのは大変です——srcsetリスト、対応するsizes属性、WebPとAVIFフォールバックを含む<picture>ブロック——タイプミスが一つあるだけで、ブラウザは気づかれないまま誤ったファイルをダウンロードします。このsrcsetジェネレーターは完全なタグを自動で生成します：ファイル名と幅を入力するだけで、正確なディスクリプタ・遅延読み込み・非同期デコードを含む、コピー可能な完全なレスポンシブ<img>または<picture>要素が作成されます。
これはブラウザ上で完全動作する無料のレスポンシブ画像ジェネレーターです——サインアップ不要、アップロードなし、一度読み込めばオフラインでも使えます。
srcsetとsizesの解説
レスポンシブ画像は2つのパーツが連携して機能します。srcsetはファイルとその実際の幅のリストです——hero-640.jpg 640wは、そのファイルの幅が640ピクセルであることをブラウザに伝えます。sizesはレイアウト上での画像表示幅を記述します（例：(max-width: 600px) 100vw, 600px）。ブラウザはsizesを読み取り、デバイスピクセル比を乗算して最も近いsrcset候補をダウンロードします。
ディスクリプタをxに切り替えると、ピクセル密度マークアップが得られます——logo.png 1x, logo@2x.png 2x——Retinaディスプレイ上のロゴやアイコンなど、固定サイズ画像に最適です。この場合、wディスクリプタとsizesは過剰になります。
picture要素を使うべき場面
シンプルなsrcsetは解像度切り替えを処理します——同じ画像の異なるサイズ。より細かい制御が必要な場合は<picture>要素を使いましょう：フォールバック付きの次世代フォーマットの提供や、アートディレクション（モバイルとデスクトップで異なるトリミング）に対応できます。
<picture>モードでは、このツールは<source type="image/avif">、<source type="image/webp">、そしてJPEGまたはPNGの<img>フォールバックを出力します。これにより、モダンブラウザは最も軽いフォーマットを取得でき、古いブラウザでも画像が表示されます。
画像をローカルで各幅にリサイズ
マークアップは作業の半分に過ぎません——実際にリサイズされたファイルも必要です。ツールに画像をドロップすると、HTMLキャンバス上で各幅にリサイズされ、生成されたマークアップと完全に一致するファイル名（hero-320.jpg、hero-640.jpgなど）でセット全体をダウンロードできます。
アップロードもビルドパイプラインも不要です。元のサイズを超えて拡大するとぼやけが生じるため、ツールはソース画像より大きい幅にフラグを立て、画像セットの精度を保ちます。
Squoosh・Responsivebreakpoints.com・Cloudflare Image Resizeとの比較
Squoosh（Google製）は単一画像の圧縮・変換に優れており、WebPやAVIFの適切な品質設定を選ぶのに最適です。ただし、srcsetマークアップは生成せず、HTMLに貼り付けられる完全なレスポンシブ画像タグも作成しません。圧縮ツールであり、マークアップジェネレーターではありません。
CloudinaryのResponsivebreakpoints.comは、最適なブレークポイントを計算してリサイズ済み画像を生成するために画像をCloudinaryサーバーにアップロードします。結果は良好ですが、ファイルがマシンを離れ、Cloudinaryの利用規約が適用されます。Cloudflare Image ResizeとImgixはCDNサービスで、配信時に画像を処理しますが、アカウント設定・API統合・継続的な課金が必要です。UtiloKitのsrcsetジェネレーターは異なる立場にあります：クライアントサイドでローカルに完全なHTMLマークアップを生成し画像をリサイズします——アップロードなし、アカウントなし、費用なし、ファイルサイズ制限なし。
幅・ブレークポイント・Core Web Vitals
信頼性の高い幅セットは320・640・960・1280・1920で、各ステップでおよそ2倍になり、小型スマートフォンから大型Retinaディスプレイまでカバーします；フルブリードヒーローには2560を追加してください。適切なサイズの画像を配信することはCore Web Vitalsへの最大の貢献の一つです：バイト数が少ないほどLargest Contentful Paint（LCP）が速くなり、widthとheight属性を追加することでユーザーとランキングの両方に悪影響を与えるレイアウトシフト（CLS）を防げます。
画面外の画像にはloading="lazy"を追加してスクロール時のみ読み込まれるようにし、ヒーロー画像にはfetchpriority="high"を追加して最初に読み込まれるようにしましょう——どちらもここでワンクリックで切り替えできます。
プライベート・即時・オフライン対応——あらゆるデバイスで動作
インストールも、アカウント作成も必要ありません。タイプするたびにブラウザ内でタグが組み立てられ、リサイズする画像はcanvas APIでローカル処理されます——何もアップロードされません。ページを一度読み込めばオフラインでも動作するため、飛行機内・スマートフォン上・Wi-Fiなしの場所でも、どこでもレスポンシブなimg srcsetと<picture>マークアップを作成できます。
Frequently asked questions
srcsetとは何ですか？何をするものですか？
srcset属性を使うと、同じ画像の複数のサイズ違いバージョンをリストアップでき、ブラウザがデバイスに最適なものをダウンロードできます。すべての訪問者に大きなファイルを送る代わりに、srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w"と書けば、ブラウザは鮮明に見える最小の画像を選択します——スマートフォンの通信量を節約しながら、Retinaノートパソコンでは鮮明な画像を提供します。JavaScriptは不要です。
srcsetはいつ使うべきですか？
異なる画面で異なるサイズで表示される画像——ヒーローバナー、記事画像、商品写真、流動的な要素すべて——にはsrcsetを使いましょう。解像度の切り替えに適切なツールです：同じ画像、ただし大きいか小さいかの違いです。特定のブレークポイントでトリミングや画像自体を変える必要がある場合（アートディレクション）は、picture要素を使いましょう。小さな固定サイズのアイコンやロゴにsrcsetは不要です。
srcsetとsizesはどのように組み合わせて使いますか？
srcsetはファイルとその実際のピクセル幅を列挙します（640wはファイル幅が640ピクセルを意味する）；sizesはレイアウト計算前の画像表示幅をブラウザに伝えます。組み合わせると：srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px"。ブラウザはsizesを読み取り——'600px以下なら全ビューポート幅、そうでなければ600px'——必要なピクセル数を計算し（表示幅×デバイスピクセル比）、最も近いsrcset候補を選択します。
wディスクリプタとxディスクリプタの違いは何ですか？
wディスクリプタは各ファイルの実際のピクセル幅を記述します——image-640.jpg 640w——sizesと組み合わせて使用する必要があります；ブラウザがどんな画面に対しても計算を行います。xディスクリプタはピクセル密度のみを記述します——image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x——Retinaスクリーンで鮮明に表示するだけで良いロゴなどの固定サイズ画像に適しています。流動的なレイアウト主導の画像にはw、固定サイズ画像にはxを使いましょう。
フォールバック付きでWebPとAVIFを配信するには？
pictureを使って各モダンフォーマット用のsourceと通常のimgをフォールバックとして指定します：source type="image/avif" srcset="…"、次にsource type="image/webp" srcset="…"、次にimg src="hero.jpg" …。ブラウザは最初にサポートされているフォーマットを使用し、どれもサポートしていない場合はJPEGまたはPNGのimgにフォールバックします——古いブラウザでも画像が表示されます。
どの画像幅を生成すべきですか？
汎用的なセットとして、320・640・960・1280・1920が適切です——小型スマートフォンから大型Retinaスクリーンまでカバーし、各ステップでおよそ2倍になります。フルブリードのヒーロー画像には2560を追加しましょう；最大幅が800px程度のコンテンツには約1600（800×2でRetina対応）以上は不要です。ステップが無意味になるほど多く生成しないようにしましょう；4〜6の幅で通常は十分です。
srcsetが機能しないのはなぜですか？
よくある原因：(1) 最大ファイルが不要とブラウザが正しく判断した画面でテストしている——ウィンドウをリサイズするか低速接続に制限して切り替えを確認する；(2) sizesが欠如しているか誤りがあり、ブラウザが100vwと仮定して大きなファイルをダウンロードしている；(3) 指定したパスにファイルが実際に存在しない（ネットワークタブで404を確認）；(4) キャッシュが既にダウンロード済みのサイズを提供している。srcsetはヒントであり、ブラウザはキャッシュ済みの大きな画像を選択することが許可されています——これは意図的な設計です。
Related tools
すべてのツールを見る
新着 JSONエスケープ / アンエスケープ
生のテキストをJSONで安全な文字列にエスケープし、元に戻す。
新着 HTTPステータスコード一覧
HTTPステータスコードを平易な説明付きで検索できるリファレンス。
新着 正規表現チートシート
正規表現のトークンとフラグを検索できるリファレンス。
新着 ASCIIテーブル
文字コードを10進・16進・8進・2進で検索できる一覧。
新着 PX → REM変換ツール
ルートフォントサイズを基準に、px・rem・em・ptを相互変換。
新着 スプレッドシート列変換ツール
スプレッドシートの列番号を列名(1 → A)に、またその逆に変換。