Web Grafikleri için SVG ve PNG Karşılaştırması: Her Format Ne Zaman Kullanılmalı

SVG ve PNG temelde farklı amaçlara hizmet eder, ancak kafa karışıklığına neden olacak kadar örtüşürler. Biri matematiksel şekilleri saklar. Diğeri pikselleri saklar. Yanlış olanı seçmek ya kaliteye ya da performansa, bazen de her ikisine birden mal olur.

SVG (Ölçeklenebilir Vektör Grafikleri), XML tabanlı bir vektör formatıdır. Piksel verilerini depolamak yerine şekilleri, yolları ve metni matematiksel koordinatları kullanarak tanımlar. Bir SVG dosyası aslında koddur; dosyayı bir metin düzenleyicide açabilir ve tarayıcıya görüntünün nasıl çizileceğini söyleyen talimatları okuyabilirsiniz.

SVG'ler CSS ile şekillendirilebilir ve JavaScript ile değiştirilebilir. Fareyle üzerine gelindiğinde renkleri değiştirebilir, ayrı ayrı öğelere animasyon uygulayabilir ve viewBox niteliklerini ayarlayarak SVG'leri duyarlı hale getirebilirsiniz. Logolar ve simgeler gibi basit grafikler için SVG'ler genellikle 1-5 KB ağırlığındadır.

PNG (Taşınabilir Ağ Grafikleri), görüntüleri renkli piksellerden oluşan bir ızgara olarak saklayan bir raster formatıdır. Kayıpsız sıkıştırma kullandığından kalite orijinaliyle aynıdır; JPEG gibi sıkıştırma bozuklukları yoktur. PNG tam şeffaflığı (alfa kanalı) destekler, bu da onu şeffaf arka planlara ihtiyaç duyan görsellerin favorisi haline getirir.

PNG, karmaşık görüntülerin yeniden üretilmesinde mükemmeldir: ekran görüntüleri, şeffaf fotoğraflar, ayrıntılı dokular ve yumuşak geçişler. Ancak her pikseli sakladığı için PNG dosyaları büyük olabilir. PNG olarak 4K ekran görüntüsü kolaylıkla 5 MB'ı aşabilir.

Tipik bir şirket logosu için SVG sürümü 2-5 KB ağırlığında olabilir. Retina ekranlar için 2x çözünürlükte PNG olarak dışa aktarılan logonun boyutu kolaylıkla 30-80 KB olabilir. 10-15 kat fark var.

Bunu bir sayfadaki tüm simgeler, logolar ve kullanıcı arayüzü öğeleriyle çarptığınızda SVG önemli ölçüde daha hafif bir yük sağlar. 60'tan fazla simge içeren bir e-ticaret sitesinde yapılan testlerden PNG'den SVG'ye geçiş, simgeyle ilgili bant genişliğini %87 oranında azalttı.

Ancak bu avantaj karmaşık grafiklerde tersine döner. Binlerce bağlantı noktasına ve ayrıntılı yola sahip bir SVG illüstrasyonu aslında iyi sıkıştırılmış bir PNG'nin dosya boyutunu aşabilir. Tasarımcınız yüzlerce ayrı öğeden oluşan bir illüstrasyon oluşturduysa her iki formatı da kontrol edin ve karşılaştırın.

Bu, SVG'nin belirleyici avantajıdır. Bir SVG, ister 32 pikselde ister 3200 piksel genişlikte görüntülensin, piksel açısından mükemmel görünür. Çözünürlük kavramı yoktur; tarayıcı vektör yollarını ihtiyaç duyulan boyutta yeniden çizer.

Bu, 72 DPI masaüstü monitörlerden 460+ DPI telefonlara kadar değişen ekranlar için önemlidir. Bir SVG dosyası her cihazı kapsar. Bir PNG bunu yapmaz.

