响应式图片
响应式图片 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 |