Resim öğesi

Önceki modülde, srcset özelliğinin aynı resmin farklı boyuttaki sürümlerini sağlamanıza nasıl olanak tanıdığını gördük. Ardından tarayıcı, hangi sürümün kullanılacağına karar verebilir. Resmi tamamen değiştirmek istiyorsanız picture öğesine ihtiyacınız vardır.

srcset öğesinin src özelliğini temel aldığı gibi, picture öğesi de img öğesini temel alır. picture öğesi, bir img öğesinin etrafını sarmalar.

<picture>
  <img src="image.jpg" alt="A description of the image.">
</picture>

picture öğesinin içinde iç içe yerleştirilmiş bir img öğesi yoksa picture öğesi çalışmaz.

srcset özelliğinde olduğu gibi picture öğesi, söz konusu img öğesindeki src özelliğinin değerini günceller. Aralarındaki fark, srcset özelliğinin tarayıcıya öneri verdiği yerde picture öğesinin komutları vermesidir. Böylece kontrol sizde olur.

source

Bir picture öğesi içinde her biri kendi srcset özelliğine sahip birden fazla source öğesi belirtebilirsiniz. Daha sonra tarayıcı, çalıştırabildiği ilk dosyayı yürütür.

Resim biçimleri

Bu örnekte, üç farklı biçimde üç farklı resim gösterilmektedir:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

İlk source öğesi, yeni AVIF biçimindeki bir resmi işaret eder. Tarayıcı, AVIF resimlerini oluşturabiliyorsa bu resim dosyasını seçer. Aksi takdirde sonraki source öğesine geçer.

İkinci source öğesi, WebP biçimindeki bir resmi işaret eder. Tarayıcı, WebP resimlerini oluşturabiliyorsa bu resim dosyasını kullanır.

Aksi takdirde tarayıcı, img öğesinin src özelliğindeki resim dosyasını kullanır. Bu resim bir JPEG.

Bu, geriye dönük uyumluluktan ödün vermeden yeni resim biçimlerini kullanmaya başlayabileceğiniz anlamına gelir.

Bu örnekte, type özelliği, tarayıcıya ne tür resim biçiminin belirtildiğini bildirir.

Resim boyutları:

Resim biçimleri arasında geçiş yapmanın yanı sıra resim boyutları arasında da geçiş yapabilirsiniz. Tarayıcıya resmin ne genişlikte gösterileceğini bildirmek için media özelliğini kullanın. media özelliğine bir medya sorgusu ekleyin.

<picture>
  <source srcset="large.png" media="(min-width: 75em)">
  <source srcset="medium.png" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." 
    width="300" height="200" loading="lazy" decoding="async">
</picture>

Burada tarayıcıya, görüntü alanı genişliği 75em değerinden genişse büyük resmi kullanması gerektiğini bildiriyorsunuz. 40em ile 75em arasında tarayıcı orta boy resmi kullanmalıdır. 40em altındaki tarayıcı küçük resmi kullanmalıdır.

Bu, img öğesinde srcset ve sizes özelliklerini kullanmaktan farklıdır. Bu durumda, tarayıcıya öneriler sağlamış olursunuz. source öğesi, bir öneriden çok bir komuta benzer.

Bir source öğesinin srcset özelliğinde piksel yoğunluğu açıklayıcısını da kullanabilirsiniz.

<picture>
  <source srcset="large.png 1x" media="(min-width: 75em)">
  <source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
  <img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
    srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>

Bu örnekte tarayıcıya hâlâ farklı ayrılma noktalarında ne yapması gerektiğini söylersiniz, ancak şimdi tarayıcı, cihazın piksel yoğunluğu için en uygun resmi seçme seçeneğine sahiptir.

Kırpma

Aynı resmin yalnızca farklı boyutlardaki sürümlerini sunmanız gerekiyorsa en iyi seçenek srcset olacaktır. Ancak bir resim daha küçük boyutlarda iyi görünmüyorsa bunun yerine resmin kırpılmış bir versiyonunu oluşturmayı deneyebilirsiniz.

Farklı resimler, bağlamlarına daha iyi uyması için farklı genişlik ve yükseklik oranlarına sahip olabilir. Örneğin, mobil tarayıcıda dar ve uzun bir resim sunarken, masaüstü tarayıcıda geniş ve kısa bir kesim sunmak isteyebilirsiniz.

İçeriğini ve şeklini görüntü alanı genişliğine göre değiştiren bir lokomotif resim örneğini burada bulabilirsiniz. Her source öğesine width ve height özelliklerini ekleyin.

<picture>
  <source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
  <img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>

Resim kaynağına bağlı olarak alt özelliğini değiştiremeyeceğinizi unutmayın. Hem tam boyutlu resmi hem de kırpılmış resmi açıklayan bir alt özelliği yazmanız gerekir.

Büyük olasılıkla picture öğesini duyarlı resimlerinizin çoğu için kullanmanız gerekmez. img öğesindeki srcset ve sizes özellikleri, birçok kullanım alanını kapsar. Ancak picture öğesi, daha ayrıntılı denetime ihtiyacınız olduğunda güçlü bir araçtır.

Her iki çözüme de ihtiyaç duymayabileceğiniz bir tür resim vardır: simgeler. Sırada ne var.

Öğrendiklerinizi sınayın

Resim öğesi hakkındaki bilginizi test edin