Resim öğesi

Önceki modülde, srcset özelliğinin aynı resmin farklı boyutlu sürümlerini sağlamanıza nasıl olanak sağladığı gösterildi. Böylece tarayıcı kullanılacak doğru sürümün hangisi olduğuna karar verebilir. Resmi tamamen değiştirmek istiyorsanız picture öğesine ihtiyacınız olacaktır.

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

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

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

srcset özelliğinde olduğu gibi, picture öğesi de bu img öğesindeki src özelliğinin değerini günceller. Aradaki fark, srcset özelliğinin tarayıcıya öneri sunduğu durumlarda, picture öğesinin komut vermesidir. Bu, kontrol sahibi olmanızı sağlar.

source

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

Resim biçimleri

Bu örnekte, üç farklı biçimde üç farklı resim vardır:

<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 ediyor. Tarayıcı AVIF resimlerini oluşturabiliyorsa bu, seçtiği resim dosyasıdır. Aksi takdirde, sonraki source öğesine geçer.

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

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

Bu sayede, geriye dönük uyumluluktan ödün vermeden yeni resim biçimlerini kullanmaya başlayabilirsiniz.

Bu örnekte type özelliği, tarayıcıya ne tür bir resim biçimi 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 kadar genişlikte gösterileceğini belirtmek için media özelliğini kullanın. media özelliğinin içine bir medya sorgusu girin.

<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ının genişliği 75em değerinden geniş olduğunda büyük resmi kullanması gerektiğini söylersiniz. 40em ile 75em arasında, tarayıcının orta boy resmi kullanması gerekir. 40em değerinin altındaki tarayıcı küçük resmi kullanmalıdır.

Bu, img öğesinde srcset ve sizes özelliklerinin kullanılmasından farklıdır. Bu durumda, tarayıcıya öneriler sunarsınız. source öğesi bir öneriden çok komuta benzer.

Piksel yoğunluğu tanımlayıcısını bir source öğesinin srcset özelliğinde de 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 farklı ayrılma noktalarında ne yapacağını söylemeye devam edersiniz, ancak artık tarayıcının cihazın piksel yoğunluğu için en uygun resmi seçme seçeneği vardır.

Kırpma

Yalnızca aynı resmin farklı boyutlardaki sürümlerini yayınlamanız gerekiyorsa en iyi seçenek srcset olacaktır. Ancak, resim daha küçük boyutlarda iyi görünmüyorsa bunun yerine resmin kırpılmış bir sürümünü oluşturmayı deneyebilirsiniz.

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

İçeriğini ve şeklini görüntü alanı genişliğine göre değiştiren bir hero resim örneğini burada bulabilirsiniz. Her bir source öğesine width ve height özellikleri 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.

Muhtemelen duyarlı resimlerinizin çoğu için picture öğesini kullanmanız gerekmez. img öğesinin srcset ve sizes özellikleri birçok kullanım alanını kapsar. Ancak daha ayrıntılı kontrole ihtiyaç duyduğunuz durumlarda picture öğesi güçlü bir araçtır.

Her iki çözüme de ihtiyaç duymayacağınız bir tür resim vardır: simgeler. Sıradaki adım.

Öğrendiklerinizi sınayın

Resim öğesi hakkındaki bilginizi test edin