レスポンシブ画像
レスポンシブ画像 Srcset ビルダー
原画の実幅と、ページ上で表示される幅を入力します。このブラウザ内で srcset、sizes、コピー用 img タグを生成します。
準備完了100/100
画像とブレークポイント
端末幅だけでなく CSS のレイアウト幅を使います。2x 候補は原画幅で打ち切ります。
値はこのブラウザに留まり、ファイルはアップロードしません。
sizes 枠
デフォルト枠は max-width を空にします。小さいビューポートを先に並べます。
| max-width（px） | 枠サイズ | |
|---|---|---|
生成結果
一覧の幅でファイルを書き出し、このマークアップを貼ります。
幅の一覧
各行が書き出すべきファイルです。幅は原画を超えません。
| 幅 | ファイル | 記述子 |
|---|---|---|
| 320 | /images/hero-320.webp | 320w |
| 480 | /images/hero-480.webp | 480w |
| 640 | /images/hero-640.webp | 640w |
| 768 | /images/hero-768.webp | 768w |
| 960 | /images/hero-960.webp | 960w |
| 1024 | /images/hero-1024.webp | 1024w |
| 1280 | /images/hero-1280.webp | 1280w |
| 1536 | /images/hero-1536.webp | 1536w |
| 2048 | /images/hero-2048.webp | 2048w |
| 2560 | /images/hero-2560.webp | 2560w |