<picture> öğesi, kendi başına hiçbir şeyi oluşturmaz, bunun yerine dahili bir <img> öğesi için karar motoru görevi görür:
ve ne oluşturacağını söylüyor. <picture>, <audio> ve <video> öğeleri tarafından önceden ayarlanmış bir önceliği takip eder: bir sarmalayıcı öğesi
içeren bir diğer alt öğedir.<source>
<picture>
<source …>
<source …>
<img …>
</picture …>
Bu iç <img>, duyarlı resimleri desteklemeyen eski tarayıcılar için güvenilir bir yedek kalıp da sağlar:
<picture> öğesi kullanıcının tarayıcısı tarafından tanınmazsa yoksayılır. Daha sonra <source> öğeleri de silinir.
tarayıcı bunları hiç tanımayacaktır veya bir <video> ya da <audio> üst öğesi olmadan bunlar için anlamlı bir bağlama sahip olmayacaktır.
Ancak, iç <img> öğesi tüm tarayıcılar tarafından tanınır ve src öğesinde belirtilen kaynak beklendiği gibi oluşturulur.
"Sanat yönetimi" <picture> içeren resimler
Bir görselin içeriğinde veya en boy oranında, sayfadaki görselin boyutuna göre değişiklik yapmaya genel olarak "resim odaklı" denir.
duyarlı resimler kullanır. srcset ve sizes görünmez olarak çalışacak şekilde tasarlanmıştır ve kullanıcının tarayıcısının belirlediği zamanlarda kaynakları sorunsuz bir şekilde değiştirir.
Bununla birlikte, sayfa düzenlerini uyarladığınız gibi içeriği daha iyi vurgulamak için ayrılma noktalarında kaynakları değiştirmek isteyebilirsiniz.
Örneğin: Küçük bir merkezi odağı olan tam genişlikte bir üst bilgi resmi, geniş bir görüntü alanında iyi performans gösterebilir:
Ancak küçük görüntü alanlarına uyacak şekilde küçültüldüğünde, resmin odak noktası kaybolabilir:
Bu görsel kaynaklarının öznesi aynıdır ancak görsel olarak bu konuya daha iyi odaklanmak için ayrılma noktalarında değiştirilecek resim kaynağının oranlarını. Örneğin, resmin merkezine daha yakın bir yakınlaştırma yapabilir ve kenarlardaki bazı ayrıntılar kırpılmış:
Bu tür bir "kırpma" işlemi CSS aracılığıyla sağlanabilir ancak kullanıcı, söz konusu resmi oluşturan tüm verileri ister. ancak bunu hiçbir zaman görmeyebilirler.
Her source öğesinin, söz konusu source: media seçiminin koşullarını tanımlayan özellikleri vardır. Bu özellikler
medya sorgusu ve type medya türünü (eski adıyla "MIME türü") kabul eder. Kaynaktaki ilk <source>
kullanıcının mevcut tarama bağlamıyla eşleştirmek üzere sıralama seçilir ve ilgili source öğesindeki srcset özelliğinin içeriği
uygun adayların belirlenmesinde kullanılır. Bu örnekte, media özelliğine sahip ilk source
kullanıcının görüntü alanı boyutuyla eşleşen boyut seçilir:
<picture>
<source media="(min-width: 1200px)" srcset="wide-crop.jpg">
<img src="close-crop.jpg" alt="…">
</picture>
source öğelerinden hiçbiri media veya type ile eşleşmiyorsa sırayla iç img öğesini her zaman en sonda belirtmeniz gerekir
ölçütlerine göre resim "varsayılan" olarak
kaynak. min-width medya sorgusu kullanıyorsanız en büyük
kaynaklarda belirtilen bir değer girin. max-width medya sorgularını kullanırken en küçük kaynağı önce yerleştirmeniz gerekir.
<picture>
<source media="(max-width: 400px)" srcset="mid-bp.jpg">
<source media="(max-width: 800px)" srcset="high-bp.jpg">
<img src="highest-bp.jpg" alt="…">
</picture>
Belirttiğiniz ölçütlere göre bir kaynak seçildiğinde source üzerindeki srcset özelliği
<img> öğesi <img> üzerinde tanımlanmış gibi görünür. Bu nedenle, sanat odaklı resimleri optimize etmek için sizes uygulamasını kullanabilirsiniz.
kaynaklar da var.
<picture>
<source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
<source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
<img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
</picture>
Elbette, seçilen <source> öğesine bağlı olarak değişebilen oranlara sahip bir resim performans sorununa yol açar:
<img> yalnızca tek bir width ve height özelliğini destekler ancak bu özelliklerin belirtilmemesi, ölçülebilir şekilde daha kötü bir kullanıcı deneyimine yol açabilir.
Bunu hesaba katmak için, nispeten yeni
iyi destekleniyor: HTML'ye ekleme
spesifikasyonu <source> öğelerinde height ve width özelliklerinin kullanılmasına izin veriyor. Bunlar düzen kaymalarını da azaltıyor
<img> üzerinde olduğu gibi, düzeninizde seçilen <source> öğesi için uygun alan ayrılır.
<picture>
<source
media="(min-width: 800px)"
srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
width="1600"
height="800">
<img src="fallback.jpg"
srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
sizes="calc(100vw - 2em)"
width="1200"
height="750"
alt="…">
</picture>
Resimli yönün, görüntü alanı boyutuna göre karar vermekten daha fazlası için kullanılabileceğini ve
bu vakaların çoğu srcset/sizes ile daha verimli bir şekilde ele alınabilir. Örneğin, bir resim kaynağını seçerken
kullanıcının tercihine göre belirlenen renk şemasına uyar:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
<img srcset="hero-light.jpg">
</picture>
type özelliği
type özelliği, yalnızca resim biçimlerini yayınlamak için <picture> öğesinin tek istekli karar motorunu kullanmanıza olanak tanır
ve bunları destekleyen tarayıcılar için kullanılır.
Resim Biçimleri ve Sıkıştırma bölümünde öğrendiğiniz gibi, tarayıcının ayrıştıramadığı bir kodlama, kimlik avı olarak resim verileri.
<picture> öğesi kullanıma sunulmadan önce, yeni resim biçimleri sunmak için en uygun kullanıcı arabirimi çözümleri gerekliydi
tarayıcının bir resim dosyasını kaldırıp bir yedek yükleyip yüklemeyeceğini belirlemeden önce resim dosyasını istemesine ve ayrıştırmayı denemesine olanak tanır. CEVAP
şu satırlara ait bir komut dosyası vardı:
<img src="image.webp"
data-fallback="image.jpg"
onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
alt="...">
Bu kalıpla her tarayıcıda image.webp için istek yapılmaya devam edilir. Bu, tarayıcılar için boşa giden bir aktarım anlamına gelir.
WebP desteği yok. WebP kodlamasını ayrıştıramayan tarayıcılar, bir onerror etkinliği bildirir ve bunun yerine
data-fallback değerini src olarak ayarlayın. Maliyetli bir çözümdü ama tek seçenek bunun gibi yaklaşımlardı
kontrol edebilirsiniz. Herhangi bir özel komut dosyasında
hatta ayrıştırılamadı. Dolayısıyla bu süreci önceden belirleyemedik.
<picture> öğesi, bu gereksiz istekleri önlemek için açıkça tasarlanmıştır. Tarayıcıyı kullanmanın henüz bir yolu olmasa da
type özelliği, Tarayıcı'yı kaynak hakkında uyarır.
en baştan beri yapar, böylece istek gönderip almamaya karar verebilir.
type özelliğinde Medya Türünü (eski adıyla MIME türü) sağlarsınız
Her <source> öğesinin srcset özelliğinde belirtilen resim kaynağının Bu, tarayıcının önceden kullandığı tüm bilgileri
söz konusu source tarafından sağlanan resim adayının harici herhangi bir yazılım olmadan kod çözme işlemi yapıp yapamayacağını derhal belirlemesi gerekir.
isteklerini kullanır. Medya türü tanınmazsa <source> ve tüm adayları göz ardı edilir ve tarayıcı çalışmaya devam eder.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="...">
</picture>
Burada, WebP kodlamasını destekleyen tüm tarayıcılar, type özelliğinde belirtilen image/webp Medya Türü'nü tanır.
<source> öğesini seçin, bu <source> öğesini seçin ve srcset içinde yalnızca tek bir aday sağladığımız için iç
pic.webp isteğinde bulunmak, aktarmak ve oluşturmak için <img>. WebP'yi desteklemeyen tarayıcılar, source ve
Aksi yönde bir talimat olmazsa <img>, src içeriğini 1992'den beri olduğu gibi işleyecektir.
Burada type="image/jpeg" içeren ikinci bir <source> öğesi belirtmeniz gerekmez. JPEG için evrensel desteğin mevcut olduğunu varsayabilirsiniz.
Kullanıcının göz atma bağlamı ne olursa olsun tüm bunlar tek bir dosya aktarımıyla gerçekleştirilir ve
resim kaynaklarını görüntüler. Bu da ileriye dönük bir düşüncedir: Gün geçtikçe daha yeni ve daha verimli dosya biçimleri ortaya çıkacak
Böylece, JavaScript olmadan ve sunucu tarafı olmadan picture sayesinde bunlardan yararlanabileceğiz.
ve <img> hızının
farkında varmışsınızdır.
Duyarlı resimlerin geleceği
Burada ele alınan işaretleme kalıplarının tümü, standartlaştırma açısından ağır bir artıştı: web sitenizin işlevselliğini değiştirmek
web'de <img> kadar köklü ve merkezi bir şeydi. Bu değişikliklerin hedeflediği sorunlar paketi
çok kapsamlı olduğunu gördük. Bu araçlarla ilgili iyileştirme yapılması gereken çok şey olduğunu,
kesinlikle haklısınız. En başından itibaren bu standartlar, geleceğe yönelik olarak bir temel çizgisi oluşturmayı amaçlıyordu.
teknolojik ürünlerdir.
Bu çözümlerin tümü işaretlemeye bağlıdır. Bu nedenle, sunucudan gelen ilk yüke
ve tarayıcının resim kaynaklarını istemesi için vaktinde gelmelidir. Bu, kabul edilen sizes özelliğine yol açan bir sınırlamadır.
Ancak bu özellikler web platformunda kullanıma sunulduğundan, resim isteklerini ertelemek için yerel bir yöntem kullanıma sunuldu.
Ertelemek için loading="lazy" özelliğine sahip <img> öğeleri, sayfanın düzeni öğrenilene kadar istenmez
kullanıcının ilk görüntü alanının dışındaki resim isteklerini, sayfayı oluşturma işleminin ilerleyen aşamalarına kadar
istemem gerekir. Tarayıcı, bu istekler yapıldığı anda sayfa düzenini tam olarak anladığından,
sizes="auto" özelliği, HTML spesifikasyonuna ek olarak önerildi
Böylece, manuel olarak yazılan sizes özelliklerini kullanma zahmetinden kurtulabilirsiniz.
Son derece heyecan verici bazı değişikliklere uyum sağlamak için ufukta <picture> öğesine de eklemeler yapıldı.
biçimimizi değiştiriyoruz. Görüntü alanı bilgileri, üst düzey düzenlere ilişkin kararlar için sağlam bir temel oluştursa da,
geliştirme konusunda tamamen bileşen düzeyinde bir yaklaşım benimsememizi önler.
sayfa düzeninin herhangi bir bölümü (bileşenin kapladığı alana yanıt veren stiller). Bu kaygının
kapsayıcı sorguları oluşturmaya: Stil öğeleri için bir yöntem
üst kapsayıcılarının boyutuna göre
değiştirir.
Kapsayıcı sorgusu söz dizimi dengeli bir hal aldı ve tarayıcı desteği çok sınırlı olsa da
Bunu etkinleştiren tarayıcı teknolojilerinin eklenmesi, <picture> öğesine bir
aynı şeyi yapmak anlamına gelir: bu terimin özelliklerine göre <source> seçim ölçütüne izin veren potansiyel bir container özelliği
görüntü alanının boyutuna göre değil, <picture> öğesinin <img> alanını kaplayacaktır.
Bu da kulağa biraz belirsiz geliyorsa bunun geçerli bir nedeni vardır: Web standartları üzerine yapılan bu tartışmalar devam ediyor ama henüz çözüme kavuşturulmadı. bunları henüz kullanamazsınız.
Duyarlı resim işaretleme, herhangi bir web teknolojisinde olduğu gibi zaman içinde yalnızca daha kolay çalışabilmeyi vaat ediyor. Ancak bununla birlikte, el yazma yükünü hafifletmeye yardımcı olacak hizmetler, teknolojiler ve çerçeveler sunar. Bir sonraki modülde, resim biçimleri, sıkıştırma ve duyarlı resimler hakkında öğrendiğimiz her şeyi modern bir geliştirme iş akışına nasıl entegre edeceğimizi göreceğiz.