Birden fazla ikonu veya görseli tek bir sprite sheet olarak birleştirin. Yatay, dikey veya ızgara yerleşimi seçin. CSS background-position kodlarını otomatik olarak oluşturun.
CSS Sprite, birden fazla küçük görseli (ikon, buton vb.) tek bir büyük görselde birleştirme tekniğidir. Her ikon için ayrı HTTP isteği göndermek yerine tek bir görsel yüklenir ve CSS background-position ile doğru konum gösterilir. Bu sayede HTTP istek sayısı azalır ve sayfa yükleme hızı artar. Bu araç, yüklediğiniz görselleri otomatik olarak birleştirir, CSS kodunu üretir ve sprite görselini indirmenize olanak tanır.
Sprite sheet hâlâ kullanılıyor mu?
Evet. Modern web geliştirmede SVG sprite ve ikon fontları yaygınlaşmış olsa da, PNG sprite sheet'ler özellikle oyun geliştirmede, karmaşık ikonlarda ve eski tarayıcı desteği gereken projelerde hâlâ kullanılmaktadır.
Hangi formatları destekliyor?
PNG, JPEG, GIF ve SVG görselleri yükleyebilirsiniz. Çıktı olarak PNG veya WebP formatında sprite indirebilirsiniz.
Oluşturulan CSS kodunu nasıl kullanırım?
Araç, her görsel için otomatik olarak CSS class'ları oluşturur. background-image ile sprite dosyasını, background-position ile doğru konumu belirtir. CSS kodunu kopyalayıp projenize yapıştırmanız yeterlidir.
Hangi yerleşimi seçmeliyim?
Yatay yerleşim, benzer yükseklikte ikonlar için idealdir. Dikey yerleşim, benzer genişlikte ikonlar için uygundur. Izgara yerleşimi, aynı boyutlu çok sayıda ikon için en kompakt sonucu verir.