Generator CSS Sprite Sheet

Cara membuat sprite sheet

1. Letakkan gambar Anda di area unggah, atau klik area itu untuk memilihnya. PNG, SVG, WebP, JPG, dan format lain yang dapat dibaca browser Anda diterima, hingga 500 gambar. Setiap file muncul di daftar Gambar beserta ukurannya; tombol × menghapus satu gambar dan Hapus semua gambar mengosongkan daftar.
2. Pilih Tata letak: Grid, Dipadatkan (sheet terkecil), Strip horizontal, atau Strip vertikal. Dengan Grid, Kolom (0 = otomatis) menentukan jumlah kolom.
3. Atur Padding (px) antar sprite (bawaan 2) dan centang Ukuran pangkat dua (256, 512, 1024…) jika engine atau GPU Anda memerlukannya.
4. Pilih File data: CSS (kelas background-position), JSON (peta bingkai), atau CSS dan JSON. Sesuaikan Nama file dan Awalan kelas CSS (keduanya “sprite” secara bawaan).
5. Periksa pratinjau, Ukuran sheet, dan Ruang terpakai, lalu klik Unduh ZIP (PNG + data) atau Unduh PNG saja. Kode yang dihasilkan juga dapat disalin langsung.

Gambar dibaca di browser Anda dan tidak ada yang diunggah. SVG tanpa lebar dan tinggi sendiri dirasterisasi dengan sisi terpanjang 256 px.

Memilih tata letak

• Grid memberi setiap gambar sebuah sel seukuran gambar terbesar. Dengan kolom otomatis, grid berbentuk kira-kira persegi. Sederhana dan mudah diprediksi, ideal jika semua sprite berukuran sama, seperti set tile.
• Dipadatkan (sheet terkecil) memakai shelf packing: gambar diurutkan dari yang tertinggi lalu ditempatkan dari kiri ke kanan dalam baris. Alat ini mencoba banyak lebar sheet dan mempertahankan yang luasnya terkecil, dengan memperhitungkan pembulatan pangkat dua bila opsi itu aktif. Terbaik untuk ikon berukuran campuran.
• Strip horizontal dan Strip vertikal menaruh gambar dalam satu baris atau kolom sesuai urutan penambahan. Inilah yang diharapkan banyak pemutar animasi untuk bingkai.

Sheet tidak boleh melebihi 16.384 px per sisi atau sekitar 16,7 megapiksel, batas yang dapat digambar browser.

Menggunakan CSS

CSS berisi sebuah kelas dasar dengan sheet sebagai background-image dan no-repeat, lalu satu kelas per sprite yang dinamai dari filenya: home.png menjadi sprite-home. Nama diubah menjadi huruf kecil, aksen dihilangkan, karakter lain menjadi tanda hubung, dan duplikat mendapat -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Setiap kelas sprite menetapkan width, height, dan background-position dengan offset negatif. Sprite pada x = 40, y = 20 mendapat background-position: -40px -20px: seluruh sheet digeser 40 px ke kiri dan 20 px ke atas di dalam elemen, sehingga hanya sprite itu yang terlihat melalui kotak elemen. Padding mencegah sprite di dekatnya ikut terlihat saat halaman di-zoom atau tekstur difilter.

Layar DPI tinggi: gambar visual Anda dua kali ukuran tampilnya, buat sheet-nya, lalu tambahkan background-size sebesar setengah ukuran sheet ke kelas dasar, dan bagi dua lebar, tinggi, serta offset. Alat ini tidak menghasilkannya; ini adalah penyesuaian manual.

Apakah sprite masih berguna dengan HTTP/2?

Sprite diciptakan untuk menghemat permintaan HTTP. Dengan multipleksing HTTP/2, banyak file kecil dimuat hampir secepat satu file, sehingga keuntungan untuk situs web jauh lebih kecil, dan ikon SVG atau icon font sering kali lebih baik untuk ikon yang dapat diskalakan. Sprite sheet tetap menjadi standar untuk game 2D dan bingkai animasi: satu tekstur berarti lebih sedikit pergantian tekstur GPU dan satu file untuk dimuat.