CSS Sprite Oluşturucu

Görsel yüklemek için tıklayın

Desteklenen formatlar: PNG, JPG, WebP

Düzen

Görsel Aralığı: 10px

050

Sprite önizlemesi için görsel yükleyin

Birden çok küçük ikonu çevrimiçi olarak CSS sprite sayfasında birleştirin. Yerel tarayıcıda işlenir, sunucuya gönderilmez; yatay, dikey ve ızgara düzenleri için background-position CSS kodu otomatik üretilir.

İlgili Öneriler

ICO olusturucu

Resim Sıkıştırma

Resim Dönüştürme

Resim Boyutlandırma

Resim Kırpma

Görsel Döndürme ve Çevirme

Sprite görsel (CSS Sprite) nedir?

Sprite görsel (CSS Sprite), birçok küçük görseli tek bir büyük görselde birleştirip background-position ile tek tek ikonları gösterme tekniğidir. «Sprite» sözcüğü ilk dönem oyun konsollarından gelir; birçok animasyon karesi tek bir büyük görsele paketlenip hızla değiştirilirdi. Web ön yüzü bu fikri ödünç alıp sayfadaki birçok küçük ikonu tek görselde birleştirir.

**Neden sprite gerekiyor?** HTTP 1.1 döneminde her görsel dosyası bir HTTP isteği oluşturuyor, TCP el sıkışması, TLS el sıkışması ve başlık yükü ekleniyordu. 100 ikon = 100 istek. Sprite tüm ikonları tek görsele yerleştirip tek istekle tüm ikonları yükleyerek ilk ekran çizimini belirgin biçimde hızlandırır. HTTP/2 çoklama bu avantajın bir kısmını azaltsa da CDN önbelleği, gzip sıkıştırması ve HTTP/1.1 uyumu açısından hâlâ değerlidir.

**Temel ilke:** 200×60 boyutunda bir sprite'a 60×60 üç ikonun yan yana yerleştirildiğini varsayalım. 60×60 öğede ilk ikonu göstermek için `background: url(sprite.png); background-position: 0 0;` yazılır; ikinci için -60px 0, üçüncü için -120px 0 kullanılır. Aracımız bu koordinatları otomatik üretir.

**Modern alternatifler:** SVG + use/symbol (önerilen, vektörel, renk değişebilir, animasyonlu), Icon Font (geniş uyumluluk, çapraz platform), HTTP/2 Server Push, web font ikonları. Her yöntemin kendi senaryosu vardır; projenin gerçek ihtiyacına göre seçim yapın.

Kullanım senaryoları

Web projesinde çok sayıda küçük ikonu sprite'a birleştirip HTTP isteklerini azaltmak ve ilk ekranı hızlandırmak
Ön yüz geliştirmede proje ikon kaynaklarını merkezi yönetmek ve background-position CSS kodunu otomatik üretmek
İkon kaynakları hazır olduğunda sprite + CSS kodunu toplu üretip ekibe doğrudan teslim etmek
Birleştirilen görseli [görsel sıkıştırma aracı](/image/compress/) ile küçülterek toplam boyutu azaltmak ve LCP metriğini iyileştirmek
Uygulama, Electron veya masaüstü istemcide statik ikon kaynaklarını tek dosyada paketlemek
E-posta HTML şablonları veya statik bloglarda birçok ikon gerekliyken e-posta istemcisi uyumu kısıtı varsa
Tasarımcının ikonları sprite formatında teslim edip ön yüz mühendisinin hızla entegre etmesini kolaylaştırmak
Yalnızca Retina ekranlar için 2x çözünürlüklü sprite üretip background-size ile 1x ve 2x ekranlara uyum sağlamak

Nasıl Kullanılır

Yükleme alanına tıklayın ya da birden çok görseli sürükleyip bırakın (JPG / PNG / WebP / GIF vb. desteklenir)
Soldaki görsel listesinde sürükleme tutamağı veya yukarı/aşağı düğmeleriyle ikon sırasını ayarlayın
Soldaki düzen alanından «Yatay», «Dikey» veya «Izgara» düzenlerinden birini seçin
Boşluk sürgüsüyle ikonlar arasındaki piksel boşluğunu ayarlayın (1-5 px önerilir)
Sağda sprite'ı anlık önizleyin; «İndir» ile PNG'yi kaydedin, «Kopyala» ile CSS kodunu projeye taşıyın

Özellikler

