การลดจำนวนไฟล์ที่เว็บบราวเซอร์จะต้องโหลด เป็นวิธีหนึ่งที่จะทำให้การโหลดเว็บทำได้รวดเร็วยิ่งขึ้น วิธีหนึ่งที่ผมจะพูดถึงในครั้งนี้ เราเรียกว่า CSS Sprite
CSS Sprite สามารถช่วยให้จำนวนไฟล์ลดลงได้ โดยการรวมไฟล์ภาพเข้าด้วยกัน และนำไปใช้โดยการกำหนดผ่านค่า background-position ใน css นั่นเอง และการรวมไฟล์ภาพเข้าด้วยกันนี่เอง จากที่เราเคยจะต้องโหลดไฟล์หลาย ๆ ไฟล์ ก็จะสามารถลดลงมาใช้เพียง 1 หรือ 2 ไฟล์ บางกรณีการรวมไฟล์เข้าด้วยกันเป็นไฟล์เดียว ยังทำให้ขนาดไฟล์โดยรวมเล็กลงอีกด้วย
การใช้ CSS Sprite ส่วนใหญ่แล้ว จะพบเห็นได้บ่อยในการทำกรอบของข้อความ
การทำกรอบของข้อความ โดยปกติแล้ว การทำกรอบเราจำเป็นที่จะต้องใช้กรอบถึง 8 ไฟล์ด้วยกันคือ
แต่ในที่นี้ เราสามารถ ลดเหลือ 2 ภาพได้ คือ
และ ![]()
เราลองมาดูตัวอย่างกันใน LIVE DEMO ได้เลยครับ
ขอบคุณครับ ทริกนี้เด็ดไปเลยชอบๆ