1. Sorun format kadar boyuttur

Bir görseli WebP'ye çevirmek faydalı olabilir; fakat 400 piksel genişlikte gösterilen bir alan için 4000 piksel dosya göndermek hâlâ gereksiz maliyet yaratır. Önce görselin gerçek yerleşim boyutunu ve yüksek yoğunluklu ekran ihtiyacını hesapla. Sonra uygun çözünürlükte kaynaklar üret.

Fotoğraf, basit ikon ve şeffaf logo aynı üretim hattına girmek zorunda değildir. Vektör ikonlar SVG ile net kalabilir; fotoğraflar sıkıştırılmış raster dosyalarla sunulabilir. Şeffaf bir marka varlığını dönüştürürken alfa kanalını ve sayfadaki arka planla görünüşünü kontrol et.

2. Tarayıcıya seçim için bilgi ver

srcset farklı genişlikteki dosyaları, sizes ise yerleşimde görselin ne kadar alan kaplayacağını anlatır. Tarayıcı bu bilgilerle ve cihaz koşullarıyla kaynak seçer. sizes gerçek CSS yerleşimini temsil etmezse beklenenden daha büyük veya daha küçük dosya seçilebilir.

Aşağıdaki örnekte küçük ekranda görsel neredeyse tam genişlikte, masaüstünde ise yarım ekran genişliğindedir. Dosya isimleri örnektir; gerçekten üretilmiş dosyaları kullanmak gerekir. Var olmayan alternatifleri HTML'e yazmak performans iyileştirmesi sayılmaz.

HTML
<img
  src="/assets/cover-960.webp"
  srcset="/assets/cover-480.webp 480w, /assets/cover-960.webp 960w"
  sizes="(max-width: 720px) 92vw, 46vw"
  width="960" height="720"
  alt="Gri zeminde turuncu bir klavye tuşu"
>

3. İlk görünen görseli geciktirme

Sayfanın üstündeki ana görsel, okurun gördüğü en büyük içerik olabilir. Bunu loading="lazy" ile geciktirmek ilk görünümü olumsuz etkileyebilir. Sayfanın altındaki içerik görselleri için ise lazy loading gereksiz ilk ağ yükünü azaltabilir. Hangi görselin ne zaman gerektiğini yerleşime göre seç.

fetchpriority="high" sınırlı ve bilinçli kullanılmalıdır. Bütün görsellere yüksek öncelik vermek gerçek öncelik sırasını bulanıklaştırır. Tarayıcı ağ paneli ve performans ölçümüyle ilk görünümde hangi kaynakların yarıştığını incele; bir attribute eklemenin sonucu mutlaka iyileştirdiğini varsayma.

4. Yerleşim sıçramalarını azalt

width ve height bilgisi veya uygun aspect-ratio, görsel gelmeden önce alan ayrılmasını sağlar. Boyut belirtilmediğinde metin önce başka yerde görünür, görsel yüklenince aşağı kayabilir. Bu yalnızca estetik bir sorun değildir; kullanıcı o sırada yanlış bağlantıya basabilir.

object-fit seçimi de önemlidir. cover görseli kırpar; contain bütün görseli gösterirken çerçevede boşluk bırakabilir. Bir ürün fotoğrafında kritik ayrıntı veya bir logoda kenar bilgisi varsa kırpmanın etkisini kontrol et. Dosya varlığını görmek, doğru çerçevelendiğini kanıtlamaz.

5. Ölç, karşılaştır, sonra yayımla

Önce gerçek sayfada görselin indirilen boyutunu ve yüklenme zamanını kaydet. Alternatif sürümü aynı koşullarda karşılaştır; tarayıcı önbelleği nedeniyle ikinci denemenin daha hızlı görünebileceğini hesaba kat. Masaüstü iyi görünürken mobil ağda büyük dosya bekleniyor olabilir.

Kalite kontrolünde ince çizgiler, yazılar, yüzler ve şeffaf kenarlar gibi sıkıştırmaya duyarlı ayrıntılara bak. Daha küçük dosya tek başına başarı değildir. Hedef, gereken görsel kalitesini daha uygun kaynak ve yükleme sırasıyla sunmaktır.

Kaynaklar ve kontrol notu

Bu rehber yapay zekâ desteğiyle hazırlanmış özgün bir editoryal içeriktir. Kaynak kontrolü: 30 Eylül 2026. Örnekleri kendi proje koşullarına uyarlayarak doğrula.

Bir hata fark ettiysen editörlüğe bildir; düzeltmeleri güncelleme tarihiyle işleriz.