รูปตอบสนอง
ตัวสร้าง 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 |