เว็บไซต์ที่มีรูปเยอะอาจจะใช้เวลาโหลดนาน เนื่องจากมีการส่ง HTTP requests ไปที่ web server หลายครั้ง เทคนิก CSS Sprite จะเป็นการรวมรูปหลายรูปเป็นรูปใหญ่ๆ รูปเดียว ทำให้ลดจำนวน HTTP requests ลงไปได้มาก เราสามารถทำเทคนิก CSS Sprite มาประยุกต์ใช้ได้หลากหลายเช่นการรวมรูป icon ต่างๆ เป็นรูปเดียวเป็นต้น
การแสดงรูปเล็กจากรูปใหญ่ก็ไม่ใช่เรื่องยากเพียงแค่เขียน css ในส่วนของ background-position ควบคุมการแสดงผล จริงๆ จะเขียนเองก็ไม่ยาก แต่มีเว็บนึงช่วยเขียนโค้ดให้เราได้ ลองทำตามแอดนะครับ
1.ให้เตรียมรูป ก่อนครับ สมมตุเรามีไอคอน 4 รูปตามนี้
2. เข้าไปที่เว็บไซต์ https://css.spritegen.com/ (หากต้องการให้ sprites แสดงผลแบบ responsive ให้คลิกไปที่ Responsive CSS Sprite Generator) จากนั้น choose files เลือก output type สุดท้ายให้กด Create Sprite
3. ระบบจะรวมรูปเป็นไฟล์ใหญ่ให้เลยครับ สะดวกมากๆ ให้คลิกขวาเพื่อ save รูป จากนั้นให้ copy โค้ด style sheets และ html ไปใช้ได้เลย
/* Generated by http://css.spritegen.com CSS Sprite Generator */
.recipe-dessert-cake-icon, .recipe-pizza-icon, .recipe-wine-icon, .recipe-wrap-icon
{ display: inline-block; background: url('png.png') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.recipe-dessert-cake-icon { background-position: -0px -0px; width: 128px; height: 128px; }
.recipe-pizza-icon { background-position: -128px -0px; width: 128px; height: 128px; }
.recipe-wine-icon { background-position: -0px -128px; width: 128px; height: 128px; }
.recipe-wrap-icon { background-position: -128px -128px; width: 128px; height: 128px; }
<div class="recipe-dessert-cake-icon"></div>
<div class="recipe-pizza-icon"></div>
<div class="recipe-wine-icon"></div>
<div class="recipe-wrap-icon"></div>จะสังเกตว่าโค้ด html ใช้ div ที่กำหนดขนาดในการแสดงผล ส่วน background ก็ใช้ภาพพื้นหลังรูปใหญ่ที่ download แค่ครั้งเดียว แต่ควบคุมการแสดงผลด้วย background-position ทำให้สามารถแสดงรูปเล็กต่างๆ ตามที่ต้องการได้
สรุปได้ว่า CSS Sprites เป็นเทคนิกที่น่าใช้มากๆ สามารถเพิ่มความเร็วให้กับเว็บไซต์ได้ดีทีเดียวโดยเฉพาะเว็บที่มีรูปเยอะๆ
ขยายความจากบทความ : เพิ่มความเร็วให้กับเว็บด้วยเทคนิก CSS Image Sprites
