レスポンシブ画像ジェネレーター（srcsetとsizes）
画像、幅、ページ上での表示方法を選んでください。スマートフォンは小さいバージョン、大きな画面は大きいバージョンを自動で読み込みます。
使い方画面ごとに最適な写真
利用できる言語: 
レスポンシブ画像ジェネレーター（srcsetとsizes）: 用途
レスポンシブ画像を使うと、スマートフォンは小さい写真、大きな画面は大きい写真を読み込むため、鮮明さを保ったままサイトが速くなります。そのためには、同じ写真の複数サイズと、srcsetとsizesを含むコードが必要です。
画像をアップロードし、幅、形式、品質を選ぶと、すべてのバージョンを.zipでダウンロードできます。コードには、srcset、ページ上の位置に応じたsizes、レイアウトのずれを防ぐwidthとheight、メイン画像用のloading=lazyまたはfetchpriority=high（preload付き）、さらにオプションでJPGを予備にした<picture>が含まれます。
使い方
- 画像を選びます。
- 幅、形式、表示位置を指定します。
- .zipをダウンロードしてコードをコピーします。
使うタイミング
- ショップの商品写真。
- ランディングページのメイン画像。
- ギャラリーやブログ。
よくある質問
srcsetとsizesは何をしますか？
srcsetは同じ画像の各バージョンを幅とともに並べます（例：640w、1280w）。sizesは、画像が画面上で占める幅を伝えます。この2つがあれば、ブラウザーはその画面で十分に鮮明な最小のバージョンを選ぶので、スマートフォンが2000pxの写真を読み込むことはありません。
タグにwidthとheightが必要なのはなぜですか？
widthとheightがあれば、ブラウザーは画像の読み込み前にその場所を確保するため、写真が表示されたときにテキストが下にずれません。これは、GoogleのCore Web Vitalsの指標の1つであるCLSの改善につながります。
loading=lazyはいつ使いますか？
ページの下の方にある画像に使います。開いてすぐに見えるメイン画像には絶対にlazyを付けず、fetchpriority=highを付けてできるだけ早く読み込みます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。