HTML picture Etiketi

HTML öğesi, farklı cihazlar veya ekran boyutları için farklı resimler görüntülemenize olanak tanır.

HTML <picture> Öğesi

HTML <picture> öğesi, web geliştiricilerine görüntü kaynaklarını belirlemede daha fazla esneklik sağlar.

<picture> öğesi, her biri srcset niteliği aracılığıyla farklı görüntülere atıfta bulunan bir veya daha fazla <source> öğesi içerir. Bu şekilde tarayıcı mevcut görünüme ve/veya cihaza en uygun görseli seçebilir.

<picture>
  <source media="(min-width: 650px)" srcset="650gorsel.jpg">
  <source media="(min-width: 465px)" srcset="465gorsel.jpg">
  <img src="arka.jpg">
</picture>

Not: Her zaman öğesinin son alt öğesi olarak bir <picture> öğesi belirtilmelidir.<img> öğesi, <picture>öğesini desteklemeyen tarayıcılar tarafından veya <source> etiketlerinden hiçbiri eşleşmiyorsa kullanılır.

<picture> Ne Zaman Kullanılmalıdır?

<picture> etiketinin iki ana amacı vardır.

1-Bant Genişliği

Küçük bir ekran veya cihaz varsa büyük bir görüntü dosyasının yüklenmesine gerek yoktur. Verdiğiniz özelliklerle eşleşen tarayıcılarda source etiketi kullanılacak ve diğer durumlar gözardı edilecektir.

2-Format Desteği

Bazı tarayıcılar veya cihazlar bütün resim formatlarını desteklemeyebilir. <picture> etiketi kullanılarak tüm formattaki görseller eklenebilir, tarayıcı desteklediği ilk formatı kullanır ve diğer durumları gözardı eder.

<picture>
  <source srcset="avatar.png">
  <source srcset="resim.jpg">
  <img src="diğer.gif" alt="Diğer Görsel" style="width:auto;">
</picture>

Not : Tarayıcı eşleşen ilk source özelliğini kullanacak ve sonraki source özelliklerini yok sayacaktır.

18 Ekim 2023
Was this article helpful?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir