รูปภาพแบบตอบสนอง

รูปภาพแบบตอบสนองช่วยป้องกันไม่ให้ผู้ใช้มือถือดาวน์โหลดรูปภาพขนาดเดสก์ท็อปที่สิ้นเปลืองแบนด์วิดท์และทำให้หน้าเว็บโหลดช้า HTML มีแอตทริบิวต์ srcset สำหรับสลับความละเอียด และองค์ประกอบ picture สำหรับการกำกับภาพ เพื่อส่งการครอปหรือรูปแบบที่ต่างกันให้กับอุปกรณ์ต่างกัน เฟรมเวิร์กสมัยใหม่ เช่น Next.js สามารถสร้างรูปภาพแบบตอบสนองโดยอัตโนมัติ สร้างหลายขนาดจากไฟล์ต้นฉบับเดียว และส่งเวอร์ชันที่เหมาะที่สุดตาม viewport รูปแบบ WebP และ AVIF พร้อม fallback เป็น JPEG ช่วยลดแบนด์วิดท์ได้อีก รูปภาพแบบตอบสนองมีความสำคัญต่อ Core Web Vitals เพราะรูปภาพที่ใหญ่เกินไปจะทำให้ Largest Contentful Paint ช้าลง ซึ่งเป็นเมตริกการโหลดหลักที่ส่งผลต่อประสบการณ์ผู้ใช้และอันดับในเครื่องมือค้นหา