Bu modülde, tarayıcının ne gösterileceğiyle ilgili en iyi kararları vermesi için tarayıcıya nasıl resim seçeneği sunacağınızı öğreneceksiniz. srcset.
, belirli ayrılma noktalarında resim kaynaklarını değiştirmeye yönelik bir yöntem değildir ve bir resmi diğeriyle değiştirmek için tasarlanmamıştır. Bu söz dizimleri,
Bizden bağımsız olarak çok zor bir sorunu çözmek için tarayıcı: kullanıcının tarayıcı bağlamına uygun hale getirilmiş bir resim kaynağını sorunsuz bir şekilde istemek ve görüntülemek,
görüntü kalitesi, görüntü yoğunluğu, kullanıcı tercihleri, bant genişliği ve sayısız başka etmen dahil.
Bu büyük bir sorudur; kesinlikle web için bir görseli işaretlerken düşündüğümüzden daha fazlasını içerir; iyi bir iş yapmak ise çok zor olabilir.
x ile yoğunluk tanımlanıyor
Sabit genişliğe sahip bir <img>, kullanıcının yoğunluğuna bakılmaksızın, tüm göz atma bağlamlarında aynı görüntü alanını kaplar
görüntü: ekranları oluşturan fiziksel piksellerin sayısı. Örneğin, doğal genişliği 400px olan bir resim yaklaşık kaplayacaktır
Hem orijinal Google Pixel'de hem de çok daha yeni Pixel 6 Pro'da tarayıcı görüntü alanının tamamı (her iki cihazda da normalleştirilmiş 412px)
mantıksal piksel geniş görüntü alanı.
Ancak Pixel 6 Pro çok daha daha keskin bir ekrana sahiptir: 6 Pro'nun fiziksel çözünürlüğü 1440 × 3120 pikselken Piksel 1080 × 1920 pikseldir, yani ekranın kendisini oluşturan donanım piksellerinin sayısıdır.
Bir cihazın mantıksal pikselleri ile fiziksel pikselleri arasındaki oran, söz konusu ekranın (DPR) cihaz piksel oranıdır. DPR (şimdiki değeri) cihazın gerçek ekran çözünürlüğünün, görüntü alanının CSS piksellerine bölünmesiyle hesaplanır.
Bu yüzden orijinal Pixel'in DPR'si 2,6, Pixel 6 Pro'da ise 3,5'tir.
DPR'si 1'den yüksek olan ilk cihaz olan iPhone 4, 2 cihaz piksel oranını bildiriyor. Ekranın fiziksel çözünürlüğü ise mantıksal çözünürlüğü ikiye katlayın. iPhone 4'ten önceki tüm cihazların DPR'si 1'e (bir mantıksal piksele, bir fiziksel piksele) sahipti.
400px genişliğindeki bu resmi, DPR'si 2 olan bir ekranda görüntülerseniz her mantıksal piksel,
iki yatay ve iki dikey olmak üzere, ekranın fiziksel piksellerinin Resim, yüksek yoğunluklu ekrandan yararlanamaz, yalnızca normal
1 DPR'si olan ekranlarda olduğu gibi. Tabii ki "çizilen" her şey tarayıcının oluşturma motoru tarafından (metin, CSS şekilleri veya SVG'ler)
gibi çizimler, yüksek yoğunluklu ekrana uyacak şekilde çizilir. Ancak Resim Biçimleri ve Sıkıştırma bölümünden öğrendiğiniz gibi kafes görüntüler sabittir.
ızgara düzeninde gösterilir. Her zaman çok belirgin olmasa da, daha yüksek yoğunluklu ekrana uyacak şekilde büyütülmüş bir kafes resim
daha düşük çözünürlüğe sahip olduğundan emin olun.
Bu ölçeklendirmeyi önlemek için, oluşturulan resmin gerçek genişliğinin en az 800 piksel olması gerekir. Aşağı ölçeklendirildiğinde
400 mantıksal piksel genişliğindeki bir alana sığdırmak için bu 800 piksellik resim kaynağı, DPR'si 2 olan bir ekranda piksel yoğunluğunun iki katı olur.
çok güzel görünecek.
DPR'si 1 olan bir ekran resmin artan yoğunluğunu kullanamayacağından, bu boyutla
ve bildiğiniz gibi küçültülmüş bir resim de sorun yaratmayacaktır. Düşük yoğunluklu ekranda, daha yüksek yoğunluk için uygun bir resim
diğer düşük yoğunluklu resimlere benzer.
Görseller ve Performans bölümünde öğrendiğiniz gibi, düşük yoğunluklu ekrana sahip bir kullanıcı, bir resim kaynağını 400px'ye küçültülmüştür.
yalnızca doğal genişliği 400px olan bir kaynağa ihtiyacınız olacak. Çok daha büyük bir resim görsel olarak tüm kullanıcılar için uygun olsa da, çok büyük ve
küçük ve düşük yoğunluklu bir ekranda oluşturulan yüksek çözünürlüklü resim kaynağı, diğer küçük ve düşük yoğunluklu resimler gibi görünür ancak çok daha yavaş görünür.
Tahmin edebileceğiniz gibi, DPR'si 1 olan mobil cihazlar çok nadirdir, ancak bu özellik "masaüstü bilgisayarlarda" hâlâ göz atma bağlamlarını inceleyin. Verilere göre Matt Hobbs tarafından paylaşılan bir raporda, Kasım 2022'deki GOV.UK tarama oturumlarının yaklaşık% 18'inde 1 DPR bildirilmiştir. Yüksek yoğunluklu resimler, bu kullanıcıların beklediği gibi görünse de çok daha yüksek bant genişliği ve işleme maliyeti Özellikle de düşük yoğunluklu ekranlara sahip olma ihtimali yüksek olan eski ve daha az güçlü cihazların kullanıcıları açısından önemli bir sorundur.
srcset kullanılması, yalnızca yüksek çözünürlüklü ekrana sahip cihazların, aynı görüntüyü iletmeden net görünecek kadar büyük görüntü kaynakları almasını sağlar.
düşük çözünürlüklü ekrana sahip kullanıcılara daha az bant genişliği maliyeti getirir.
srcset özelliği, bir resmi oluşturmak için bir veya daha fazla virgülle ayrılmış aday tanımlar. Her aday
İki şey: src ürününde kullanacağınız gibi bir URL ve bu resim kaynağını tanımlayan bir söz dizimi. srcset bölgesindeki her aday
doğal width ("w söz dizimi") veya amaçlanan yoğunluğu ("x söz dizimi") ile tanımlanır.
x söz dizimi, "bu kaynak, bu yoğunluğa sahip bir ekran için uygun" ifadesinin kısaltmasıdır; ardından 2x gelen bir aday olabilir
2 DPR'ye sahip ekranlar için uygun olmalıdır.
<img src="low-density.jpg" srcset="double-density.jpg 2x" alt="...">
srcset destekleyen tarayıcılara iki öneri sunulur: double-density.jpg (2x, bu öneriler için uygun olduğunu açıklar)
src özelliğinde DPR'si 2 ve low-density.jpg olan görüntüler (daha uygun bir durum olmadığında aday seçilir)
srcset içinde bulundu. srcset desteği olmayan tarayıcılarda özellik ve içeriği yok sayılır, yani src içeriği
her zamanki gibi istenir.
srcset özelliğinde belirtilen değerleri, talimatlarla kolayca karıştırabilirsiniz. Bu 2x, tarayıcıya
ilişkili kaynak dosyanın, DPR'si 2 olan bir ekranda kullanılmaya (kaynağın kendisiyle ilgili bilgiler) uygun olduğunu tespit ettik. Anlatmıyor
tarayıcının söz konusu kaynağı nasıl kullanacağını bilmesi yeterlidir. Bu ayrım çok küçük ama önemli bir farktır:
çift yoğunluklu resim olan bir resimdir, çift yoğunluklu ekranda kullanılacak bir resim değildir.
"Bu kaynak 2x ekranları için uygun" yazan bir söz dizimi arasındaki fark ve "2x ekranlarında bu kaynağı kullan" yazan bir ibare
baskıda azdır, ancak görüntü yoğunluğu, tarayıcının adayı belirlemek için kullandığı birbiriyle bağlantılı çok sayıda faktörden yalnızca biridir.
sadece bazılarını bilmeniz gerekir. Örneğin: tek tek, bir kullanıcının belirli bir özelliği etkinleştirdiğini
prefers-reduced-data medya sorgusunu kullanarak bant genişliğinden tasarruf sağlayan tarayıcı tercihini kullanın ve bunu, kullanıcıları her zaman düşük yoğunluklu resimlerde kullanmak için kullanın
Ancak bu reklamlar her geliştirici tarafından her web sitesinde tutarlı bir şekilde uygulanmadığı sürece kullanıcılara pek fayda sağlamaz.
Bir sitede tercihlerine riayet etmiş olabilirlerken, başka bir sitede bant genişliğini yok eden resim duvarıyla karşılaşabilirler.
srcset/sizes tarafından kullanılan kasıtlı olarak belirsiz kaynak seçme algoritması, tarayıcıların daha düşük yoğunluğu seçmeye karar vermesi için yeterli alan bırakır
veya veri kullanımını en aza indirme tercihine dayalı olarak, bunun nasıl, ne zaman veya ne zaman olacağıyla ilgili sorumluluğu bize
hangi eşiğin
sonucunda belirlenecek. Tarayıcının sizin için daha donanımlı olması nedeniyle sorumlulukları ve ek işleri üstlenmenin bir anlamı yok.
w ile genişlikler tanımlanıyor
srcset, resim kaynağı adayları için ikinci bir tanımlayıcı türünü kabul eder. Çok daha güçlü bir yöntem; amaçlarımız açısından
daha kolay anlaşılır. Bir adayı belirli bir görüntü yoğunluğu için uygun boyutlara sahip olarak işaretlemek yerine,
w söz dizimi, her aday kaynağın doğal genişliğini açıklar. Daha önce de belirttiğimiz gibi, her adayın boyutu
aynı kırpma ve en-boy oranına sahip olması gerekir. Ancak bu durumda, kullanıcının tarayıcısının iki seçenek arasında seçim yapmasını istersiniz:
küçük.jpg, doğal genişliği 600 piksel olan bir kaynak ve 1200 piksel genişliğindeki büyük.jpg.
srcset="small.jpg 600w, large.jpg 1200w"
Bu işlem, tarayıcıya bu bilgilerle ne yapacağını söylemez, yalnızca resmin görüntülenmesi için bir aday listesi sağlar.
Tarayıcının hangi kaynağın oluşturulacağına karar verebilmesi için, öncelikle tarayıcıya biraz daha bilgi vermeniz gerekir:
resmin sayfada nasıl oluşturulacağına ilişkin açıklama. Bunun için sizes özelliğini kullanın.
sizes ile kullanımı açıklama
Tarayıcılar, resim aktarımı konusunda çok iyi performans gösterir. Resim öğesi istekleri uzun süre başlatılacak için yapılan isteklerden önce (çoğu zaman işaretleme tamamen ayrıştırılmadan önce bile) geçerlidir. Tarayıcı, bu istekleri yaptığında, işaretleme dışında sayfanın kendisiyle ilgili hiçbir bilgi içermez; istek başlatılmamış bile olabilir harici stil sayfaları için ek araçlar da vardır. Tarayıcı işaretlemenizi ayrıştırdığında ve harici yalnızca tarayıcı düzeyinde bilgiler bulunur: kullanıcının görüntü alanının boyutu, kullanıcı ekranının piksel yoğunluğu, kullanıcı tercihleri vb.
Bu bize bir resmin sayfa düzeninde nasıl oluşturulmasının amaçlandığı hakkında hiçbir bilgi vermez; görüntü alanını bile kullanamaz
img boyutunun üst sınırı için proxy olarak kullanılır. Bu yüzden,
tarayıcıya bu bilgileri sağlayın ve bunu işaretlemeyi kullanarak yapın. Bu istekler için kullanabileceğimiz tek şey bu.
srcset gibi, sizes ürününün de işaretleme ayrıştırıldığı anda bir resim hakkında bilgi kullanılabilir hale getirilmesi amaçlanır. srcset
özelliğinin kısaltmasıdır: "Kaynak dosyalar ve doğal boyutları burada verilmiştir" sizes özelliği, "burada" ifadesinin kısaltmasıdır
düzende oluşturulan resmin boyutudur." Resmi açıklama şekliniz görüntü alanına göre değişir.
boyut, resim isteği yapıldığında tarayıcının sahip olduğu tek düzen bilgisidir.
Bu ifade, basılı metinde biraz karmaşık görünebilir ancak uygulamada anlaşılması çok daha kolaydır:
<img
sizes="80vw"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
Burada, bu sizes değeri tarayıcıya, düzenimizde img öğesinin kapladığı alanın 80vw ila% 80'lik genişliğe sahip olduğunu bildirir
görüntü alanını değiştirebilirsiniz. Bunun bir talimat değil, sayfa düzenindeki resmin boyutunun açıklaması olduğunu unutmayın. "Bunu yap" falan yok
görüntü alanının% 80'ini kapladığını" ancak "bu resim, sayfa oluşturulduktan sonra görüntü alanının% 80'ini kaplayacak."
Geliştirici olarak göreviniz tamamlanmıştır. srcset dilindeki aday kaynakların listesini ve resminizin genişliğini doğru bir şekilde açıkladınız
sizes içinde kullanılır ve srcset içindeki x söz diziminde olduğu gibi gerisi tarayıcıya bağlıdır.
Ancak bu bilgilerin nasıl kullanıldığını tam olarak anlamak için, burada gösterilen kullanıcının tarayıcısı bu işaretlemeyle karşılaştığında şunları yapar:
Tarayıcıya, bu resmin mevcut görüntü alanının% 80'ini kaplayacağını bildirdiniz. Dolayısıyla, img öğesini bir
bir görüntü 800 piksel kaplar. Daha sonra tarayıcı bu değeri alıp bunları
srcset içinde belirttiğimiz resim kaynağı adaylarının her birinin genişliğidir. En küçük kaynağın boyutu 600 pikseldir.
yani: 600÷800=0,75. Orta boy resmimiz 1200 piksel genişliğindedir: 1200÷800=1,5. En büyük resminizin genişliği 2000 pikseldir: 2000÷800=2,5.
Bu hesaplamaların sonuçları (.75, 1.5 ve 2.5), etkili bir şekilde, kullanıcının özelliklerine özel olarak uyarlanmış DPR seçenekleridir.
görüntü alanı boyutu. Tarayıcı, kullanıcının görüntü yoğunluğuyla ilgili bilgilere de sahip olduğundan bir dizi karar verir:
Bu görüntü alanı boyutunda, small.jpg adayı kullanıcının görüntü yoğunluğundan bağımsız olarak silinir ve daha düşük bir DPR ile
1 yerine bu kaynak tüm kullanıcılar için ölçek genişletmeyi gerektirdiğinden uygun değildir. DPR'si 1 olan bir cihazda medium.jpg,
En yakın eşleşme. Bu kaynak, 1.5 değerindeki DPR'de görüntülenmeye uygundur. Dolayısıyla, gerekenden biraz daha büyüktür. Ancak küçültmenin
bir süreçtir. DPR'si 2 olan bir cihazda large.jpg en yakın eşleşme olduğundan bu eşleşme seçilir.
Aynı resim 600 piksel genişliğindeki bir görüntü alanında oluşturulursa tüm bu hesaplamanın sonucu tamamen farklı olur: 80vw artık 480 pikseldir.
Kaynaklarımızı ise 1.25, 2.5 ve 4.1666666667 elde ederiz. Bu görüntü alanı boyutunda small.jpg seçilecek
1x cihazda, medium.jpg ise 2x cihazda eşleşecek.
Bu resim, tüm bu göz atma bağlamlarında aynı görünecektir: Tüm kaynak dosyalarımız, boyutlarından bağımsız olarak tamamen aynıdır.
her biri kullanıcının görüntü yoğunluğunun izin verdiği ölçüde keskin bir şekilde oluşturulur. Ancak, her kullanıcıya large.jpg sunmak yerine
en geniş görüntü alanlarını ve en yüksek yoğunluklu ekranları kapsayarak kullanıcılara her zaman uygun olan en küçük aday sunulur.
Kurallı değil, açıklayıcı bir söz dizimi kullandığınızda ayrılma noktalarını manuel olarak ayarlamanıza ve gelecekteki görüntü
DPR'ler: Tarayıcıya bilgileri sağlamanız ve yanıtları sizin yerinize belirlemesine izin vermeniz yeterlidir.
sizes değerimiz görüntü alanına bağlı olduğu ve sayfa düzeninden tamamen bağımsız olduğu için bir komplikasyon katmanı ekler.
Herhangi bir sabit genişlikli kenar boşluğu, dolgu veya etki olmadan, yalnızca görüntü alanının bir kısmını kaplayan bir resme sahip olmak nadiren
diğer öğelerden ayırt edebilirsiniz. Genellikle birimlerin bir kombinasyonunu kullanarak bir resmin genişliğini ifade etmeniz gerekir; yüzdeler, em, px vb.
Neyse ki burada calc() kullanabilirsiniz. Duyarlı resimler için yerel desteği olan tüm tarayıcılar calc() özelliğini de destekleyecektir. Böylece
CSS birimlerinin karıştırılması ve eşleştirilmesi; örneğin, her iki taraftan da 1em kenar boşluğu kullanılarak kullanıcının görüntü alanının tam genişliğini kaplayan bir resim:
<img
sizes="calc(100vw-2em)"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1600w, x-large.jpg 2400w"
src="fallback.jpg"
alt="...">
Kesme noktalarını açıklama
Duyarlı düzenlerle çalışmaya çok zaman harcadıysanız aşağıdaki örneklerde bir şeylerin eksik olduğunu fark etmiş olabilirsiniz:
bir görselin düzende kapladığı alanın, düzenimizin ayrılma noktalarında değişme olasılığı çok yüksektir. Bu durumda,
daha fazla ayrıntı iletmek için: sizes, tarayıcının oluşturulan boyutu için virgülle ayrılmış aday grubunu kabul eder
resim kaynakları için srcset gibi virgülle ayrılmış adayları kabul eder. Bu koşullar, bilinen medya sorgusu söz dizimini kullanır.
Bu söz dizimi, ilk eşleşmedir: Bir medya koşulu eşleştiğinde tarayıcı sizes özelliğini ve değeri ayrıştırmayı durdurur
değeri uygulanır.
1.200 pikselin üzerindeki görüntü alanlarında, görüntü alanının% 80'ini kaplayacak bir resminiz olduğunu ve her iki yanındaki em'lık dolgunun düştüğünü varsayalım.
görüntü alanının tüm genişliğini kaplar.
<img
sizes="(min-width: 1200px) calc(80vw - 2em), 100vw"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
Kullanıcının görüntü alanı 1.200 pikselden büyükse calc(80vw - 2em), düzenimizdeki resmin genişliğini tanımlar. Öğe
(min-width: 1200px) koşulu eşleşmez. Tarayıcı sonraki değere geçer. Zaman çizelgesinde
bu değere bağlı medya koşulu; varsayılan olarak 100vw kullanılır. Bu sizes özelliğini
max-width medya sorgusu:
<img
sizes="(max-width: 1200px) 100vw, calc(80vw - 2em)"
srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
src="fallback.jpg"
alt="...">
Sade bir dille: "(max-width: 1200px) eşleşiyor mu? Bağlanmadıysa devam edin. Bir sonraki değerin (calc(80vw - 2em)) uygun bir koşulu yok.
bu yüzden seçilen ayar budur.
Tarayıcıya img öğenizle ilgili tüm bu bilgileri (potansiyel kaynaklar, doğal genişlikler,
ve resmi kullanıcıya nasıl sunmak istediğinize karar verir. Tarayıcı, bir resimle ne yapılacağını belirlemek için
bu bilgilerden faydalanabilirsiniz. Bu muğlaksa bunun nedeni tasarımdan kaynaklanıyordur. Kaynak seçim algoritmasında kodlanan kaynak seçim algoritması
HTML spesifikasyonu, bir kaynağın nasıl seçilmesi gerektiği konusunda açık bir şekilde belirsizdir. Kaynaklar, tanımlayıcıları ve bunların
resim ayrıştırıldığında, tarayıcı istediği şeyi yapabilir. Hangisinin hangisi olduğunu bilemezsiniz
büyük yazı tipi boyutu seçin.
"Bu kaynağı yüksek çözünürlüklü bir ekranda kullan" şeklinde bir söz dizimi tahmin edilebilir olmasa da temel sorunu duyarlı düzende resimlerle birlikte: kullanıcı bant genişliğinin korunması. Ekranın piksel yoğunluğu yalnızca internetle ilgilidir. bağlantı hızını seçin. Gelişmiş bir dizüstü bilgisayar kullanıyorsanız ancak sayaçlı bir bağlantıyla web'e göz atıyorsanız veya titrek bir uçak kablosuz bağlantısı kullanırken, bağlantınızdan bağımsız olarak yüksek çözünürlüklü görüntü kalitesidir.
Son sözü tarayıcıya bırakmak, kesin bir kuralla yönetebileceğimizden çok daha fazla performans artışı sağlar.
söz dizimine uygun olmalıdır. Örneğin, çoğu tarayıcıda srcset veya sizes söz dizimini kullanan bir img, hiçbir zaman daha küçük bir kaynak isteme zahmetine girmez.
kullanıcının tarayıcısının önbelleğinde bulunan boyutunkinden daha yüksek bir boyuta sahip olmasına dikkat edin. Bir kaynak için yeni istekte bulunmanın anlamı nedir?
bir resim kaynağı olarak ayarlar. Ancak kullanıcı, kullandığı
Resimde, yükseltmeyi önlemek için yeni bir resmin gerektiği noktaya kadar söz konusu istek yine de yapılır, dolayısıyla her şey
emin olabilirsiniz.
Açık bir şekilde kontrol edilmemesi, göründüğü gibi biraz ürkütücü olabilir, ancak kaynak dosyalarda aynı özelliklere sahip kaynak dosyalar kullandığınız için
kullanıcılara "bozuk" bir durum sunma tek kaynaklı src ile karşılaştırıldığında çok daha iyi bir deneyim
tarayıcı tarafından verilen kararlar.
sizes ve srcset kullanılıyor
Bu, hem siz, hem de okuyucu ve tarayıcı için çok fazla bilgi demektir. srcset ve sizes hem yoğun söz dizimidir hem de
oldukça az sayıda karakterle şok edici miktarda bilgiyi açıklayan. Yani iyi ya da kötü anlamda, yani tasarımdan:
bu söz dizimleri daha basit ve gerçek kişiler tarafından daha kolay ayrıştırılanlar, bir tarayıcının ayrıştırmasını zorlaştırabilirdi. İlgili içeriği oluşturmak için kullanılan
dizeye daha fazla karmaşıklık eklenirse ayrıştırıcı hataları veya davranışta kasıtlı olmayan farklılıklar olasılığı artar.
arasında geçiş yapabiliyoruz. Bununla birlikte, burada bir avantaj vardır: Makineler tarafından daha kolay okunan bir söz dizimi, daha kolay yazılan bir söz dizimidir
sağlayabilir.
srcset, otomasyon için net bir çözümdür. Nadiren de olsa, bir örnek olay örgüsü için resimlerinizin farklı versiyonlarını
Bunun yerine, üçüncü taraf Webpack gibi bir paketleyici olan Gulp gibi bir görev yürütücü kullanarak süreci otomatikleştirdiler.
Cloudinary gibi CDN veya tercih ettiğiniz İYS'de zaten yerleşik olarak bulunan işlevler. Kaynaklarımızı oluşturmak için yeterli bilgiye sahip olmak
her şeyden önce, bir sistem bunları uygulanabilir bir srcset özelliğine yazmak için yeterli bilgiye sahip olacaktır.
sizes otomatikleştirmek biraz daha zordur. Bildiğiniz gibi, bir sistemin bir resmin boyutunu hesaplamanın tek yolu
oluşturulmuş düzenin, düzeni oluşturmuş olması gerekir. Neyse ki soyutlamaya çalıştığınız pek çok geliştirici aracı sayesinde
el yazısıyla sizes özelliklerini el yazısıyla yazma sürecini hızlandırıyor.
Örneğin respImageLint, sizes özelliklerinizi incelemek için tasarlanmış bir kod snippet'idir
ve iyileştirme önerilerinde bulunmaktır. Lazysizes projesi güvenlik ihlallerini
Resim isteklerini düzen oluşturulana kadar erteleyerek verimlilik için belirli bir hızda
sizin için sizes değerleri oluşturabilir. React veya Vue gibi tamamen istemci taraflı bir oluşturma çerçevesi kullanıyorsanız
srcset ve sizes özelliklerinin yazılması ve/veya oluşturulması için sunulan çözüm sayısı. Bu konu, İYS ve Çerçeveler bölümünde daha ayrıntılı şekilde açıklanacaktır.