SVG vs PNG/JPG: Vektör formatı performans ve SEO için neden önemlidir

PNG ve JPG: Fotoğraflar için mükemmel, arayüz için çok ağır

PNG ve JPG raster formatlardır: resim bir piksel ızgarasıdır. 512×512 PNG olarak dışa aktarılan bir logo her noktayı "fotoğraflar". Retina ekranda net kalması için genellikle iki veya üç kat daha büyük bir sürüm, yani iki veya üç kat daha fazla KB sunmanız gerekir. JPG fotoğrafları daha iyi sıkıştırır ancak düz renkleri bozar, metinlerin etrafına artefaktlar ekler ve saydamlığı desteklemez. İkisi de navigasyonda 24 piksel, başlıkta 240 piksel olarak görüntülenmesi gereken bir logotip veya ikon için tasarlanmamıştır.

SVG (Scalable Vector Graphics), şekilleri piksellerle değil, eğriler ve koordinatlarla tanımlar. PixelToPath ile bir PNG'yi vektörleştirmek, sabit bir bit eşlemi tarayıcının ekranın tam boyutunda yeniden çizdiği bir yolla değiştirmektir. Sonuç: genellikle çok daha hafif bir dosya ve mobil cihazlarda, bilgisayarlarda ve 4K ekranlarda aynı netlik.

SVG'nin bir site için somut olarak değiştirdikleri

Arayüz için SVG sadece estetik bir "artı" değildir. Bir performans kaldıracıdır: ağ üzerinde daha az bayt, korunması gereken daha az varyant, daha basit bir önbellek ve tüm modern tarayıcılarda yerel vektör oluşturma.

Bir geliştirici veya SEO için en belirgin kazanımlar:

• Ağırlık: basit bir logo PNG'de 40 ila 80 KB'den SVG'de birkaç KB'ye düşer ve @2x / @3x dışa aktarımlarını kaldırırsınız
• Ölçeklenebilirlik: tek bir dosya, srcset veya resim medya sorguları (media queries) olmadan 4K tam ekran gibi 16 pikselde de net
• Core Web Vitals: indirilecek daha az veri (LCP) ve viewBox aracılığıyla ayrılmış sabit alan (CLS)
• Teknik SEO: mobilde daha hızlı sayfalar, Google'ın anladığı bir format ve potansiyel olarak SVG içinde bulunan metin

PNG vs SVG: Bir logonun ağırlığı önemsiz değildir

Görseller hala bir sayfanın en büyük ağırlık kalemlerinden biridir. Fotoğrafları WebP olarak optimize ediyoruz, ancak başlık logosunu ve CSS'deki yirmi PNG ikonunu unutuyoruz. Oysa bu dosyalar tüm URL'lerde tekrarlanır: kaybedilen her milisaniye tüm site genelinde kaybedilmiş sayılır.

PixelToPath ile vektörleştirildikten sonra vitrin site veya web uygulaması tipik senaryosu üzerinden gözlemlenen boyutlar:

Senaryo	PNG / JPG	SVG
Şeffaf 512 px logo	40-80 KB	Renk ve düğüm sayısına göre 2-12 KB
Retina için @2x (1024 px) olarak sunulan aynı logo	Ağırlık iki katına, hatta üç katına çıkar	Tek dosya, değişmeden
@3x (72×72) olarak dışa aktarılan 20 arayüz simgesi	40-160 KB fazla	Toplamda yalnızca birkaç KB
JPG'den gelen düz renkli logo	Şekillerin ve metnin çevresinde artefaktlar ve haleler	Temiz kenarlar ve daha da hafif bir dosya

Kural basit: Şekil, metin, piktogram veya logotip olan her şey SVG olmaktan fayda sağlar. Fotoğraflar ve ekran görüntüleri JPG, WebP veya AVIF olarak kalır. SVG evrensel bir alternatif değildir: arayüz için doğru formattır.

Ölçeklenebilirlik: Akıllı telefondan 4K'ya net bir dosya

PNG yalnızca kendi doğal çözünürlüğünde nettir. Büyütüldüğünde pikselleri görürüz. Sert bir şekilde küçültüldüğünde tarayıcı yeniden örneklemelidir. @1x, @2x, @3x dosyalarının, srcset ve CSS yoğunluklarının jimnastiği buradan gelir. Her yeni kırılma noktası veya yeni ekran yoğunluğu (Retina, yeni telefonlar, 4K monitörler) yeni bir dışa aktarma veya "ne olur ne olmaz" diye çok büyük bir dosya gerektirir.

