Görsel Sprite Sayfası Birden çok görüntüyü, yapılandırılabilir sütunlar ve boşluklarla tek bir sprite sayfasınaombine edin.

What Is Görsel Sprite Sayfası?

Birden çok görüntüyü, her bir sprite için CSS arka plan konumu koordinatlarıyla birlikte bir ızgara içinde düzenlenmiş tek bir bileşik görüntü olarak birleştiren bir sprite sayfası oluşturucu. Web performans optimizasyonu, oyun sprite animasyonları ve simge setleri için vazgeçilmez. Bireysel resimlerinizi yükleyin, sütun sayısını ve doldurmayı ayarlayın ve araç hem bileşik PNG'yi hem de CSS parçasını üretir.

Why Use Görsel Sprite Sayfası?

• Sprite sayfası görseli + CSS koordinatları üretir
• Yapılandırılabilir sütunlar ve paddingleme
• Daha iyi web performansı için HTTP isteklerini azaltır
• İkon setleri ve oyun simgeleri için idealdir

Common Use Cases

Web Performansı

HTTP isteklerini azaltmak için ikonları tek bir sprite sayfasına birleştirin.

Oyun Geliştirme

Bireysel çerçeve görsellerinden animasyon sprite sayfaları oluşturun.

İkon Setleri

Birden fazla ikonu tek bir verimli sprite görseline paketleyin.

CSS Simgeleri

Hazır CSS kodu ile optimize edilmiş sprite sayfaları oluşturun.

Technical Guide

Görüntüler, yapılandırılabilir sütunlarla bir ızgara içinde yüklenir ve düzenlenir. Satır sayısı imageCount/sütunlar olarak hesaplanır. Canvas boyutları, maksimum-genişlik-her-sütunda ve toplam-satır-yüksekliği artı doldurmadan hesaplanır. Her görüntü, hesaplanan ızgara konumuna çizilir. CSS koordinatları, her bir sprite için negatif arka plan konumu değerleri olarak oluşturulur.

Tips & Best Practices

• 1
  Temiz bir ızgara için tutarlı görüntü boyutları kullanın
• 2
  Boş alanları en aza indirmek için paddingleme miktarını 1-2 pikselde tutun
• 3
  Daha iyi CSS sınıf adları için dosyalarınızı tanımlayıcı olarak adlandırın
• 4
  Oyun motoru uyumluluğu için güçlerin karelerini kullanın

Related Tools

Görüntü Boyutlandırıcı

Görüntüleri kesin piksel boyutlarına veya yüzdesel olarak oranını korurken boyutlandırın.

🖼️ Image Tools

Favicon Oluşturucu

Herhangi bir görüntüden çoklu boyutlarda (16x16, 32x32, 48x48 ve daha fazlası) favicon oluşturun.

🖼️ Image Tools

Görsel Kolaj

Birden çok görseli, özelleştirilebilir düzenler ve boşluklar ile tek bir kolaja dönüştürün.

🖼️ Image Tools

Görsel İzi Tahtası Oluşturucu

Tek bir görseli Instagram ızgaraları ve bulmacalar için eşit boyutlarda taşlara bölün.

🖼️ Image Tools

Frequently Asked Questions

Q En iyi çalışan görüntü boyutları hangileri?

Tutarlı boyutlar en temiz simgeleri üretir, ancak karma boyutlar da desteklenir.

Q CSS kodu üretiliyor mu?

Evet - her bir sprite için arka plan konumu değerleri ile birlikte tam CSS kodu.

Q Kaç görseli birleştirebilirim?

Birden fazla görsel tek bir sprite sayfasına birleştirilebilir.

Q Retina ekranlar için ne yapmalıyım?

Retina desteği için 2x çözünürlüklü görselleri kullanın ve CSS arka plan boyutunu yarıya indirin.

Q Oyun simgeleri için de kullanabilir miyim?

Kesinlikle - oyun sprite sayfaları için animasyon karelerini sırayla düzenleyin.

About This Tool

Görsel Sprite Sayfası is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.