เมื่อรวมหลายรูปภาพเป็นไฟล์เดียว เรียกว่า Image Sprite วิธีนี้ช่วยลดจำนวนคำขอไปยังเซิร์ฟเวอร์ (HTTP Requests) และทำให้โหลดรูปภาพได้เร็วขึ้น
สมมติว่าคุณต้องใช้รูปภาพ 4 ไฟล์ในหน้าเว็บ แทนที่จะโหลด 4 ไฟล์แยกกัน ให้นำรูปทั้ง 4 มารวมในไฟล์เดียว แล้วใช้ CSS background-position เพื่อแสดงส่วนที่ต้องการ วิธีนี้ช่วยประหยัด bandwidth และเพิ่มประสิทธิภาพการโหลดหน้าเว็บอย่างมาก
ประโยชน์หลัก:
- ลด HTTP Requests ลงมาก
- เพิ่มความเร็วในการโหลดหน้าเว็บ
- ลดการใช้ bandwidth
- จัดการรูปไอคอนหรือปุ่มได้ง่ายขึ้น
ตัวอย่างการใช้งาน: ใช้กับไอคอนโซเชียลมีเดีย ปุ่ม UI หรือรูปภาพเล็กๆ ที่ใช้บ่อย
