ตัวช่วยสร้าง CSS Sprite image ง่ายมาก รูป และ CSS

ตัวช่วยสร้าง CSS Sprite image ง่ายมาก รูป และ CSS

แต่ว่าก่อนจะเริ่มเรื่อง ขอกล่าวถึง css sprite image ก่อนสักเล็กน้อย เพราะว่าหลายคนอาจจะยังไม่รู้จัก css sprite image ว่ามันคืออะไร

css sprite image มันคือเทคนิคการเพิ่มความเร็ว การโหลดเว็บ ซึ่งใช้หลักการที่อ้างอิงก็คือ การลดจำนวน object ที่ต้อง download ลง เพื่อลดการเกิดจากของ http header ในการ request file (อ่านรายละเอียดการเพิ่มความเร็วการเปิดเว็บ) โดยเป็นการรวมไฟล์รูปหลายๆอัน เข้ามาเป็นรูปเดียว เพื่อจะได้โหลดครั้งเดียว แต่ว่าการรวมรูปเข้ามาเป็นอันเดียว อาจจะงงต่อว่า แล้วจะเอารูปมาใช้ได้อย่างไร ส่วนนี้จะเป็นการใช้เทคนิคของ CSS เข้ามาช่วยครับ ซึ่งทั้งหมดนี้รวมกันแล้วเรียกว่า css sprite image นั่นเอง

สำหรับ เทคนิคของ css ที่เอามาทำ css sprite image ก็คือการเลื่อนการแสดงผลในรูปภาพ เช่น ภาพขนาด 100*100 เราสามารถกำหนดจุดเริ่มต้นของภาพไปที่ พิกัดใดก็ได้ ตั้งแต่ 0*0 (ค่าปกติ) จนถึง 100*100 (ซึ่งเป็นค่าที่สูงสุด) ได้อย่างง่าย หรือจะทะลุขนาดภาพออกไปก็ยังทำได้เลย

ตัวอย่างของ sprite image ดูได้ที่นี่ครับ http://css-tricks.com/examples/CSS-Sprites/Example1After/ เวลาที่เราเอาเม้าส์ไปวางเหนือรูป จะเห็นว่ารูปเปลี่ยนสีได้ ซึ่งจริงๆ ทั้งสองสีนั้น คือรูปชิ้นเดียวกันนะครับ ไม่ใช่คนละรูป ไม่ได้ใช้เทคนิดเปลี่ยนรูป แต่ใช้การเลื่อนรูป หรือการทำ css sprite image นี่แหล่ะ

เล่าไปยาว กลับมาเข้าเรื่องของ css sprite image ก็คือปกติ เราจะต้องทำรูปขึ้นมาเอง แล้วก็ต้องเขียน css เองทั้งหมด แต่ว่าวันนี้เราจะทำงานให้ง่ายกว่านั้นครับ ก็คือ แค่เตรียมรูปเอาไว้ ไม่ต้องรวมกัน แยกเป็นชิ้นๆตามปกติที่เรามีนี่แหล่ะครับ จากนั้น แล้วไม่ต้องเขียน css เลย เดี๋ยวเราจะให้เว็บรวมให้เสร็จในขั้นตอนเดียว

หลังจากที่เราเตรียมรูปไว้แล้ว ให้เรา zip รูปทั้งหมดรวมกัน แล้วเปิดเว็บ http://spritegen.website-performance.org/ เพื่อเลือกไฟล์แล้ว upload เลยเพียงแค่นี้ เราก็จะได้ sprite image พร้อม css สำหรับการเรียกใช้งานแล้วครับ

ง่ายในขั้นตอนเดียว

เทคนิคเพิ่มเติม ก็คือควรตั้งชื่อรูปเพื่อให้สื่อความหมายก่อนทำนะครับ เพราะว่าเวลาที่ generate css sprite image ออกมาแล้ว จะได้เรียกใช้งานได้ง่ายๆ และลองศึกษษการตั้งค่าก่อนการ upload ด้วยก็ดีครับ เพื่อการใช้งานได้อย่างคล่องมือ

Create: Modify : 2010-09-07 09:53:48 Read : 10256 URL :