Creation
Sprite Sayfası Oluşturucu
Geliştiriciler için CSS, JSON ve SCSS çıktısı ile birden fazla görüntüyü bir sprite sayfasına birleştirin.
Your files stay on your device - processed locally via WebAssembly, never uploaded
Drop sprites (PNG, JPEG, WebP)
Drop multiple files at once. Add more anytime.
Embed this tool on your website
Copy this code to add the Sprite Sayfası Oluşturucu to your site for free. It runs entirely in your visitors' browsers - no API key, no usage limits.
<iframe src="https://optipix.art/embed/sprite-sheet" width="100%" height="600" style="border:1px solid #e4e4e7;border-radius:8px;" title="Sprite Sayfası Oluşturucu by OptiPix" loading="lazy"></iframe> <p style="font-size:12px">Free tool by <a href="https://optipix.art/sprite-sheet">OptiPix Sprite Sayfası Oluşturucu</a></p>
❤️ Love this tool? Support our team.
No ads, no tracking, no limits. Tips keep 104 tools free for everyone.
Secure payment via Stripe · No account needed
About Sprite Sayfası Oluşturucu
Last updated: May 2026
OptiPix Sprite Sheet Generator, birden çok görüntüyü tek bir optimize edilmiş sprite sheet'te birleştirir; yapıştırmaya hazır CSS, JSON koordinatları ve SCSS değişkenleri ile birlikte. Bir düzen seçin: yatay şerit, dikey şerit, ızgara (özel sütun sayısı) veya paketlenmiş (minimum israf alan için kutu paketlenmiş). Kenar kanamasını önlemek için sprite'lar arasına dolgu ayarlayın. Çıktı, tek bir PNG sprite sheet artı her sprite için oluşturulan CSS ('.sprite-icon-home { background-position: -0px -0px; … }'), bir JSON koordinat haritası ve SCSS değişkenleridir. Retina @1x ve @2x ölçeklendirme desteklenir. Her sprite, kaynak dosya adından adlandırılır. Her şey yerel olarak çalışır - resimleriniz cihazınızdan asla ayrılmaz. Oyun geliştiricileri, CSS sprite'ları kullanan web geliştiricileri ve küçük simgeleri tek bir ağ isteğinde toplamak isteyen herkes için üretilmiştir.
How It Works
Her giriş görüntüsü belleğe yüklenir; seçilen düzen algoritması (şerit, ızgara veya raf kutu paketi) sprite başına (x, y, w, h) koordinatları hesaplar; sprite sheet bir tuvale işlenir; CSS / JSON / SCSS aynı koordinat haritasından oluşturulur.
Use Cases
- •Kullanıcı arayüzü simgelerini tek bir PNG + CSS sprite sheet'inde paketleyin
- •Phaser veya Pixi için bir 2D oyun için sprite atlası oluşturun
- •Sosyal medya simgelerini daha hızlı bir site için tek bir CSS sprite'ında birleştirin
- •Karakter animasyon karelerini yatay bir şeride paketleyin
- •Kaynak görüntülerden retina uyumlu @2x sprite sheet oluşturun
You Might Also Like
If you find Sprite Sayfası Oluşturucu useful, check out these related tools: Image Crop, Image Resizer, and Format Converter. All tools run entirely in your browser with no uploads or signups required.
Explore more: Browse all tools · Step-by-step guides · Tips & tutorials · Compare tools
Frequently Asked Questions
Hangi düzeni kullanmalıyım?
Kutu paketleme nedir?
CSS / JSON / SCSS'i dışa aktarabilir miyim?
Sprite sheet neden kullanılır?
Resimlerim yükleniyor mu?
Related Tools
Görüntü Kırpma
Herhangi bir en boy oranına veya şekle – daire, kalp, yıldız, altıgen – döndürme ve düzeltme ile kırpın.
Görüntü Boyutlandırıcı
Instagram, Twitter, LinkedIn ve daha fazlası için görüntüleri yeniden boyutlandırın.
Format Dönüştürücü
JPEG, PNG, WebP ve daha fazlası arasında görüntüleri dönüştürün.
Favicon Oluşturucu
Herhangi bir görüntüden, metinden veya emojiden her favicon boyutunu + ICO dosyasını + web manifestini oluşturun.