Skip to content


เร่งสปีดเว็บด้วย CSS Sprite

การลดจำนวนไฟล์ที่เว็บบราวเซอร์จะต้องโหลด เป็นวิธีหนึ่งที่จะทำให้การโหลดเว็บทำได้รวดเร็วยิ่งขึ้น วิธีหนึ่งที่ผมจะพูดถึงในครั้งนี้ เราเรียกว่า CSS Sprite

CSS Sprite สามารถช่วยให้จำนวนไฟล์ลดลงได้ โดยการรวมไฟล์ภาพเข้าด้วยกัน และนำไปใช้โดยการกำหนดผ่านค่า background-position ใน css นั่นเอง และการรวมไฟล์ภาพเข้าด้วยกันนี่เอง จากที่เราเคยจะต้องโหลดไฟล์หลาย ๆ ไฟล์ ก็จะสามารถลดลงมาใช้เพียง 1 หรือ 2 ไฟล์ บางกรณีการรวมไฟล์เข้าด้วยกันเป็นไฟล์เดียว ยังทำให้ขนาดไฟล์โดยรวมเล็กลงอีกด้วย

การใช้ CSS Sprite ส่วนใหญ่แล้ว จะพบเห็นได้บ่อยในการทำกรอบของข้อความ

การทำกรอบของข้อความ โดยปกติแล้ว การทำกรอบเราจำเป็นที่จะต้องใช้กรอบถึง 8 ไฟล์ด้วยกันคือ แต่ในที่นี้ เราสามารถ ลดเหลือ 2 ภาพได้ คือ และ

เราลองมาดูตัวอย่างกันใน LIVE DEMO ได้เลยครับ

Share

Posted in CSS, Performance Tuning.

Tagged with , , .


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. chain says

    ขอบคุณครับ ทริกนี้เด็ดไปเลยชอบๆ



Some HTML is OK

or, reply to this post via trackback.

*