Ảnh đáp ứng
Trình tạo Srcset ảnh đáp ứng
Nhập chiều rộng thật của ảnh gốc và các chiều rộng sẽ hiển thị trên trang. Công cụ tạo srcset, sizes và thẻ img ngay trong trình duyệt.
Sẵn sàng100/100
Ảnh và breakpoint
Dùng chiều rộng bố cục CSS, không chỉ chiều rộng thiết bị. Ứng viên 2x bị giới hạn bởi ảnh gốc.
Giá trị chỉ ở trình duyệt này, không tải tệp lên.
Ô sizes
Ô mặc định để trống max-width. Sắp viewport nhỏ trước.
| max-width (px) | Kích thước ô | |
|---|---|---|
Markup đã tạo
Xuất tệp theo các chiều rộng trong danh sách rồi dán markup này.
Danh sách chiều rộng
Mỗi hàng là một tệp cần xuất. Chiều rộng không vượt ảnh gốc.
| Chiều rộng | Tệp | Mô tả |
|---|---|---|
| 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 |