SVG bu kısıtlamayı göz ardı eder. Oluşturma motoru, eğrileri istenen CSS boyutunda hesaplar. 32 px Favicon, navigasyonda 48 px logo, başlıkta 400 px olarak aynı marka, 4K projeksiyon: hepsi aynı dosya. Bulanıklık yok, tırtıklanma yok, yüksek yoğunluklu versiyon için ikinci bir istek yok. Bir bileşen kitaplığı için bu aynı zamanda daha az teknik borç demektir: bir ikon, bir dosya, tüm boyutlar.

Core Web Vitals ve SEO: Google neden formatı önemsiyor?

Mobil hız bir sıralama faktörüdür. Core Web Vitals (LCP, INP, CLS) kullanıcının ne hissettiğini ölçer. Ağır bir PNG logosunu veya bir dizi raster ikonunu SVG'lerle değiştirmek, bir sayfayı 4 MB'den 40 KB'ye düşürmez. Ancak sitenin arayüzünde, özellikle 4G ağında veya başlık logosuna takılmış bir LCP'de etkisi anında görülür.

Somut olarak, vektör formatı, çizimin karmaşıklığı konusunda makul kalması koşuluyla üç metriğe yardımcı olur:

• LCP (Largest Contentful Paint): Görünen en büyük öğe bir logo veya düz bir illüstrasyonsa, birkaç KB'lık bir SVG, 150 KB'lık bir PNG @2x'den daha erken gelir. Sayfanın geri kalanı için daha az ağ çekişmesi
• CLS (Cumulative Layout Shift): width, height ve viewBox değerlerine sahip bir SVG, HTML analizinden itibaren kutusunu ayırır. Oranı öğrenmek için artık bir bitmapin şifresinin çözülmesini beklemenize gerek yok, bu nedenle daha az düzen kayması yaşanır
• INP ve ana iş parçacığı (main thread): Basit bir SVG'yi (logo, ikon) boyamak az maliyetlidir. Öte yandan, binlerce yola sahip "fotoğraf" SVG'lerinden kaçının: Bir PNG'den daha ağır olabilirler ve işlemciyi yorabilirler. Bu yüzden piksel piksel bir kopya değil, PixelToPath aracılığıyla temiz bir izleme önemlidir
• Hızın ötesinde SEO: Google, SVG'leri dizine ekler. Gömülü bir logo erişilebilir bir başlık (title) taşıyabilir. alt niteliğine sahip bir SVG görüntüsü hala temel kuraldır. Ve daha hafif bir sayfa, sıralamanın dikkate aldığı deneyim sinyali olan teknik hemen çıkma oranını düşürür

Gerçek bir sitede SVG'nin PNG/JPG'yi yendiği yerler

Bu teorik değil. İşte vektör formatının anında karşılığını verdiği yerler:

• Başlık ve altbilgi logosu: tek bir dosya, Retina'da net, genellikle en çok görülen öğelerden biri ve bazen minimalist bir ana sayfadaki LCP
• İkon sistemi: Artık PNG 1x/2x sprite'ları yok. Her piktogram, yeni bir dışa aktarma olmadan CSS'de (currentColor) şekillendirilebilir bir SVG'dir (veya SVG sprite)
• Favicon ve apple-touch: modern bir favicon SVG'si ve yedek PNG, sürdürülmesi gereken 16, 32, 180 piksellik bir dizi boyuttan kurtarır
• Arayüz illüstrasyonları ve boş durumlar (empty states): vektörleştirilmiş düz çizimler, bir başlık resminin ağırlığına mal olmadan tam ekranda net kalır
• SEO açılış sayfası: arayüz tasarımından tasarruf edilen her KB, sıralamanın topladığı sinyaller olan Lighthouse, PageSpeed Insights ve mobil deneyimini iyileştirir

Fotoğraflar için JPG/WebP kullanmaya devam edin. Logoları, piktogramları ve düz illüstrasyonları SVG'ye geçirin. En hızlı sitelerin zaten uyguladığı dağılım budur.