การทำ CSS Sprite Images ช่วยลดจำนวน HTTP Requests ตัวอย่าง กรณีเรามีปุ่มที่เป็นรูปภาพอยู่ 3 อัน
เมื่อมีการเรียกหน้าเพจนั้น ก็จะมีการเรียก HTTP Requests เท่ากับ 3 ตามจำนวนของรูป เป็นต้น
บางกรณีการทำ CSS Sprite ยังช่วยลดขนาดของไฟล์ได้อีกด้วย ทำให้การโหลดหน้าเว็บเพจเร็วขึ้น
การทำ CSS Sprite Images เป็นเทคนิคการรวมไฟล์รูปภาพหลายๆ รูปเป็นรูปเดียว แล้วกำหนดการนำมาแสดง
โดยใช้เป็น Backgroud แล้วระบุตำแหน่งของแต่ละรูป เรียกใช้ผ่าน css class (div.class) หรือ css selector (div#selector)
ตัวอย่าง รูปที่รวมกันแล้ว
ผลลัพธิ์การทำ CSS Sprite Images
CSS code ตัวอย่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <style type="text/css">input.iSubmit,input.iSend,input.iClear{ padding:0;margin:0;border:0;border-collapse:collapse;cursor:pointer;}input.iSend{ width:65px;height:20px; background:url(demo/images/css_bt_sprite.png) -1px -1px;}input.iSubmit{ width:65px;height:20px; background:url(demo/images/css_bt_sprite.png) -1px -23px;}input.iClear{ width:65px;height:20px; background:url(demo/images/css_bt_sprite.png) -1px -45px;}</style> |
HTML code ตัวอย่าง
1 2 3 | <input name="button" type="submit" class="iSubmit" id="button" value=" " /><input name="button2" type="reset" class="iClear" id="button2" value=" " /><input name="button3" type="button" class="iSend" id="button3" value=" " /> |