Tek tıkla birden çok görseli birleştirme: birkaç küçük ikon veya görseli yükleyin, otomatik olarak tek sprite elde edin
3 düzen modu: yatay, dikey ve ızgara, farklı senaryolara uyacak şekilde serbestçe geçiş yapın
Ayarlanabilir boşluk: 0-50 px piksel boşluk sürgüsü ile ikon aralıklarını esnek şekilde kontrol edin
Sürükleyerek sıralama: listedeki ikonları sürükleyerek birleştirme sırasını değiştirin, CSS koordinatları otomatik güncellenir
Mobil sıralama: yukarı/aşağı düğmeleri ile sıra ayarı, mobil tarayıcıda da rahat kullanım
Otomatik CSS üretimi: her alt görsel için background-position, genişlik ve yükseklik dahil tam konum kodu üretilir
Anlık önizleme: görsel veya parametre değiştiğinde sprite hemen yeniden üretilir, WYSIWYG
Tek tık CSS kopyalama: yerleşik kopyala düğmesi, tam stil şablonunu panoya kopyalar
Tek tık PNG indirme: birleştirilmiş görsel yerel olarak kaydedilir, dosya adı sprite.png olarak sabit
Yerel tarayıcı işlemi: Canvas API ile yerel birleştirme, görseller sunucuya gönderilmez
Çoklu format desteği: JPG, PNG, WebP, GIF gibi başlıca görsel formatları yüklenebilir
Şeffaf arka plan korunur: çıktı PNG, orijinal ikonların alfa kanalını koruyarak birleştirmeye uygundur

Best Practices

Retina 2x uyumu: 2x kaynaklarla sprite üretin

Hedef kullanıcılarınız Retina ekran (Mac, iPhone, HiDPI Windows) kullanıyorsa, 2x çözünürlüklü kaynaklarla (örn. 32×32 ikonlar) sprite üretin ve CSS'te background-size: 32px auto belirterek 16×16'ya küçültün. Böylece tek üretimle hem 1x hem 2x ekranlar net görünür ve tüm cihazlara uyum sağlanır.

HTTP/2 projelerinde bile sprite hâlâ değerlidir

HTTP/2 çoklama, istek sayısı sorununu hafifletse de sprite dört senaryoda öne çıkar: CDN önbelleği yeniden kullanımı, yüksek gzip/Brotli sıkıştırma oranı, iç ağ proxy'lerinden geçebilme ve HTTP/1.1 yedekleme uyumu. Kurumsal ağlar, devlet ve banka sistemleri, e-posta HTML şablonları hâlâ HTTP/1.1'e dayanır ve sprite bu ortamlarda vazgeçilmezdir.

PNG-8 vs PNG-24 seçimi: ikonlar PNG-8, gradyanlar PNG-24

Araç PNG çıktısı verir, ama kaynağın bit derinliğini siz seçersiniz. Düz veya tek renkli ikonlar PNG-8'de tutulmalı (kayıpsız şeffaflık, PNG-24'ten %60-80 küçük). Gradyan, gölge ve vurgu içeren ikonlar PNG-24 gerektirir. Araç her formatı kabul ettiğinden, önce kaynakları bir PNG sıkıştırıcıyla iyileştirip sonra birleştirin.

CDN önbellek stratejisi: dosya adına hash ekleyin

Üretilen sprite.png dosyasını sabit bir adla bırakmayın. İçerik hash'iyle yeniden adlandırın (örn. sprite.a3f2b1.png) ve kalıcı önbellek için Cache-Control: max-age=31536000 ayarlayın. Tarayıcı dosyayı bir kez indirir, sonraki istekler yerel önbellekten karşılanır; bu, salt HTTP/2'den daha fazla trafik tasarrufu sağlar. Aracımız dosyayı sprite.png adıyla verir, indirdikten sonra manuel olarak yeniden adlandırın.

gzip / Brotli sıkıştırma sprite'ı daha da küçültür

Birleştirilmiş görsel, piksellerin ardışıklığı nedeniyle gzip/Brotli tarafından dağınık küçük görsellere göre çok daha iyi sıkıştırılır. Nginx + gzip seviye 1 ile sprite %60-80, Brotli ile %85+ küçülür. Content-Encoding açıkken 1 MB'lık sprite gerçekte 200-300 KB olarak iletilir; bu, sprite'ın en az takdir edilen avantajıdır.

CSS Modules / Vue scoped uyumu: :global() ile sarın