PNG'nin sabit bir piksel ızgarası vardır. 200x200 PNG'yi 400x400 pikselde görüntüler (retina ekranlarda olur) ve tarayıcı enterpolasyon yaparak görüntünün yumuşak veya bulanık görünmesini sağlar. Geçici çözüm, PNG'leri 2x veya 3x çözünürlükte dışa aktarmaktır ancak bu, dosya boyutunu orantılı olarak artırır; 3x simge seti 9 kat daha büyük olabilir.

Görüntü fotografik veya fotografik açıdan karmaşık olduğunda PNG doğru seçimdir. Ekran görüntüleri, şeffaf ürün fotoğrafları, karmaşık dokular, binlerce renk ve ince gradyan içeren görseller; bunların tümü taramalı formatlara aittir.

PNG ayrıca piksel sanatı ve her pikselin belirli bir boyutta önemli olduğu görüntüler için de kazanır. Oyun spriteları, 16x16'daki favicon ayrıntıları ve kenar yumuşatma davranışının hassas kontrol gerektirdiği görsellerin tümü PNG olarak daha iyi sunulur.

SVG, logolar, simgeler, illüstrasyonlar, infografikler, haritalar, çizelgeler ve kullanıcı arayüzü öğeleri (temiz şekiller, çizgiler ve düz renklerden oluşan her şey) konusunda açık ara kazanandır. Grafik Figma veya Illustrator'da oluşturulduysa, SVG olarak dışa aktarma kaynak kalitesini mükemmel şekilde korur.

SVG ayrıca duyarlı tasarım konusunda da öne çıkıyor. SVG'nin içindeki CSS medya sorgularını kullanarak öğeleri farklı kesme noktalarında yeniden akıtan veya gizleyen bir SVG illüstrasyonu oluşturabilirsiniz. SVG'deki simgeler, ayrı görüntü dosyaları sunmadan temaya (karanlık mod/açık mod) göre rengi değiştirebilir.

SVG'ler, arama motorlarının dizine ekleyebileceği gerçek metin öğelerini içerebilir. İnfografikinizde SVG metni olarak başlıklar ve etiketler varsa Google bunları okuyabilir. Bu, tüm metnin piksel ızgarasına yerleştirildiği ve tarayıcılar tarafından görülemediği PNG'ye göre anlamlı bir SEO avantajıdır.

Ekran okuyucular için uygun satır içi SVG'ler role ve aria-label öznitelikler taramalı görüntülere göre daha iyi erişilebilirlik sağlar. PNG görüntüleri tamamen şunlara bağlıdır: alternatif erişilebilirlik özelliği.

Formatlar arasında geçiş yapmanız mı gerekiyor? Yapabilirsin SVG'yi PNG'ye dönüştür sosyal medya paylaşımı, SVG oluşturmayan e-posta istemcileri veya yalnızca taramalı görüntüleri kabul eden platformlar için taramalı bir sürüme ihtiyacınız olduğunda.

Diğer yöne giderek yapabilirsiniz PNG'yi SVG'ye dönüştür vektör ölçeklenebilirliğinden yararlanacak görüntüler için. Dönüşüm, net kenarlara ve sınırlı renklere sahip basit grafiklerde en iyi sonucu verir. Ayrıntılı fotoğraflar SVG'ye iyi bir şekilde dönüştürülmeyecektir.

Herhangi bir yazılım yüklemeden hızlı format değişiklikleri için, iformat.io her iki dönüşümü de doğrudan tarayıcınızda gerçekleştirir. 10 saniyeden kısa sürede yükleyin, dönüştürün ve indirin.

Logolar, simgeler, resimler ve net şekillere sahip her şey için SVG'yi kullanın; mükemmel şekilde ölçeklenir ve dosyaları küçük tutar (tipik olarak 1-5 KB). Ekran görüntüleri, şeffaf fotoğraflar ve piksel hassasiyetinde resimler için PNG'yi kullanın. Çoğu web projesi için simge setinizi PNG'den SVG'ye dönüştürmek sayfa ağırlığını azaltacak ve yüksek DPI ekranlarda görüntülenmeyi iyileştirecektir. Şüphe duyduğunuzda her iki formatı da test edin; dosya boyutu karşılaştırması 30 saniye sürer ve doğru seçim genellikle açıktır.