響應式圖片
響應式圖片 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 |