画像の srcset と sizes を生成します

フロントエンド開発者が複数の画面で画像を鮮明に保ちつつ、閲覧者へ不要に大きなファイルを送らず実装したい場面に向きます。

画像の srcset と sizes を生成します。入力内容を外部へ送らず、確認やコピー、調整がしやすい実用的な結果をブラウザー内だけで作成できます。

使い方

画像ファイル名を入力します。例：photo.jpg。
最大表示幅をピクセル単位で入力します。
ジェネレーターを実行して、srcset属性とsizes属性を生成します。
生成されたマークアップを画像要素にコピーします。

使用例

フロントエンドのインテグレーターが、スマートフォンと大きな画面の両方でシャープに見える必要があるバナーを準備しています。photo.jpgと最大幅1200ピクセルを入力し、属性を生成します。コードはテンプレートに貼り付けられ、ブラウザが選択できるようにします。また、出力で提案された幅の画像ファイルも準備します。

入力

photo.jpg
1200

制限と形式

このツールは1つの画像用のマークアップを作成するだけで、画像ファイルのサイズは変更しません。
画像のバリエーションは、出力で提案された幅で存在している必要があります。
最終的な選択は、ブラウザや画面密度にも依存します。
マークアップを公開する前に、ファイルパスと名前を確認してください。
生成されたコードは、複数のデバイスでの視覚的な確認の代わりにはなりません。

処理の場所

入力した詳細は、レスポンシブマークアップを構築するためにブラウザ内で処理されます。画像ファイルはアップロードされず、情報も送信されません。結果が表示されたらすぐにコピーできます。

よくある質問

このツールは画像のサイズを変更しますか？

いいえ、画像ファイル自体は変更しません。入力した名前と幅からsrcset属性とsizes属性を生成するだけです。異なる画像バージョンは、別のサイズ変更ツールで準備してください。

なぜ複数の幅がリストされるのですか？

ブラウザは、画面とピクセル密度に最も合うバージョンを選びます。複数の幅を用意することで、小さなデバイスに大きなファイルを送るのを避けられます。正確な値は、入力した最大幅に従います。

CSSの背景画像にこれを使えますか？

srcset属性とsizes属性は画像要素用であり、CSSの背景用ではありません。背景にはメディアクエリや適応型CSSの手法を使用してください。画像の表示方法に合った方法を選んでください。