srcset ジェネレーター
srcset と sizes を備えたレスポンシブな img タグを構築します。
出力
ベース画像 URL と対象の幅を入力すると、srcset と sizes 属性を備えたレスポンシブな <img> タグが生成されます。
使い方
- ベース画像 URL を入力します。
- 希望する幅をカンマ区切りで列挙します。
- 生成されたレスポンシブな img タグをコピーします。
よくある質問
- srcset の URL はどのように命名されますか？
- 各幅は、ファイル拡張子の前に -<width>w のサフィックスを付けます。例: photo-640w.jpg。
- sizes 属性は何のためのものですか？
- 画像が占めるスペースをブラウザに伝え、適切なソースを選べるようにします。