Ö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
srcset
özelliği tarayıcıya ________ verirken <picture>
öğesi, ________ değerini verir.
<picture>
öğesinin bazı özellikleri şunlardır:
avif
veya webp
dosyalarını indirmek daha kolay.