20 – Html Picture Elemanı

html picture elemanı web sayfalarının farklı cihaz ve çözünürlüklerde farklı resimler göstermesini sağlar.

Küçük bir ekranda büyük bir resim göstermek kaynak israfı ve performans kaybına sebep olur. Bu sebepten dolayı farklı çözünürlükler için farklı boyutlarda resim kullanabiliriz.

<picture> </picture> etiketleri içerisinde <source media=”(çözünürlük)” srcset=”resimyolu”> şeklinde resimler tanımlanır.

Şartlarımıza uymadığı durumlarda gösterilmesi için varsayılan olarak içerisine bir resim de tanımlıyoruz.

<picture>
  <source media="(max-width: 300px)" srcset="resim/picture-kedi-300px.jpg">
  <source media="(max-width: 445px)" srcset="resim/picture-kedi-445px.jpg">
  <img src="resim/picture-kedi-800px.jpg" style="width:auto;">
</picture>

Bu örnekte maximum 300px genişliğine kadar 300px boyutunda bir fotoğraf gösterilmesini istedim. Bir sonraki aşamada 445px e kadar bir fotoğraf ve daha sonrası için 800px’lik bir foto kullandım.

burada min-width ile de kullanılabilir. Örneğin minumum 600px e kadar bir fotoğraf, 400px e başka bir fotoğraf koyabilirsiniz.

Bir diğer kullanım şekli farklı formatlarda resim kullanılabilir. Tarayıcı desteklediği ilk resmi gösterecektir.

 <picture>
  <source srcset="resim/kedi.jpg">
  <source srcset="resim/kedi.webp">
  <img src="resim/kedi.png" style="width:auto;">
 </picture>

Yukarıda ki örnekte tarayıcılarımız bu formatları desteklemekte. Bu yüzden ilk resmi gösterecektir.