レスポンシブ画像ジェネレーター
より高速なWebページのためのsrcset画像サイズを生成
レスポンシブレイアウト用の複数の画像幅を一括で作成。一般的なブレークポイントをエクスポートし、HTMLまたはNext.jsコードをプロジェクトに直接コピー＆ペースト。
ローカル処理 — アップロード不要レスポンシブ画像を生成
画像をアップロードして出力サイズを選択。スケール比率、ブレークポイント幅、またはカスタム寸法を追加できます。
ヒント：すべてのサイズで最も鮮明な結果を得るには、高解像度のソース画像から始めてください。
画像をアップロードまたはドロップ
各25MBまでのPNG、JPG、WebPファイルをサポート。ファイルはブラウザから出ません。
画像をドラッグ＆ドロップするかクリックして参照
PNG, JPG, WebP
元のサイズに対するさまざまなスケール係数で画像を生成
srcset用の一般的なビューポート幅 — 必要なサイズを選択
5 sizes selected
レスポンシブ画像により、ブラウザは各デバイスに適したサイズを選択でき、読み込み時間とCore Web Vitalsを改善します。このツールは単一のソース画像から一般的な幅のバリアントを生成します。
一度アップロードするだけで、320pxから1920pxのサイズをエクスポートし、すぐに使えるsrcsetマークアップを取得。すべてローカルで実行され、画像はプライベートに保たれます。
複数のブレークポイントを一度に
320、640、960、1280、1920pxの幅を単一のバッチエクスポートで生成。
コピー＆ペースト可能なコードスニペット
コードベースにすぐに挿入できるHTML srcsetまたはNext.js Imageマークアップを取得。
LCP最適化
適切なサイズの画像を提供し、Largest Contentful Paintスコアを向上。
推奨レスポンシブブレークポイント
モバイル、タブレット、デスクトップのビューポートをカバーする一般的な幅。
レスポンシブ画像の生成方法
数ステップでsrcset用の最適化された画像バリアントを作成。
ソース画像をアップロード
高解像度のJPG、PNG、またはWebPを選択。より大きなソースはより鮮明な縮小結果を提供。
レスポンシブサイズを追加
マルチサイズエクスポートを使用して320、640、960、1280、1920pxの幅を追加。
アスペクト比をロックしたままにして、すべてのサイズで元の比率を維持。
処理してダウンロード
リサイズをクリックしてすべてのバリアントを生成し、各ファイルを個別にまたは一括でダウンロード。
srcsetスニペットをコピー
生成されたHTMLまたはNext.jsスニペットを使用して、ページにレスポンシブ画像を追加。
レスポンシブ画像を使用するタイミング
ヒーローとバナー画像
デスクトップには1920pxを、スマートフォンには小さなファイルを提供し、モバイルユーザーの読み込み時間を大幅に短縮。
ブログと記事のサムネイル
複数の幅を生成し、どのデバイスの読者も高速で鮮明なプレビューを取得。
ECサイトの商品写真
適切なサイズのリスト画像を提供し、ページ速度とコンバージョン率を向上。
機能
バッチマルチサイズエクスポート
複数の幅を追加し、単一のソースからすべてを一度に生成。
アスペクト比を維持
高さは比例してスケーリングされ、画像が伸びたり潰れたりすることはありません。
すぐに使えるコード
HTML srcsetまたはフレームワーク固有のスニペットをプロジェクトに直接コピー。
プライベート＆ローカル
すべての処理はブラウザで行われます。画像がサーバーにアップロードされることはありません。
レスポンシブ画像FAQ
sizes属性はどのように書きますか？
sizes属性は、各ビューポートで画像がどの幅で表示されるかをブラウザに伝えます。例えば、`(max-width: 640px) 100vw, 50vw`は小さな画面ではビューポート全幅、大きな画面では半分を意味します。CSSレイアウトに合わせて調整してください。
いくつのブレークポイントを使用すべきですか？
モバイルからデスクトップまでをカバーする5〜7つの幅が良いデフォルトです。サイズが多いほど柔軟性が増しますが、ストレージも増加します。320、640、960、1280、1920から始めて、分析に基づいて調整してください。
2xレティナ画像はどうですか？
ブラウザはビューポート幅とピクセル密度の両方からsrcsetを選択します。最大のソースが1920pxの場合、レティナスマートフォンは十分なピクセルを得るために1280pxバージョンを選択する可能性があります。鮮明なレティナ表示が重要な場合は、より大きな幅を提供してください。
これはLargest Contentful Paint（LCP）にどのように役立ちますか？
LCPは最大の可視要素がどれだけ速く読み込まれるかを測定します。モバイルに小さな画像を提供することで、転送バイト数が減り、ヒーローがより速くレンダリングされ、Core Web Vitalsスコアが直接向上します。
Next.js Imageコンポーネントでこれらの画像を使用できますか？
はい。セルフホストの場合、ファイルを/publicに配置し、それに応じて画像ソースを設定します。より多くの制御が必要な場合、Next.js組み込みローダーもオンザフライでサイズを生成できますが、事前生成はサーバー負荷を軽減できます。
WebPまたはAVIFに変換する必要がありますか？
モダンなフォーマットはファイルサイズをさらに縮小します。別のステップで変換するか、このジェネレーターと一緒にsquooshツールを使用できます。フォーマットをサポートするブラウザはより小さなファイルを読み込み、他のブラウザはJPG/PNGにフォールバックします。