Base64 (data URI) görseller: HTML'e gömülü büyük görseller neden yavaşlatır?

Bir sayfa oluşturucu eklentisi, kahraman görselini base64 olarak doğrudan HTML'e gömmüş. HTML belgesi 1,5 MB'a çıkmış ve her ziyarette görsel yeniden indiriliyor.

KTYAPTECH SEO Analyzer bu sorunu IMG-LARGE-DATA-URI-001 koduyla, “Büyük gömülü data URI görseli” başlığı altında ve düşük önem derecesiyle raporlar (Görseller). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Büyük data URI görseli nedir?

data URI, bir dosyanın içeriğini (genellikle base64 kodlu) doğrudan HTML veya CSS içine yazmaktır: src="data:image/png;base64,iVBOR...". Base64 kodlama dosya boyutunu yaklaşık üçte bir oranında artırır.

Neden önemli? SEO ve kullanıcı deneyimine etkisi

Büyük gömülü görseller HTML'i şişirir, ayrıştırmayı yavaşlatır, ayrı dosya olarak önbelleğe alınamaz ve her sayfada tekrar indirilir. LCP görseli gömülüyse tarayıcı onu önceliklendiremez. Google Görseller de bu görselleri ayrı bir kaynak olarak dizine ekleyemez.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Büyük gömülü data URI görseli” bulgusunu inceleyin.
• HTML ve CSS dosyalarında data:image ifadesini arayıp uzunluğuna bakın.

Adım adım çözüm

1. Büyük gömülü görselleri ayrı dosyalara çıkarın ve normal <img> ile yükleyin.
2. Görselleri modern biçimde ve doğru boyutta kaydedin.
3. data URI'yi yalnızca çok küçük (birkaç yüz bayt) ve kritik görseller için kullanın.
4. İkonlar için SVG veya SVG sprite tercih edin.
5. Sayfa oluşturucu veya eklentinin görselleri gömme ayarını kapatın.

Ne zaman gömmek mantıklı?

Çok küçük bir yer tutucu görsel (ör. bulanık önizleme) veya tek bir küçük ikon için ek istekten kaçınmak faydalı olabilir. Birkaç kilobaytın üzerindeki görseller ayrı dosya olmalıdır.

Sık yapılan hatalar

• Her ikonu base64 ile CSS'e gömmek.
• LCP görselini gömmek.

Düzeltmeyi nasıl doğrularsınız?

• HTML boyutunun düştüğünü ölçün.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Base64 isteği azaltmaz mı?

Azaltır, ama HTTP/2 ve HTTP/3 ile ek isteklerin maliyeti düştü; büyük dosyalarda boyut artışı ve önbellek kaybı daha pahalıdır.

Gömülü SVG de sorun mu?

Küçük ikonlar için değil; büyük ve her sayfada tekrarlanan SVG'ler ise HTML'i şişirir.

Özet

Büyük görselleri HTML'e gömmeyin; ayrı, önbelleklenebilir dosyalar olarak sunun. data URI'yi yalnızca çok küçük görseller için kullanın.

Sitenizde bu ve benzeri sorunların olup olmadığını görmek için KTYAPTECH Ücretsiz SEO Analizi aracını kullanabilirsiniz: rapordaki her bulgunun yanında, sorunu anlatan çözüm rehberine giden bir bağlantı bulunur.