Proje CSS Modules veya Vue scoped CSS kullanıyorsa, aracımızın ürettiği .icon-home ve .sprite sınıf adları yerel olarak hash'lenir ve çalışmaz. .module.css içinde :global(.sprite) { ... } ile ortak sınıfları sarıp scoped bloğunun dışından çağırın. Alternatif olarak CSS Modules'tan vazgeçip BEM adlandırma kuralıyla yönetin.

Icon Font ile birlikte kullanın: temel ikonlar font'ta, karmaşık olanlar sprite'ta

Üretimde en istikrarlı yaklaşım birleşik kullanımdır. Genel amaçlı küçük UI ikonlarını (ayarlar, kapat, arama, kullanıcı) Icon Font'ta (renk değişebilir, vektörel, çapraz platform) yapın. Karmaşık renkli ikonları (ürün logoları, kampanya banner ikonları) sprite'ta tutun. İki yöntemin güçlü yönleri birbirini tamamlar ve tek taraflı bakım maliyetinden kurtarır.

Mühendislik projelerinde spritesmith, prototiplerde aracımız

Uzun ömürlü projelerde spritesmith (Webpack) veya gulp.spritesmith'i build hattına bağlayın: kaynak değişikliklerinde otomatik yeniden üretim, hash'li dosya adı, SCSS/LESS değişkenleri otomatik oluşturulur. Aracımız, bağımlılığı olmayan hızlı prototipler ve küçük teslimatlar için uygundur; CI/CD hatları içinse build eklentileri daha uygundur.

Modern projeler sprite'tan SVG symbol'e geçebilir

Proje modern tarayıcıları (Chrome / Safari / Firefox / Edge'in tamamı, ayrıca IE 11+) destekliyorsa, sprite'tan SVG symbol'e geçişi değerlendirin: tek dosya tüm ikonları yönetir, CSS renk ve animasyonu kontrol eder, background-position koordinatlarının bakım maliyeti ortadan kalkar. Aracımızın ürettiği sprite, geçiş döneminde tek seferlik varlık olarak kullanılabilir.

Sık Sorulan Sorular

Sprite görsel nedir ve neden birden çok görsel birleştirilir?

Sprite görsel (CSS Sprite), birçok küçük görseli tek bir büyük görselde birleştirip background-position ile tek tek ikonları gösterme tekniğidir. Birleştirildiğinde tüm ikonlar tek bir HTTP isteğiyle yüklenir; ayrı ayrı yüklemeye kıyasla istek sayısı büyük ölçüde düşer ve ilk ekran çizimi hızlanır. Ön yüz performans optimizasyonunun klasik yöntemidir.

Çevrimiçi olarak birden çok ikonu sprite'a nasıl birleştiririm?

Görselleri yüklediğinizde araç, seçtiğiniz düzende otomatik birleştirme yapar ve anlık önizleme sunar. Aynı anda sağ tarafta her alt görsel için background-position kodunu (genişlik ve yükseklikle birlikte) otomatik üretir; stil şablonuna kopyalayıp kullanabilirsiniz. Üretilen sprite PNG formatındadır ve tek tıkla indirilebilir.

Üretilen CSS kodu nasıl kullanılır?

İndirdiğiniz sprite.png dosyasını proje dizinine (örn. /img/sprite.png) yerleştirin ve aracın ürettiği CSS'i stil şablonuna yapıştırın. İkonu göstermek istediğiniz öğeye .sprite sınıfı ve eşleşen .icon-xxx sınıfını ekleyin; örn. <i class="sprite icon-home"></i>. Sınıf adları araç tarafından orijinal dosya adından otomatik üretilir.

Hangi yerleşim düzenleri destekleniyor?

Üç düzen desteklenir: yatay (ikonlar tek satırda soldan sağa), dikey (ikonlar tek sütunda yukarıdan aşağıya) ve ızgara (ikon sayısına göre otomatik kare matris; sütun sayısı adedin kareköküne yuvarlanır). Soldaki panelden mod değiştirip önizleme yapabilirsiniz.

İkonlar arasındaki boşluğu ayarlayabilir miyim?

Evet. Soldaki panelde 0-50 px aralığında bir piksel boşluk sürgüsü bulunur, 1-5 px önerilir. Uygun boşluk, CSS konumlandırmasında kenar piksel girişimini önler, ancak son kullanımı etkilemez: boşluk sprite'ın içindedir ve CSS'te yalnızca background-position'ın tam koordinatları kullanılır.

İkonların sırasını değiştirebilir miyim?

Evet. Soldaki görsel listesindeki her öğe sürükleme tutamağıyla taşınabilir, mobilde ise yukarı/aşağı düğmeleriyle sıra değiştirilir. Düzenleme sonrasında sprite yeni sıraya göre yeniden üretilir ve CSS koordinatları da eş zamanlı güncellenir.

Hangi görsel formatları destekleniyor?

JPG, PNG, WebP, GIF gibi tüm yaygın görsel formatları giriş olarak desteklenir. Çıktı her zaman şeffaflığı koruyan PNG formatındadır. İkonlar için PNG girişi önerilir; PNG'nin şeffaf kanalı sprite'a birleştirildikten sonra da doğru şekilde korunur.

Modern projelerde sprite'a hâlâ ihtiyaç var mı?

HTTP/2 yaygınlaştıktan sonra çoklama, sprite'ın bir kısım avantajını azalttı, ama CDN önbelleği, gzip sıkıştırması ve ilk ekrandaki kritik ikonların hızlı yüklenmesi açısından hâlâ değerlidir. İkon sayınız azsa (10'dan az) ya da renk ve animasyon gerekiyorsa, SVG symbol veya Icon Font'a geçmeniz önerilir. Çok sayıda statik PNG ikon için sprite, hâlâ istikrarlı ve güvenilir bir seçimdir.

