İçeriğe geç

Rehber

Büyük görselde srcset yok: her cihaza aynı dosyayı göndermek

Büyük bir görsel yalnızca tek boyutta sunuluyorsa telefonlar da masaüstü için hazırlanmış dosyayı indirir. srcset ile cihaza uygun boyutu sunmayı anlatıyoruz.

2 dk okumaOrta seviyeGeçerlilik dönemi: 2026 Eylül itibarıyla
Büyük görselde srcset yok: her cihaza aynı dosyayı göndermek — editoryal kapak görseli

Ana sayfanın 2400 piksellik kahraman görseli, 390 piksellik bir telefona da aynı boyutta gönderiliyor.

KTYAPTECH SEO Analyzer bu sorunu IMG-NO-RESPONSIVE-SRCSET-001 koduyla, “Büyük görselin duyarlı kaynakları yok” 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.

Duyarlı kaynakları olmayan büyük görsel nedir?

srcset niteliği, aynı görselin farklı genişliklerdeki sürümlerini tarayıcıya bildirir; sizes ise görselin sayfada kaplayacağı genişliği söyler. Tarayıcı ekran boyutu ve piksel yoğunluğuna göre en uygun dosyayı seçer.

SEO Analyzer, büyük bir görselin srcset olmadan tek boyutta sunulduğunu tespit ettiğinde bu bulguyu verir.

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

Mobil cihazlar gereksiz büyük dosyalar indirir; bu, LCP'yi uzatır ve veri tüketimini artırır.

Sorun nasıl tespit edilir?

  • SEO Analyzer raporundaki “Büyük görselin duyarlı kaynakları yok” bulgusunu inceleyin.
  • Görselin HTML'inde srcset niteliği olup olmadığını kontrol edin.
Duyarlı kaynakları olmayan büyük görsel: yanlış ve doğru uygulamanın karşılaştırması
Duyarlı kaynakları olmayan büyük görsel: sorunlu durum ve doğru uygulama yan yana.

Adım adım çözüm

  1. Büyük görsellerin birkaç genişlikte sürümünü üretin.
  2. srcset ile bu sürümleri, sizes ile gösterim genişliğini belirtin.
  3. Sanat yönetimi (mobilde farklı kırpım) gerekiyorsa <picture> kullanın.
  4. CMS veya framework görsel bileşenlerini kullanarak süreci otomatikleştirin.

WordPress ve Next.js

WordPress yüklenen görseller için otomatik boyutlar ve srcset üretir; Next.js Image bileşeni de srcset'i otomatik oluşturur. Özel temalarda bu özelliklerin devre dışı kalmadığından emin olun.

Duyarlı kaynakları olmayan büyük görsel için düzeltme örneği
Tarayıcı ekrana uygun dosyayı seçer.

Sık yapılan hatalar

  • sizes niteliğini unutmak.
  • Yalnızca küçük sürüm üretip yüksek yoğunluklu ekranları bulanık bırakmak.

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

  • Mobil emülasyonda indirilen görsel boyutunu kontrol edin.
  • SEO Analyzer'ı yeniden çalıştırın.

Sık sorulan sorular

Kaç farklı boyut üretmeliyim?

Genellikle 3–4 boyut (ör. 640, 1024, 1600, 2400) çoğu cihazı kapsar.

Küçük görseller için de gerekli mi?

Gösterim boyutu zaten küçükse gerek yoktur.

Özet

Büyük görselleri birkaç genişlikte üretip srcset ve sizes ile sunun; tarayıcının her cihaza uygun dosyayı seçmesini sağlayı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.

Kategoriler

Etiketler

Kaynaklar

  1. MDN — Duyarlı görseller
  2. Chrome for Developers — Görselleri uygun şekilde boyutlandırın

Paylaş