響應式圖片

響應式圖片 Srcset 產生

輸入原圖真實寬度,以及它在頁面上會顯示的寬度。工具在瀏覽器本機產生 srcset、sizes 和可複製的 img 標籤。

可用100/100
原圖像素2560
斷點5
候選寬度10
已封頂0

圖片與斷點

填寫 CSS 版面寬度,不要只填裝置寬度。2x 候選會限制在原圖寬度以內。

數值只留在此瀏覽器,不會上傳檔案。

sizes 槽位

預設槽位請把 max-width 留空。小視口條件排在前面。

max-width(px)槽位尺寸

產生結果

依列表寬度匯出檔案,再貼上這段標記。

寬度列表

每一列對應一個應匯出的檔案。寬度不會超過原圖。

寬度檔案描述符
320/images/hero-320.webp320w
480/images/hero-480.webp480w
640/images/hero-640.webp640w
768/images/hero-768.webp768w
960/images/hero-960.webp960w
1024/images/hero-1024.webp1024w
1280/images/hero-1280.webp1280w
1536/images/hero-1536.webp1536w
2048/images/hero-2048.webp2048w
2560/images/hero-2560.webp2560w