Srcset ve sizes

Farklı ekran boyutları için srcset ve sizes kullanırsın.

srcset nedir?

Farklı ekran boyutlarına aynı büyük görseli göndermek hem yavaş hem de veri israfıdır. srcset özniteliği tarayıcıya görselin farklı çözünürlüklerini tanıtır; tarayıcı cihaza göre birini seçer.

Yazımı şöyledir: <img src="orman-k.jpg" srcset="orman-k.jpg 480w, orman-o.jpg 800w, orman-b.jpg 1200w" alt="...">. Buradaki w son eki görselin gerçek genişliğini piksel cinsinden söyler.

sizes özniteliği

sizes özniteliği görselin ekranda ne kadar yer kaplayacağını söyler. Tarayıcı, srcset içindeki adaylar arasından buna göre seçer.

Örnek: sizes="(max-width: 600px) 100vw, 50vw". Bu, 600 pikselden dar ekranlarda görselin tam genişlikte, daha geniş ekranlarda ise yarım genişlikte gösterileceğini anlatır. vw görünür alanın yüzde birimidir.

Uygulama Duyarlı hero görseli yaz

Body içine tek bir <img> ekle. Bu img'de şunlar bulunsun: src (örnek /gorseller/orman.jpg), srcset (en az iki dosya genişlikw girişi), sizes (bir medya koşulu içeren, örn. (max-width: 600px) 100vw, 50vw) ve boş olmayan alt.

Örnek çözümü göster

<body>
  <img src="/gorseller/orman.jpg"
       srcset="/gorseller/orman-k.jpg 480w,
               /gorseller/orman-o.jpg 800w,
               /gorseller/orman-b.jpg 1200w"
       sizes="(max-width: 600px) 100vw, 50vw"
       alt="Orman manzarası">
</body>

Kendini test et

srcset için doğru sözdizimi hangisi?
- srcset="kucuk.jpg 480w, orta.jpg 800w"
- srcset="kucuk.jpg, orta.jpg, buyuk.jpg"
- srcset="480w kucuk.jpg, 800w orta.jpg"
- srcset="kucuk.jpg; orta.jpg; buyuk.jpg"
Cevabı göster

srcset="kucuk.jpg 480w, orta.jpg 800w" — Doğru. Her giriş 'dosya genişlikw' biçiminde olmalı.

sizes değerini tamamla

<img src="/gorseller/orman.jpg" srcset="/gorseller/orman-k.jpg 480w, /gorseller/orman-b.jpg 1200w" ____ alt="Orman">

Cevabı göster

<img src="/gorseller/orman.jpg" srcset="/gorseller/orman-k.jpg 480w, /gorseller/orman-b.jpg 1200w" sizes="(max-width: 600px) 100vw, 50vw" alt="Orman">

Terimi anlamıyla eşleştir

srcset

Çözünürlük adayları
sizes

Görünür genişlik
w

Piksel genişlik
vw

Görünür alan yüzdesi
Tarayıcı srcset'ten bir görseli nasıl seçer?
- En küçük dosyayı seçer
- En büyük dosyayı seçer
- Tüm dosyaları sırayla yükler
- sizes ve cihaza göre en uygun olanı seçer
Cevabı göster

sizes ve cihaza göre en uygun olanı seçer — Doğru. Tarayıcı sizes değerine ve cihazın piksel yoğunluğuna bakar.

Sıradaki ders: Width/height ve CLS

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler