Görseller gösterildiklerinden büyük: srcset ve sizes ile doğru boyut

Blog listesindeki küçük kart görselleri, aslında yazının içindeki büyük kapak görseliyle aynı dosya. Kartta 300 piksel gösterilen görsel için 2000 piksellik dosya indiriliyor.

KTYAPTECH SEO Analyzer bu sorunu PERF-OVERSIZED-IMAGES-001 koduyla, “Görseller gösterildiklerinden büyük” başlığı altında ve orta önem derecesiyle raporlar (Performans). Bu rehber, bulgunun ne anlama geldiğini, neden önemli olduğunu ve adım adım nasıl düzeltileceğini anlatıyor.

Gösterildiğinden büyük görseller nedir?

Bu bulgu, bir görselin indirilen piksel boyutunun, sayfada gösterildiği boyuttan (cihaz piksel oranı hesaba katılarak) belirgin şekilde büyük olduğunu gösterir.

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

Gereksiz büyük görseller indirme süresini uzatır, mobil veri harcar ve LCP'yi olumsuz etkiler.

Sorun nasıl tespit edilir?

• SEO Analyzer raporundaki “Görseller gösterildiklerinden büyük” bulgusunda görselleri ve boyut farkını görün.
• PageSpeed Insights'ta “Görselleri uygun şekilde boyutlandırın” önerisine bakın.
• DevTools'ta görselin üzerine gelerek gösterilen ve doğal boyutunu karşılaştırın.

Adım adım çözüm

1. Görselleri farklı genişliklerde (ör. 400, 800, 1600 piksel) üretin.
2. srcset ile bu sürümleri, sizes ile görselin sayfadaki gösterim genişliğini bildirin.
3. Kart ve küçük görünümler için ayrı, küçük boyutlar kullanın.
4. Framework görsel bileşenlerini (Next.js Image, WordPress'in duyarlı görselleri) veya görsel CDN'lerini kullanarak bunu otomatikleştirin.

sizes neden önemli?

srcset tarayıcıya hangi sürümlerin olduğunu, sizes ise görselin ne genişlikte gösterileceğini söyler. sizes verilmezse tarayıcı görselin tam ekran genişliğinde olduğunu varsayar ve gereğinden büyük sürümü seçebilir.

Sık yapılan hatalar

• srcset verip sizes'ı unutmak.
• Aynı büyük dosyayı her yerde kullanmak.

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

• DevTools'ta seçilen görsel sürümünü kontrol edin.
• SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Retina ekranlar için ne kadar büyük olmalı?

Gösterim boyutunun yaklaşık iki katı yeterlidir; srcset ile tarayıcı cihaza göre seçer.

CSS ile küçültmek yetmez mi?

Hayır; dosya yine tam boyutta indirilir.

Özet

Her görseli gösterildiği boyuta uygun sunun. Birden fazla genişlik üretin, srcset ve sizes kullanın ve bu işlemi görsel bileşenleri veya CDN ile otomatikleştirin.

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.