Retina ekranda sprite bulanık mı görünür? Nasıl çözülür?

Bulanık görünebilir. Retina ekranlar (Mac, iPhone, HiDPI Windows) fiziksel piksel sayısı CSS pikselinin 2-3 katıdır; normal 1x sprite 2x'e gerilir ve kenarlar bulanıklaşır. Çözüm: 2x çözünürlüklü kaynaklarla (16×16 yerine 32×32) sprite üretmek ve CSS'te background-size: 32px auto ile 16×16'ya küçültmektir.

İkonları birleştirmek görsel kalitesini düşürür mü?

Kalite kaybı olmaz. Birleştirme işlemi, görselleri büyük tuvalin belirli konumlarına yerleştirir; yeniden örnekleme, sıkıştırma veya renk düzeltmesi yapmaz. Çıktı PNG, orijinal kaliteyi korur. Ek boyut küçültme isterseniz indirdikten sonra [görsel sıkıştırma aracımızı](/image/compress/) kullanabilirsiniz.

Sprite görselleri sunucuya gönderiliyor mu? Güvenli mi?

Gönderilmiyor. Tüm birleştirme işlemi yerel tarayıcınızda Canvas API ile yapılır; dosyalar hiçbir sunucuya yüklenmez ve işlem sonrasında silinir. Hassas içerikli kurum içi ikonlar ve yayımlanmamış logo tasarımları güvenle işlenebilir.

Üretilen sprite nasıl indirilir?

Görselleri yükledikten sonra araç otomatik önizleme oluşturur. Soldaki «İndir» düğmesine tıklayarak sprite.png dosyasını yerel olarak kaydedebilirsiniz. CSS kodu gerekirse araç tam CSS'i otomatik üretir; «Kopyala» düğmesi panoya kopyalar.

Sınıf adlarını kendim belirleyebilir miyim?

Mevcut sürümde sınıf adları, araç tarafından orijinal dosya adından .icon- önekiyle otomatik üretilir. Örneğin home.png yüklendiğinde .icon-home sınıfı oluşur. Dosya adlarında yalnızca Latin harfleri, rakamlar ve kısa çizgi kullanmanız daha temiz CSS sınıf adları elde etmenizi sağlar.

Sprite, Icon Font ve SVG Symbol arasında seçim nasıl yapılır?

Senaryoya göre değişir. Çok sayıda statik PNG ikon ya da eski IE uyumu gerekiyorsa sprite; renk değişimi ve çapraz platform gerektiren evrensel UI ikonları için Icon Font; renk, animasyon ve tek dosya yönetimi gereken modern projelerde ilk tercih SVG Symbol. Pratikte sıkça birleştirilir: temel UI ikonları Icon Font'ta, karmaşık renkli ikonlar sprite'ta tutulur.

Birleştirilen sprite'ı [görsel sıkıştırma aracı](/image/compress/) ile daha da küçültebilir miyim?

Evet. Aracımız kayıpsız PNG çıktısı verdiğinden dosya büyük olabilir. Önerilen iş akışı: burada sprite'ı üretin, sonra [sıkıştırma aracı](/image/compress/) ile PNG boyutunu küçültün veya JPG'ye dönüştürün (şeffaflık gerekmiyorsa), gerekirse [dönüştürme aracı](/image/convert/) ile WebP'ye çevirin. Araçları birlikte kullanmak yükleme performansını en üst düzeye çıkarır.

