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