Görsellerim sunucuya yüklendi mi?

Hayır. Her şey tarayıcınızda Canvas API'si kullanılarak çalışır. Dosyalarınız cihazınızdan asla çıkmaz.

Bir sprite sheet'e kaç görsel ekleyebilirim?

Sert bir sınır yok — araç, tarayıcınızın belleği tarafından izin verdiğince fazla görsel paketleyebilir. En iyi performans için bireysel sprite'ları akıllıca boyutlandırın.

Max satır genişliği ayarı ne yapar?

Her satırın ne kadar geniş olabileceğini sınırlar; paketleyici yeni bir satır başlatmadan önce. Daha büyük bir değer daha geniş bir sayfa oluşturur; daha küçük bir değer daha uzun ve dar bir sayfa oluşturur.

Üretilen CSS'i projemde doğrudan kullanabilir miyim?

Evet. Her sprite sınıfı, indirdiğiniz PNG'ye işaret eden background-image URL'si, background-position, genişlik ve yükseklik içerir — bunu herhangi bir still dosyasına yapıştırın ve HTML öğelerinize sınıfı uygulayın.

Giriş spriteleri olarak hangi görsel formatlarını kullanabilirim?

Tarayıcınızın çözebildiği herhangi bir format — PNG, JPEG, WebP, GIF, SVG, AVIF ve daha fazlası. Çıktı sprite sayfası her zaman maksimum uyumluluk için tek bir PNG'dir.

Bu araç, verilerimi yükler mi?

Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.

🗂️ Sprite Sheet Oluşturucu

Birden fazla görseli tek bir optimize edilmiş PNG sprite sheet'e yerleştirin ve hazır kullanıma uygun CSS background-position kurallarını alın — ücretsiz, tarayıcıda, herhangi bir yükleme gerekmiyor.

🗂️

Buraya resimler bırakın veya birkaçını seçmek için tıklayın

Bir PNG + CSS — tarayıcınızda, yükleme gerekmez

Tasarım gereği gizli. Bu araç, tarayıcınızda tamamen çalışır — girdiğiniz hiçbir şey yüklenmez ya da saklanmaz ve çevrimdışı da çalışır.

Hakkında

Bu araç, tarayıcı Canvas API'sini kullanarak görsellerinizi cihazınızda tamamen yerel olarak kompakt bir PNG sprite sheet'e yerleştirmenizi sağlar — hiçbir şey sunucuya yüklenecek değildir. Gerekirse istediğiniz kadar görsel bırakın, maksimum satır genişliğini ve her sprite etrafındaki dolgu alanını belirleyin, ve paketleyici onları satır satır yerleştirerek boşlukları en aza indirir. Oluşturulduktan sonra birleştirilmiş PNG'yi indirebilir ve CSS kod parçasını kopyalayabilirsiniz, bu kod her sprite için doğru background-image, background-position, width ve height değerlerini içeren bir sınıf içerir. Her şey tarayıcınızda yerel olarak çalıştığı için işlem anında ve tamamen gizlidir.

Nasıl kullanılır

Görsellerinizi yükleme alanına bırakın veya tarayıcıdan dosyaları seçmek için tıklayın.
Maksimum satır genişliğini (piksel cinsinden) ve her sprite etrafındaki dolgu alanını belirleyerek onların nasıl sıkıştırıldığını kontrol edin.
Sprite Sheet oluşturmak için tıklayın ve tüm görselleri birleştirilmiş bir PNG'ye yerleştirin, canvas'ta anında önizlenir.
Oluşturulan CSS'i kopyalayın — her sprite kendi sınıfına sahip olacak ve doğru background-position, width ve height değerlerini içerir.
PNG sprite sheet'ini indirin ve CSS'i projenizin stil sayfasına yapıştırın — tamamlandı.

SSS

Görsellerim sunucuya yüklendi mi?: Hayır. Her şey tarayıcınızda Canvas API'si kullanılarak çalışır. Dosyalarınız cihazınızdan asla çıkmaz.
Bir sprite sheet'e kaç görsel ekleyebilirim?: Sert bir sınır yok — araç, tarayıcınızın belleği tarafından izin verdiğince fazla görsel paketleyebilir. En iyi performans için bireysel sprite'ları akıllıca boyutlandırın.
Max satır genişliği ayarı ne yapar?: Her satırın ne kadar geniş olabileceğini sınırlar; paketleyici yeni bir satır başlatmadan önce. Daha büyük bir değer daha geniş bir sayfa oluşturur; daha küçük bir değer daha uzun ve dar bir sayfa oluşturur.
Üretilen CSS'i projemde doğrudan kullanabilir miyim?: Evet. Her sprite sınıfı, indirdiğiniz PNG'ye işaret eden background-image URL'si, background-position, genişlik ve yükseklik içerir — bunu herhangi bir still dosyasına yapıştırın ve HTML öğelerinize sınıfı uygulayın.
Giriş spriteleri olarak hangi görsel formatlarını kullanabilirim?: Tarayıcınızın çözebildiği herhangi bir format — PNG, JPEG, WebP, GIF, SVG, AVIF ve daha fazlası. Çıktı sprite sayfası her zaman maksimum uyumluluk için tek bir PNG'dir.
Bu araç, verilerimi yükler mi?: Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.