Picture ve source

<picture> ve <source> ile görsel seçimini öğrenirsin.

Picture ne işe yarar?

Önceki derslerde <img> ve srcset ile aynı görselin farklı çözünürlüklerini sunmayı gördün. Peki ya mobilde başka bir kare, masaüstünde başka bir kare göstermek istersen? İşte <picture> bunun için.

<picture> bir kapsayıcıdır; içine <source> etiketleri ve sonunda bir <img> koyarsın. Tarayıcı source'ları sırayla dener, uygun olanı seçer; hiçbiri uymazsa <img>'yi gösterir. Böylece art direction (kare seçimi) yapabilirsin.

Source etiketi ve img yedek

<source> tek başına bir şey göstermez; <picture> içinde çalışır. En sık iki öznitelik alır: srcset görsel yolunu, media ise ekran koşulunu belirtir.

Önemli nokta: <picture>'nin son çocuğu her zaman bir <img> olmalıdır. Bu <img>, hiçbir source uygun olmadığında gösterilir; ayrıca tarayıcı <img>'nin alt metnini ve boyutlarını kullanır. Yani asıl erişilebilirlik ve yedek <img>'den gelir.

Media ile source seçimi

Birden çok <source> yazınca tarayıcı bunları yukarıdan aşağı dener. Her birine bir media özniteliği verirsen, ekran koşuluna uyan ilk source seçilir.

Örneğin <source media="(min-width: 800px)" srcset="genis.jpg"> yazarsan, ekran 800 pikselden genişse bu kaynak kullanılır; değilse tarayıcı bir sonrakine geçer. Bu, mobilde dikey bir kare, masaüstünde yatay bir manzara göstermek için idealdir.

Uygulama Picture, source ve img yaz

Body içine bir <picture> ekle. İçine bir <source> koy ve srcset özniteliğine manzara-genis.jpg yaz. Sonra bir <img> ekle; src özniteliği manzara-dar.jpg, alt özniteliği Dağ manzarası olsun.

Örnek çözümü göster

<body>
  <picture>
    <source srcset="manzara-genis.jpg">
    <img src="manzara-dar.jpg" alt="Dağ manzarası">
  </picture>
</body>

Kendini test et

<picture> etiketinin temel amacı nedir?
- Sayfaya arka plan görseli eklemek
- Görseli sıkıştırıp boyutunu küçültmek
- Farklı kaynaklardan uygun görseli seçmek
- Görselin renklerini otomatik düzeltmek
Cevabı göster

Farklı kaynaklardan uygun görseli seçmek — Doğru. picture, farklı kaynaklar arasından uygun görseli seçmeyi sağlar.

Picture içine source yaz

<picture>
  <____ srcset="manzara-genis.jpg">
  <img src="manzara-dar.jpg" alt="Dağ manzarası">
</picture>

Cevabı göster

<picture>
  <source srcset="manzara-genis.jpg">
  <img src="manzara-dar.jpg" alt="Dağ manzarası">
</picture>

Etiketi rolüyle eşleştir

<picture>

Görsel seçim kapsayıcısı
<source>

Kaynak ve koşul tanımı
<img>

Son yedek görsel
srcset

Görsel yolu

Sıradaki ders: Media özniteliği

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler