การทำ CSS Image Sprite เพื่อทำให้ load หน้า web เร็วขึ้น

การทำ CSS Image Sprite
วันนี้มาพูดถึงเรื่องของ CSS กันบ้างซึ่งเป็นเทคนิคเล็กๆ น้อยๆที่น่าสนใจที่เดียวนั่นคือการทำ CSS Image Sprite เนื่องจากปัญหาในการทำ web ในปัจจุบันคือรูปเยอะมากดังนั้นการ load รูปมาทีละรูปทำให้ต้อง request กลับไปยัง server หลายครั้ง เพราะทุกครั้งที่เจอ tag <img alt=”” /> หรือ url(…) ใน Style Sheet browser จะทำการส่ง request กลับไปยัง server เพื่อขอ content ซึ่งในกรณีนี้คือ image(ยกเว้นว่า load รูปเดิม) ดังนั้นเลยมีคนคิดขึ้นมาว่าทำไมไม่ load รูปภาพมาซะทีเดียวเลย แล้วค่อยเอา CSS มาระบุ พื้นที่ในการแสดงผล หลักการของการทำ Image Sprite ก็มีแค่กำหนด position ในการแสดงผลเท่านั้น
โดยในส่วนแรกจะเป็นการกำหนดขนาดของรูปที่ต้องการแสดง ดังนั้นตอนแสดงผลจะแสดงแค่ 44×46 pixel เท่านั้น ส่วนอื่นจะไม่แสดง

1
2
3
4
5
img
{
width : 46px;
height : 44px;
}

ต่อมาก็เป็นการเลื่อนตำแหน่งของการแสดงผลโดยกำหนดค่า x กับ y ที่สำคัญต้องระวังว่าค่าที่ใส่จะเป็นลบ เพื่อให้รูปนั้นเลื่อนไปทางขวา และอย่าลืมว่าใน CSS คั่น x กับ y ด้วย space

1
2
3
4
5
6
7
8
9
10
11
12
13
14
img
{
width : 46px;
height : 44px;
}
img.home{
background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}
img.prev{
background:url(http://www.w3schools.com/css/img_navsprites.gif) -47px 0;
}
img.next{
background:url(http://www.w3schools.com/css/img_navsprites.gif) -90px 0;
}

class prev จะ load รูปเดิมขึ้นมาแสดงผล แต่เลื่อนไปทางขวา 47 pixel class next ก็จะทำแบบนี้เช่นเดียวกัน

ถ้าใช้วิธีการนี้จะลดปัญหาของการ load image ไปได้เยอะ และที่สำคัญเป็นการบังคับให้ให้ css load รูปภาพแทนการใช้ tag <img alt=”” />