CSS Sprite เทคนิคทำให้โหลดเว็บเร็วขึ้น

CSS Sprite เทคนิครวมรูปภาพหลายๆรูป ในหน้าเว็บให้เป็นไฟล์รูปภาพเพียงไฟล์เดียว

เทคนิคนี้ช่วยลดเวลาการติดต่อระหว่าง browser กับ web server ได้ เช่น ถ้าหน้าเว็บนั้นๆ มีไฟล์ภาพจำนวน 10 ภาพ แปลว่าต้องมีการเรียกไปที่เซิร์ฟเวอร์ถึง 10 ครั้ง แต่เราสามารถใช้เทคนิค css sprite ช่วยลดเวลานี้ โดยการรวมภาพเป็นไฟล์เดียว แต่การรวมภาพนี้จะรวมแต่วางภาพย่อยๆตามลำดับ ในภาพๆเดียว แล้วเวลาเรียกใช้ภาพมาแสดง
ก็อ้างอิง pixel ของภาพ

การทำ CSS Sprite สามารถทำได้หลายวิธี อาจจะใช้ photoshop ทำภาพ Sprite ก็ได้แต่อาจจะยุ่งยากไป
แนะนำให้ใช้บริการเว็บที่ทำภาพ Sprite จะง่ายกว่า แค่ upload zip ภาพขึ้นไปแล้วจะได้ภาพ css sprite
และ css ด้วย เว็บนี้เลยครับ http://spritegen.website-performance.org/

แล้วเวลาเขียน html นำภาพมาแสดงในหน้าเว็บ ต้องใช้ css มาแสดงภาพเป็น background
จากตัวอย่าง css ด้านล่างนี้

css code
.catgame{background-image:url(./images/categame.png);background-repeat:no-repeat;background-position:left center;}
.fd-english{background-position:0 0;width:50px;height:50px;}
.fd-advise{background-position:0 -100px;width:50px;height:50px;}
.fd-adventure{background-position:0 -200px;width:50px;height:50px;}
.fd-card{background-position:0 -300px;width:50px;height:50px;}
.fd-action{background-position:0 -400px;width:50px;height:50px;}

html code
p class="catgame fd-english"> text ........
p class="catgame fd-advise">text ........

ตัวอย่าง
http://www.rimnam.com/games.html

ภาพ icon เกมส์แต่ละหมวดหมู่ทั้งหมด เป็นไฟล์ภาพเดียวกัน