CSS Sprite Oluşturucu

İkon dosyalarınızı yükleyin; tek PNG sprite görseli ve her ikon için background-position CSS'i üretilsin.

Detaylı Bilgi

Sprite oluşturucu, birden fazla küçük görseli (ikonlar, butonlar, oyun kareleri) tek bir sprite sheet dosyasında birleştirir ve her görselin koordinatlarını CSS/JSON olarak verir. Web performansında klasik bir tekniktir: çok sayıda küçük istek yerine tek dosya indirilir.

Web projelerinde sprite kullanımı HTTP istek sayısını azaltarak sayfa açılışını hızlandırır; özellikle ikon setleri için hâlâ geçerlidir. Üretilen koordinatları doğrudan background-position olarak kullanabilirsiniz. Görseller cihazınızda işlenir.

Aracı kullanmak için JavaScript gerekli — bu sayfa yüklenirken otomatik açılır.

Nasıl Kullanılır?

1. İkon/görsellerinizi yükleyin (en az 2).
2. Yatay veya dikey yerleşim seçin.
3. Sprite PNG'sini ve CSS kodunu alın.

Sık Sorulan Sorular

CSS sprite neden kullanılır?

Onlarca küçük ikonu tek istekte yükleyerek HTTP isteği sayısını azaltır ve siteyi hızlandırır.

CSS nasıl kullanılır?

Üretilen .sprite sınıfını elementinize ekleyin, ikon sınıfıyla konumu belirtin.

Diğer Ücretsiz Araçlar

Tüm işlemler tarayıcınızda gerçekleşir; dosyalarınız hiçbir sunucuya yüklenmez.