ข้อได้เปรียบหลักของการใช้ภาพสไปรท์คือการลดจำนวนคำขอ http ที่ทำให้เวลาในการโหลดเว็บไซต์ของเราเร็วขึ้น ภาพยังโหลดเร็วขึ้นทำให้เปลี่ยนจากภาพหนึ่งไปอีกภาพหนึ่งในบางเหตุการณ์ได้ราบรื่นยิ่งขึ้น Image Sprite คือคอลเลกชั่นของรูปภาพที่วางเป็นรูปภาพเดียว
ต่อไปนี้เป็นรหัสที่แสดงข้อได้เปรียบของเทพดารูปภาพโดยใช้ CSS -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html> ผลลัพธ์
รหัสข้างต้นจะสร้างผลลัพธ์ต่อไปนี้ -
ด้านบน เราได้ตั้งค่าภาพสไปรท์โดยใช้สิ่งต่อไปนี้ -
.twitter,.facebook {
background: url(sprites_64.png) no-repeat;
display:inline-block;
width: 64px;
height: 64px;
margin:10px 4px;
}
.facebook {
background-position: 0 -148px;
} 