Sözlük

Sprite görsel (CSS Sprite): Birçok küçük görseli tek bir büyük görselde birleştirip background-position ile tek tek ikonları gösterme tekniği. Web ön yüzünün klasik performans optimizasyon yöntemi.
background-position: Arka plan görselinin başlangıç koordinatını belirleyen CSS özelliği. Sprite, arka planı istenen ikona kaydırmak için negatif değerler kullanır. Örn. background-position: -60px 0, 60 px ötelenmiş konumdaki ikonu gösterir.
background-size: Arka plan görselinin görüntülenme boyutunu belirleyen CSS özelliği. Retina uyumunun anahtarı: 2x kaynaklarla sprite üretildikten sonra CSS'te background-size: 32px auto ile 1x boyuta dönülür; böylece 1x ve 2x ekranlar net kalır.
Izgara düzeni (Grid Layout): Aracımızın ızgara modu, ikon sayısının karekökünü alıp yukarı yuvarlayarak sütun sayısını otomatik hesaplar ve ikonları satır öncelikli olarak kare matrise yerleştirir. Örn. dokuz ikon 3×3 ızgaraya yerleşir.
İkon boşluğu (Padding): Sprite içindeki alt görseller arasındaki piksel boşluğu. 1-5 px önerilir; CSS konumlandırmasında kenar piksel girişimini önler, son kullanımı etkilemez. CSS çağrısında yalnızca kesin koordinatlar kullanılır.
PNG şeffaflık kanalı: PNG formatı alfa kanalını destekler, bu sayede ikon arka planı şeffaf yapılabilir. Sprite çıktısı PNG formatını koruduğundan şeffaf ikonlar birleştirme sonrasında da doğru görüntülenir.
HTTP/2 çoklama: HTTP/2 protokolü, tek bağlantıda birçok isteği paralel işler ve sprite'ın bir kısım avantajını azaltır. Ancak CDN ayarı, eski tarayıcı uyumu ve gzip sıkıştırma derecesi açısından HTTP/2, birleştirilmiş büyük görsele göre hâlâ geridedir.
SVG Symbol: SVG'nin <symbol> öğesi ve <use> referansıyla tüm ikonları tek bir SVG dosyasında toplama yöntemi; CSS fill, stroke ve animasyonu kontrol eder. Modern projelerde sprite'ın ilk alternatifidir.
DPR (Cihaz Piksel Oranı): Device Pixel Ratio, fiziksel piksel ile CSS pikseli arasındaki oran. Retina ekranlarda DPR = 2'dir; CSS'te 16×16 olan bir ikon gerçekte 32×32 fiziksel piksel gerektirir. Sprite'ın Retina uyumunun temel parametresidir.

Sprite görsel için 3 düzen modunun karşılaştırması

Düzen modu	Yerleşim kuralı	Tipik kullanım
Yatay	İkonlar tek satırda soldan sağa dizilir	Navigasyon, Tab düğmeleri, yatay araç çubukları
Dikey	İkonlar tek sütunda yukarıdan aşağıya dizilir	Dikey menüler, liste önekleri, üst-alt yapılar
Izgara	İkon sayısına göre otomatik kare matris	Genel amaçlı, sayı belirsizken en iyi başlangıç

Sprite için önerilen Padding değerleri

Boşluk (px)	Senaryo	Öneri
`0px`	İkon kenarları temiz, kendi şeffaf padding'i var	Maksimum sıkılık, kenar piksel girişimi olası
`1-2px`	Yüksek kaliteli ikonlar, minimum güvenlik payı	Önerilen değer, sıkılık ve kararlılık dengesi
`3-5px`	Gölge veya konturlu standart ikonlar	Güvenli mesafe, yaygın tercih
`6-10px`	Büyük boyut farkları ve konturlu ikonlar	Büyük ikonlar küçükleri kapatmaz
`10-50px`	Hata ayıklama, görsel gruplama	Yalnızca önizleme için, üretim için değil

Retina 2x sprite için uyum parametreleri

Ekran DPR	CSS boyutu	Kaynak boyut	background-size
`1x`	`16×16`	`16×16`	`auto`
`2x`	`16×16`	`32×32`	`32px auto`
`3x`	`16×16`	`48×48`	`48px auto`
`2x`	`24×24`	`48×48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - CSS'te sprite görselleri uygulama
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> ve <use>
ReferenceWeb.dev - Görselleri CSS sprite ile değiştirme
ReferenceWikipedia - Sprite (bilgisayar grafiği)