Skip to content
Web & Digital

รูปภาพที่ตอบสนอง

การใช้รูปภาพที่ให้บริการขนาดหรือรูปแบบที่แตกต่างกันโดยขึ้นอยู่กับอุปกรณ์ของผู้ดู ขนาดหน้าจอ และความเร็วการเชื่อมต่อ

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