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.