CSS Sprite Image Generator

Jika kemarin sudah dibahas mengenai CSS Sprite Image, yang bisa digunakan agar mempercepat loading website, tetapi dengan membahas cara membuatnya langsung dengan CSS dan gambar yang sudah siap pakai. Nah, sekarang akan saya beri tips dan trik untuk membuat gambarnya tanpa perlu Photoshop dan tanpa perlu CSS untuk mencari posisinya.

Sebagai contoh disini ada beberapa gambar yang akan dijadikan sprite image.

Gambar di atas akan kita satukan dan kita buat menjadi sprite image beserta CSSnya. Setelah gambar siap, folder gambar tersebut kita jadikan zip.

Setelah dijadikan zip, buka halaman website berikut : http://spritegen.website-performance.org/ . Jika terlihat bagian seperti di bawah ini, upload zip yang sudah dibuat dan klik Create Sprite Image & CSS.

Setelah selesai, kita akan mendapatkan kode CSS dan gambarnya sekaligus. Paket lengkap bukan? :D

Kode CSSnya bisa langsung kita copy paste ke editor yang sedang digunakan. Untuk mengambil gambar, klik Download Sprite Image.

Dan inilah hasil gambarnya :

Semoga bermanfaat ya :)