รูปภาพที่ตอบสนองช่วยให้เบราว์เซอร์เลือก รูปภาพที่ดีที่สุดสำหรับอุปกรณ์ — ประหยัดแบนด์วิดท์บนโทรศัพท์และให้บริการรูปภาพที่คมชัดบนหน้าจอ DPI สูง
srcset + sizes — รูปภาพเดียวกัน ความละเอียดต่างกัน
html
รูปภาพที่ตอบสนองช่วยให้เบราว์เซอร์เลือก รูปภาพที่ดีที่สุดสำหรับอุปกรณ์ — ประหยัดแบนด์วิดท์บนโทรศัพท์และให้บริการรูปภาพที่คมชัดบนหน้าจอ DPI สูง
srcset แสดงรายการภาพผู้สมัครพร้อมกับ ความกว้างของภายใน (400w = ความกว้าง 400px)sizes บอกเบราว์เซอร์ว่ารูปภาพจะ แสดง เท่าไหร่ที่จุดเบรกต่างๆ (ที่นี่: ความกว้างเต็ม viewport ด้านล่าง 600px ไม่เช่นนั้นครึ่งหนึ่ง)sizes + ความหนาแน่นของพิกเซลของอุปกรณ์เพื่อเลือกรูปภาพที่เล็กที่สุดที่ยังคงมีลักษณะคมชัด — ก่อน ที่จะดาวน์โหลดสิ่งใดโทรศัพท์อาจเลือก small.jpg แล็ปท็อป Retina ที่แสดงที่ความกว้าง 50% อาจเลือก large.jpg
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
เบราว์เซอร์ใช้ อันแรก <source> ที่รองรับ/ตรงกับ ใช้ <picture> เมื่อคุณต้องการ รูปแบบ ต่างกัน (ให้บริการ AVIF/WebP พร้อม JPEG fallback) หรือ การตัด ต่างกันต่อขนาดหน้าจอ (ทิศทางศิลป์) — สิ่งต่างๆ ที่ srcset เพียงอย่างเดียวไม่สามารถทำได้
srcset + sizes<picture>การให้บริการรูปภาพที่มีขนาดเหมาะสมและรูปแบบสมัยใหม่เป็นหนึ่งในชัยชนะด้านประสิทธิภาพที่ใหญ่ที่สุดสำหรับเว็บ — มันลดการใช้ข้อมูลบนมือถือลงอย่างมากและปรับปรุง Largest Contentful Paint
เครื่องมือดั้งเดิมเหล่านี้ช่วยให้เบราว์เซอร์เลือกที่ดีที่สุดโดยอัตโนมัติพร้อมกับ fallback ที่ใจดีสำหรับเบราว์เซอร์เก่า