BLOG » Coding

พื้นที่สำหรับเขียนกันลืม บ่น แชร์ ฯลฯ เรื่อยเปื่อย บ้างบางเรื่องก็อาจจะแลดูมีสาระ บ้างบางเรื่องก็อาจจะแลดูไร้สาระไปเลย

CSS Sprite เทคนิคลดเวลาการโหลดหน้าเว็บ

CSS Sprite คือเทคนิคการเขียน CSS อย่างหนึ่ง โดยการรวมไฟล์ภาพหลายๆไฟล์เข้าด้วยกัน จากนั้นใช้วิธีกำหนดผ่านค่า background-position ใน CSS เพื่อเรียกใช้งาน ซึ่งวิธีนี้จะช่วยลด http header ที่เกิดขึ้นในการ request file เช่น หากว่าหน้าเว็บที่เราโหลดนั้นมีไฟล์รูปภาพทั้งหมด 10 ไฟล์ ทำให้จำเป็นต้องเรียกไปที่เซิร์ฟเวอร์ถึง 10 ครั้ง ซึ่งหากใช้เทคนทิค CSS Sprite โดยรวมภาพเป็นไฟล์เดียว จะทำให้ต้องโหลดเพียงแค่ครั้งเดียวเท่านั้น

การทำ CSS Sprite นั้นสามารถทำได้หลายวิธีด้วยกัน ในที่นี้ผมจะแนะนำวิธีที่ผมคิดว่าง่ายที่สุดละกัน

ก่อนอื่นก็ให้เราเตรียมรูปทั้งหมดที่ต้องการจะทำ CSS Sprite ไว้ แนะนำให้ตั้งชื่อไฟล์ให้สื่อความหมาย เพื่อช่วยให้ง่ายต่อการทำไปใช้งานหลัง generate แล้ว จากนั้นก็ทำการ zip ไฟล์ทั้งหมด สุดท้ายก็แค่อัพไฟล์ zip ไปยังเว็บนี้เลยครับ http://spritegen.website-performance.org/ ปรับค่าต่างๆตามความเหมาะสม จากนั้นก็คลิก Create Sprite Image & CSS เราก็จะได้ ไฟล์ภาพที่รวมภาพทั้งหมดไว้เรียบร้อยแล้วและ Code CSS สำหรับการนำมาใช้งาน

ตัวอย่าง Code CSS

.category {
   background: url(nomi_cate.png.png) no-repeat top left;
}

.sprite-bus_color{ background-position: 0 0; width: 49px; height: 52px; }
.sprite-bus_gray{ background-position: 0 -53px; width: 49px; height: 52px; }
.sprite-creat_color{ background-position: 0 -106px; width: 26px; height: 52px; }
.sprite-creat_gray{ background-position: 0 -159px; width: 26px; height: 52px; }
.sprite-edu_color{ background-position: 0 -212px; width: 26px; height: 52px; }
.sprite-edu_gray{ background-position: 0 -265px; width: 26px; height: 52px; }
.sprite-enter_color{ background-position: 0 -318px; width: 46px; height: 52px; }
.sprite-enter_gray{ background-position: 0 -371px; width: 46px; height: 52px; }
.sprite-heart_color{ background-position: 0 -424px; width: 45px; height: 52px; }
.sprite-heart_gray{ background-position: 0 -477px; width: 45px; height: 52px; }
.sprite-home_color{ background-position: 0 -530px; width: 46px; height: 52px; }
.sprite-home_gray{ background-position: 0 -583px; width: 46px; height: 52px; }
.sprite-it_color{ background-position: 0 -636px; width: 47px; height: 52px; }
.sprite-it_gray{ background-position: 0 -689px; width: 47px; height: 52px; }
.sprite-photo_color{ background-position: 0 -742px; width: 47px; height: 52px; }
.sprite-photo_gray{ background-position: 0 -795px; width: 47px; height: 52px; }
.sprite-report_color{ background-position: 0 -848px; width: 46px; height: 52px; }
.sprite-report_gray{ background-position: 0 -901px; width: 46px; height: 52px; }
.sprite-sci_color{ background-position: 0 -954px; width: 47px; height: 52px; }
.sprite-sci_gray{ background-position: 0 -1007px; width: 47px; height: 52px; }
.sprite-shop_color{ background-position: 0 -1060px; width: 35px; height: 52px; }
.sprite-shop_gray{ background-position: 0 -1113px; width: 35px; height: 52px; }

วิธีการนำไปใช้ ใน HTML Code โดยใช้ Class

ตัวอย่างการใช้ CSS Sprite

http://www.thailandblogawards.com/categories

เป็นภาพ avatar ของแต่ละ Categoey โดยรวมเป็นภาพๆเดียว ซึ่งได้ทำการอ้างอิง pixel จากไฟล์นี้

http://www.thailandblogawards.com/public/images/nomi_cate.png

จะเห็นได้ว่าไม่ยากอย่างที่คิด ลองเล่นกันดูครับ!

ตัวอย่างการใช้ CSS Sprite ของเว็บใหญ่ๆ

Google