Şeffaf Arka Plan İçin En Doğru Format Hangisi?
Şeffaf arka plana ihtiyaç duyulan bir görsel hazırlandığında ilk içgüdü genellikle PNG seçmektir. Bu tercih çoğu durumda makul bir başlangıç noktasıdır; PNG, şeffaflığı on yıllardır kararlı biçimde destekleyen, her tarayıcının ve her aracın sorunsuz işlediği bir formattır. Ama "PNG kullan" kararının arkasındaki mantık sorulmadan verildiğinde bazı seçenekler görünmez kalır: daha küçük dosya boyutuyla aynı kaliteyi sunan WebP lossless, köşeli ve düz renk formlar için çok daha ölçeklenebilir olan SVG, ya da giderek daha geniş bir tarayıcı desteğine kavuşan AVIF.
Şeffaflık desteği formattan formata hem teknik hem pratik açıdan farklılaşır. JPEG bu konuşmanın dışındadır — alpha kanalı desteği yoktur ve arka planı şeffaf tutmanız gereken her senaryoda başka bir format seçmek zorundasınızdır. Geri kalan formatların hepsi şeffaflığı destekler ama hepsinin bunu yapma biçimi, dosya boyutunu yönetme şekli ve farklı araç ve platformlardaki davranışı birbirinden ayrışır.
Hangi senaryonun hangi formatı gerektirdiğini anlamak için önce şeffaflık ihtiyacının kendisini sorgulamak gerekir: görsel vektör mü yoksa raster mi, kenarlar sert mi yumuşak mı, arka plan rengi sabit mi değişken mi, dosyanın gideceği platform format kısıtlaması koyuyor mu? Bu sorular yanıtlandıktan sonra format tercihi çok daha net bir çerçeveye oturur.
PNG-24: şeffaflığın güvenli limanı
PNG-24, tam 8 bitlik alpha kanalı desteğiyle şeffaflığı en eksiksiz biçimde temsil eden raster formattır. Her piksel için 0 ile 255 arasında 256 farklı saydamlık değeri tanımlanabilir; bu da yumuşak kenarlı gölgeler, yarı saydam katmanlar ve düzgün geçişler için ideal bir zemin oluşturur. Logoların ince kenar yumuşatması, kullanıcı arayüzü ikonlarının gölgeleri veya bir ürün görselinin doğal silüeti — tümü PNG-24'ün alpha kanalıyla sağlıklı biçimde temsil edilir.
Güçlü yanı geniş uyumluluktur. Tüm tarayıcılar, tüm görüntüleme araçları, tüm grafik editörleri PNG'yi sorunsuz açar ve kaydeder. Çalışma dosyasından web'e giden zincirde beklenmedik bir davranışla karşılaşma ihtimali en düşük formattır.
Zayıf yanı ise dosya boyutudur. PNG-8'den farklı olarak PNG-24 renk paleti sınırlaması uygulamaz; bu yüzden özellikle fotoğrafik içerikli veya çok renkli görsellerde dosya boyutu hızla büyür. Aynı görsel WebP lossless formatında çoğu zaman yüzde 25-35 daha küçük bir dosya üretir. Sıkıştırma verimliliği açısından PNG-24 modern alternatiflerin gerisinde kalır; ama uyumluluk garantisi gereken her durumda bu bedel ödenmeye değer.
WebP lossless: boyut avantajıyla aynı kalite
WebP lossless modu, PNG-24 ile aynı kayıpsız sıkıştırma ilkesini uygular ama genellikle yüzde 25-35 daha küçük dosya boyutu üretir. Alpha kanalı desteği tamdır; PNG-24'ün 8 bitlik saydamlık esnekliğini aynen sunar. Yumuşak kenarlar, yarı saydam geçişler ve gölge efektleri WebP lossless'ta da sorunsuz temsil edilir.
Tarayıcı desteği bugün çok güçlü bir noktadadır — tüm modern tarayıcılar WebP'yi destekler. Eski Internet Explorer sürümleri desteklemez ama bu kısıtlamanın pratikte neredeyse hiç anlamı kalmamıştır. Bununla birlikte bazı platformlarda ve araçlarda hâlâ sınırlamalar çıkabilir: belirli e-posta istemcileri, bazı sosyal medya platformlarının önizleme motoru veya eski sürüm PDF araçları WebP'yi beklendiği gibi işlemeyebilir. Bu kısıtlamalar biliniyorsa PNG, WebP'nin yerine güvenli seçimdir.
WebP'nin lossy ve lossless modları aynı uzantıyı paylaşır ama içerik tamamen farklıdır. Şeffaf görsel için lossless mod seçilmelidir — lossy mod alpha kanalını destekler ama kenar geçişlerinde görünür bozulma yaratabilir. Export aşamasında hangi modun seçildiğini kontrol etmek bu yüzden önemlidir; araç varsayılan olarak lossy modu açıyor olabilir.
Boyut avantajını somutlaştırmak gerekirse: 800x600 piksel, şeffaf arka planlı bir logo görseli PNG-24'te 180 KB olabilirken WebP lossless'ta 120-130 KB'a inebilir. Bu fark tek bir görsel için küçük görünebilir ama sayfada onlarca şeffaf görsel barındıran bir arayüzde kümülatif etkisi belirginleşir.
SVG: vektör içerik için ölçeksiz çözüm
Logo, ikon ve çizgisel arayüz öğeleri söz konusu olduğunda SVG çoğu zaman raster formatlarla kıyaslamanın dışına çıkar. SVG bir piksel dosyası değil; matematiksel yollar, şekiller ve renk tanımlarından oluşan bir XML belgesidir. Bu yapı şeffaflığı doğal biçimde destekler — SVG'de arka plan varsayılan olarak şeffaftır, ayrıca bir alpha kanalı tanımlamak gerekmez.
Ölçekleme konusundaki avantaj belirgindir: aynı SVG dosyası favicon boyutundan 4K monitör boyutuna kadar herhangi bir çözünürlükte pikselsiz görünür. PNG veya WebP ile retina ekranlar için 2x veya 3x versiyonlar hazırlamak gerekirken SVG için bu adım yoktur. Tek bir dosya tüm bağlamları karşılar.
Dosya boyutu da genellikle rakipsizdir. Düz renk alanlardan oluşan bir logo SVG'de birkaç KB tutarken PNG-24 versiyonu on kat daha büyük olabilir. Tasarım araçlarından yapılan export'lar gereksiz metadata ve grup katmanları içerebilir; SVGO gibi araçlarla bu şişkinlik temizlendiğinde dosya boyutu daha da küçülür.
SVG'nin sınırı içerik türüdür. Fotoğrafik görsel, gradyan ağırlıklı arka plan veya çok sayıda renk geçişi içeren karmaşık kompozisyonlar SVG formatına uygun değildir; bu tür içerikler için raster formatlar gereklidir. Ama içerik vektör tabanlıysa — logolar, ikonlar, illüstrasyonlar, arayüz sembolleri — SVG hem şeffaflık hem ölçekleme hem de dosya boyutu açısından en temiz seçimdir.
AVIF: güçlü ama henüz seçici
AVIF, alpha kanalını destekler ve özellikle fotoğrafik içerikli görsellerde hem PNG-24 hem WebP lossless'tan belirgin biçimde daha küçük dosyalar üretir. Lossless modda da çalışabilir; bu modda PNG-24'e kıyasla yüzde 50'ye varan boyut avantajı gözlemlenebilir. Kağıt üzerinde şeffaflık için en verimli raster format AVIF olarak öne çıkar.
Ama pratik kısıtlamalar bu tabloyu karmaşıklaştırır. Tarayıcı desteği son yıllarda hızla genişledi; Chrome, Firefox ve Safari'nin güncel sürümleri AVIF'i destekler. Ancak bazı tasarım araçları, görüntü işleme kütüphaneleri ve içerik yönetim sistemleri hâlâ eksik veya tutarsız AVIF desteği sunar. Export zincirinde bir araç AVIF üretemiyorsa ya da alpha kanalını doğru kodlayamıyorsa WebP lossless veya PNG-24 çok daha az sürtünme yaratır.
AVIF'in encode süresi de hesaba katılmalıdır. Özellikle lossless modda AVIF encode işlemi PNG veya WebP'ye kıyasla ciddi ölçüde yavaş olabilir. Tek bir görsel için bu fark önemsizdir; ama yüzlerce görselin otomatik işlendiği bir pipeline'da AVIF bu aşamada darboğaz yaratabilir. AVIF kullanmak istendiğinde fallback olarak WebP veya PNG zinciri kurmak desteklemeyen ortamlar için hâlâ gereklidir.
Şeffaf görsel için AVIF şu an için "şartlar uygunsa tercih edilebilir" konumundadır. Araç zinciri AVIF'i sorunsuz destekliyorsa ve fallback stratejisi kuruluysa dosya boyutu avantajından yararlanmak mümkündür. Araç desteği belirsizse veya platform kısıtlamaları varsa WebP lossless çok daha güvenli bir başlangıç noktasıdır.
Hangi senaryo hangi formatı işaret eder?
Logo ve ikon gibi vektör tabanlı içerikler için SVG öncelikli tercihtir. Ölçeklenebilirlik, dosya boyutu ve şeffaflık desteği bir arada değerlendirildiğinde raster formatlarla rekabete girmesi gerekmez. Tasarım içeriği vektöre uygunsa SVG, uygun değilse raster yola geçilir.
Raster şeffaf görsellerde — ürün fotoğraflarının arkaplanı kaldırılmış versiyonları, kenar yumuşatması olan illüstrasyonlar, gölge efektli UI öğeleri — WebP lossless bugün için mantıklı varsayılan seçimdir. PNG-24'e kıyasla anlamlı bir boyut avantajı sunar, tarayıcı desteği geniştir ve araç uyumluluğu güçlüdür. Hedef platform WebP'yi desteklemiyorsa PNG-24'e dönmek her zaman güvenlidir.
E-ticaret platformlarında durum sıklıkla daha kısıtlıdır. Bazı platformlar yüklenen görseli kendi pipeline'larından geçirerek WebP'ye dönüştürür — bu durumda hangi formatı yüklediğiniz değil, platformun çıktısı belirleyici olur. Shopify bu dönüşümü otomatik yapar; WooCommerce ve diğer sistemlerde ise araç bağımlılığı değişir. Platformun davranışını önceden test etmek, yanlış formatta yükleme yapıp sonradan düzeltme zahmetini önler.
JPEG'in bu konuşmada yeri yoktur. Alpha kanalı desteği olmayan tek büyük web formatıdır; şeffaf arka plan gerektiren her durumda başka bir formata geçmek zorunludur. Beyaz arka planla kaydedilmiş bir JPEG şeffaf görünse de açık arka planlı bir sayfada beyaz kenar olarak belli olur — bu hata pratikte sıkça karşılaşılan bir durumdur.
Şeffaf görsel için "doğru format" sorusunun yanıtı içeriğin türüne, hedef platforma ve araç zincirine göre değişir. Vektör tabanlı içerik için SVG; geniş uyumluluk gereken raster içerik için PNG-24; modern bir pipeline'da boyut optimizasyonu öncelikse WebP lossless; AVIF desteği sağlamsa ve fallback kuruluysa AVIF — bu dört seçenek birbirinin alternatifi değil, farklı senaryoların doğal çözümleridir.
Pratikte en sık yapılan hata varsayılan olarak PNG-24'e saplanıp kalmaktır. PNG güvenilirdir ve bu değerlidir; ama aynı senaryoda WebP lossless kullanılabiliyorsa boyut avantajından yararlanmak için bir neden yoktur. Öte yandan SVG'ye geçiş yapılabilecek her logo ve ikon için PNG ya da WebP dosyası üretmeye devam etmek gereksiz bir karmaşıklıktır. Karar, içeriğin doğasını sorarak başlar — format tercihi bunun ardından kendiliğinden şekillenir.