Görsel optimizasyonu

srcset, sizes, loading, decoding ve width/height ile optimize görseller yazarsın.

Görsel optimizasyonu: altı öznitelik

Haber sayfasında görseller genelde en büyük yüktür. <img>'ye altı öznitelik eklemek hem LCP hem CLS ölçütlerini iyileştirir:

src: yedek görsel yolu.
srcset: farklı genişlikte kaynak listesi.
sizes: her görüntü alanı için genişlik ipucu.
width / height: yer ayrılır, CLS düşer.
loading="lazy": ekran dışı görseli geciktirir.
decoding="async": kod çözmeyi ana iş parçacığından ayırır.

srcset ve sizes nasıl çalışır?

srcset, görselin farklı genişlikte sürümlerini listeler: dosya-480.webp 480w, dosya-960.webp 960w. w son eki piksel genişliği belirtir.

sizes, her görüntü alanı için görselin ne kadar yer kaplayacağını söyler: (max-width: 600px) 100vw, 50vw. Mobilde tam genişlik, masaüstünde yarım genişlik.

Tarayıcı bu iki bilgiyi birleştirir ve cihaz için en uygun kaynağı seçer. Böylece büyük görsel küçük ekrana gönderilmez; bant genişliği tasarrufu olur.

Uygulama main içine optimize görsel ekle

Önceki dersin header içeren body'sini al. <header>'dan sonra bir <main> ekle; içine bir <article> koy. Article'ın içine h2 (örnek Borsa rekor tazeledi) ve bir <img> ekle. img şu öznitelikleri taşısın: src (https://cdn.hizlihaber.com/kapak/ana-haber-960.webp), srcset (480w, 960w, 1440w), sizes ((max-width: 600px) 100vw, 50vw), width="960", height="540", alt (açıklama), loading="lazy" ve decoding="async".

Örnek çözümü göster

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hızlı Haber - Ana sayfa</title>
    <link rel="preconnect" href="https://cdn.hizlihaber.com">
    <link rel="dns-prefetch" href="https://cdn.hizlihaber.com">
    <link rel="preload" as="image" href="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp">
  </head>
  <body>
    <header>
      <h1>Hızlı Haber</h1>
      <p>Türkiye'nin hızlı haber kaynağı</p>
    </header>
    <main>
      <article>
        <h2>Borsa rekor tazeledi</h2>
        <img src="https://cdn.hizlihaber.com/kapak/ana-haber-960.webp"
             srcset="https://cdn.hizlihaber.com/kapak/ana-haber-480.webp 480w,
                     https://cdn.hizlihaber.com/kapak/ana-haber-960.webp 960w,
                     https://cdn.hizlihaber.com/kapak/ana-haber-1440.webp 1440w"
             sizes="(max-width: 600px) 100vw, 50vw"
             width="960" height="540"
             alt="Borsa ekranında yükselen grafik"
             loading="lazy" decoding="async">
      </article>
    </main>
  </body>
</html>

Kendini test et

Ekranın altındaki görseli geciktirmek için loading değerine ne yazılır?
- loading="eager"
- loading="lazy"
- loading="defer"
- loading="async"
Cevabı göster

loading="lazy" — Doğru. loading="lazy" görseli yalnızca görünür alana yaklaştığında yükler.

decoding özniteliğini tamamla

<img src="kapak.webp" width="960" height="540" alt="Grafik" decoding="____">

Cevabı göster

<img src="kapak.webp" width="960" height="540" alt="Grafik" decoding="async">

Özniteliği rolüyle eşleştir

srcset

Farklı genişlikte kaynak listesi
sizes

Görüntü alanı ipucu
width + height

CLS'i azaltır
loading="lazy"

Ekran dışını geciktirir

Sıradaki ders: Şablon ve noscript

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler