Bu modülde, tarayıcının neyi göstereceği konusunda en iyi kararı verebilmesi için resim seçimini nasıl sağlayacağınızı öğreneceksiniz. srcset, belirli ayrılma noktalarındaki resim kaynaklarını değiştirme yöntemi değildir ve bir resmin başka bir resimle değiştirilmesi amaçlanmamıştır. Bu söz dizimleri, tarayıcının bizden bağımsız olarak çok zor bir sorunu çözmesine olanak tanır: Görüntü alanı boyutu, görüntü yoğunluğu, kullanıcı tercihleri, bant genişliği ve sayısız diğer faktör dahil olmak üzere, kullanıcının tarama bağlamına uygun bir resim kaynağını sorunsuz bir şekilde istemek ve oluşturmak.
Bu büyük bir istektir. Kesinlikle web için bir resmi işaretlerken dikkate almak istemediğimizden daha fazla bilgi gerektirir.
Yoğunluğu x ile açıklama
Sabit genişliğe sahip bir <img>, kullanıcı ekranının yoğunluğundan (ekranı oluşturan fiziksel piksel sayısı) bağımsız olarak herhangi bir göz atma bağlamında aynı miktarda görüntü alanını kaplar. Örneğin, doğal genişliği 400px olan bir resim, hem orijinal Google Pixel'de hem de çok daha yeni Pixel 6 Pro'da tarayıcı görünümünün neredeyse tamamını kaplar. Her iki cihaz da normalleştirilmiş 412px
mantıksal piksel genişliğe sahiptir.
Pixel 6 Pro çok daha keskin bir ekrana sahiptir ancak 6 Pro'nun fiziksel çözünürlüğü 1440 × 3120 pikselken Pixel 1080 × 1920 pikseldir. Yani ekranı 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 cihaz piksel oranıdır (DPR). DPR, cihazın gerçek ekran çözünürlüğünün bir görünümün CSS piksellerine bölünmesiyle hesaplanır.
Bu nedenle orijinal Pixel'in DPR'si 2,6, Pixel 6 Pro'nun DPR'si ise 3,5'tir.
DPR'si 1'den büyük olan ilk cihaz olan iPhone 4, cihaz piksel oranını 2 olarak bildirir. Ekranın fiziksel çözünürlüğü mantıksal çözünürlüğün iki katıdır. iPhone 4'ten önceki tüm cihazların DPR'si 1'di: bir mantıksal piksel - bir fiziksel piksel.
Bu 400px genişliğindeki resmi DPR'si 2 olan bir ekranda görüntülerseniz her bir mantıksal piksel, ekranın dördü yatay ve ikisi dikey olmak üzere ekranın fiziksel piksellerinin dördünde oluşturulur. Resim, yüksek yoğunluklu ekrandan yararlanmaz. DPR'si 1 olan bir ekranda olduğu gibi görünür. Elbette, tarayıcının oluşturma motoru tarafından "çizgilenen" her şey (örneğin, metin, CSS şekilleri veya SVG'ler) daha yüksek yoğunluklu ekrana uygun olarak çizilir. Ancak Resim Biçimleri ve Sıkıştırma bölümünden de öğrendiğiniz gibi, kafes resimler sabit piksel ızgaralarıdır. Her zaman bariz şekilde belirgin olmasa da, daha yüksek yoğunluklu bir ekrana uyacak şekilde büyütülmüş bir kafes resim, çevresindeki sayfaya kıyasla düşük çözünürlüklü görünür.
Bu büyütmeyi önlemek için, oluşturulan resmin en az 800 piksellik bir içsel genişliğine sahip olması gerekir. Bir alana 400 mantıksal piksel genişliğindeki bir düzene sığacak şekilde küçültüldüğünde bu 800 piksel resim kaynağı, piksel yoğunluğunun iki katıdır. DPR'si 2 olan bir ekranda güzel ve keskin görünür.
DPR'si 1 olan bir ekran bir resmin artan yoğunluğundan yararlanamadığından, görüntüyle eşleşecek şekilde aşağı ölçeklendirilir. Bildiğiniz gibi, ölçeklendirilmiş resim düzgün görünür. Düşük yoğunluklu ekranda, yüksek yoğunluklu ekranlar için uygun bir resim, düşük yoğunluklu diğer herhangi bir resim gibi görünür.
Resimler ve Performans bölümünde de öğrendiğiniz gibi, 400px boyutuna küçültülmüş bir resim kaynağı görüntüleyen düşük yoğunluklu ekrana sahip bir kullanıcının yalnızca doğal genişliği 400px olan bir kaynağa ihtiyacı vardır. Çok daha büyük bir resim görsel olarak tüm kullanıcılar için uygun olsa da, küçük ve düşük yoğunluklu bir ekranda oluşturulan büyük, yüksek çözünürlüklü bir 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 son derece nadirdir, ancak "masaüstü" göz atma bağlamlarında hâlâ yaygındır. Matt Hobbs tarafından paylaşılan verilere göre Kasım 2022'deki GOV.UK göz atma oturumlarının yaklaşık% 18'inde DPR değeri 1 olarak bildiriliyor. Yüksek yoğunluklu resimler bu kullanıcıların bekleyebileceği şekilde görünse de çok daha yüksek bant genişliğine ve işleme maliyetine sahip olur. Bu durum özellikle, düşük yoğunluklu ekranlara sahip olma olasılığı daha eski ve daha düşük olan cihazlardaki kullanıcılar için endişe vericidir.
srcset kullanıldığında, sadece yüksek çözünürlüklü ekrana sahip cihazların keskin görünecek büyüklükteki görüntü kaynaklarını almasını ve düşük çözünürlüklü ekrana sahip kullanıcılara aynı bant genişliği maliyetini aşmamasını sağlarsınız.
srcset özelliği, bir resmi oluşturmak için bir veya daha fazla virgülle ayrılmış aday tanımlar. Her aday iki şeyden oluşur: src uygulamasında kullanacağınız gibi bir URL ve bu resim kaynağını açıklayan bir söz dizimi. srcset kapsamındaki her aday, kendi genişliği ("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 uygundur" anlamına gelir. Aday ve 2x, DPR değeri 2 olan ekranlar için uygundur.
<img src="low-density.jpg" srcset="double-density.jpg 2x" alt="...">
srcset'yi destekleyen tarayıcılar, iki adayla sunulacaktır: double-density.jpg, 2x DPR'si 2 olan ekranlar için uygun olarak tanımlar ve src özelliğinde low-density.jpg (srcset içinde daha uygun bir şey bulunamazsa seçilen aday). srcset desteği olmayan tarayıcılarda, özellik ve içeriği yok sayılır. src içeriği her zamanki gibi istenir.
srcset özelliğinde belirtilen değerleri talimatlarda kolayca karıştırabilirsiniz. Bu 2x, tarayıcıya, ilişkili kaynak dosyanın DPR'si 2 olan bir ekranda (kaynağın kendisiyle ilgili bilgiler) kullanılmaya uygun olacağını bildirir. Tarayıcıya bu kaynağı nasıl kullanacağını söylemez, yalnızca kaynağın nasıl kullanılabileceğini bildirir. Bu, küçük ama önemli bir farktır: Bu, çift yoğunluklu bir resimdir, çift yoğunluklu ekranlarda kullanılacak bir resim değildir.
"Bu kaynak 2x ekranlar için uygun" yazan bir söz dizimi ile "bu kaynağı 2x ekranlarında kullan" yazılı bir söz dizimi arasındaki fark baskıda çok azdır ancak görüntü yoğunluğu, tarayıcının oluşturulacak adaya karar verirken kullandığı, yalnızca bir kısmını bile bildiğiniz çok sayıda birbiriyle bağlantılı faktörden yalnızca biridir. Örneğin, bir kullanıcının prefers-reduced-data medya sorgusu üzerinden bant genişliğinden tasarruf sağlayan bir tarayıcı tercihi etkinleştirdiğini ayrı ayrı belirleyebilir ve bunu görüntü yoğunlukları ne olursa olsun kullanıcıları her zaman düşük yoğunluklu resimlere dahil etmek için kullanabilirsiniz. Ancak bu, her geliştirici tarafından ve her web sitesinde tutarlı bir şekilde uygulanmadığı takdirde kullanıcının işine çok yaramaz.
Bir sitede tercihlerine saygı gösterilirken bir sonraki sitede bant genişliğini tüketen bir görüntü duvarıyla karşılaşabilirler.
srcset/sizes tarafından kullanılan kasıtlı olarak muğlak kaynak seçimi algoritması, nasıl, ne zaman veya hangi eşikte olacağı konusundaki sorumluluğumuzu üstlenmeden tarayıcıların bant genişliği düşüşleri olan daha düşük yoğunluklu resimleri veya veri kullanımını en aza indirme tercihini seçmeye karar vermelerine imkan tanır. Tarayıcının sizin için daha donanımlı hâle gelmesi gibi sorumlulukları ve ek işleri üstlenmenin anlamı yoktur.
Genişlikler w ile tanımlanıyor
srcset, resim kaynağı adayları için ikinci bir açıklayıcı türünü kabul eder. Bu, çok daha güçlü bir çözüm ve amaçlarımız
açısından, anlaşılması çok daha kolay. w söz dizimi, bir adayı belirli bir görüntü yoğunluğu için uygun boyutlara sahip olarak işaretlemek yerine her aday kaynağın doğal genişliğini tanımlar. Aynı içerik, aynı kırpma ve aynı en boy oranına sahip
her adayın boyutu aynı şekilde kaydedilir. Ancak bu durumda, kullanıcının tarayıcısının iki seçenek arasından seçim yapmasını istersiniz:
küçük.jpg, doğal genişliği 600 piksel olan bir kaynak ve büyük.jpg, doğal genişliği 1200 piksel olan bir kaynaktır.
srcset="small.jpg 600w, large.jpg 1200w"
Bu işlem, tarayıcıya bu bilgilerle ne yapacağını söylemez, yalnızca resmi görüntüleyecek adayların bir listesini sağlar.
Tarayıcının hangi kaynağın oluşturulacağına karar verebilmesi için önce ona biraz daha bilgi sağlamanız gerekir: Resmin sayfada nasıl görüntüleneceğine dair bir açıklama. Bunun için sizes özelliğini kullanın.
sizes ile kullanım açıklaması
Resim aktarma konusunda tarayıcılar son derece etkilidir. Resim öğesi istekleri, stil sayfası veya JavaScript isteklerinden çok önce başlatılır. Bu, genellikle işaretleme tamamen ayrıştırılmadan önce bile yapılır. Tarayıcı bu istekleri yaptığında, işaretleme dışında sayfanın kendisiyle ilgili hiçbir bilgiye sahip olmaz. Uygulama bir yana, henüz harici stil sayfaları için istek başlatmamış bile olabilir. Tarayıcı, işaretlemenizi ayrıştırıp harici istekler yapmaya başladığında, 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ığıyla ilgili herhangi bir bilgi vermez. Yatay olarak kaydırılan bir kapsayıcıyı kaplayabileceğinden görüntü alanını img boyutunun üst sınırı için bir proxy olarak bile kullanamaz. Bu nedenle, tarayıcıya bu bilgileri sağlamamız ve bunu, işaretlemeyi kullanarak yapmamız gerekir. Bu istekler için kullanabileceğimiz bu kadar.
srcset işlevinde olduğu gibi sizes de işaretleme ayrıştırıldığı andan itibaren resimle ilgili bilgileri kullanıma sunmak için tasarlanmıştır. srcset özelliği,"kaynak dosyaları ve doğal boyutlarını burada bulabilirsiniz" ifadesinin kısaltması olduğu gibi sizes özelliği de "düzende oluşturulan resmin boyutu"nun kısaltmasıdır. Resmi açıklama şekliniz görüntü alanına bağlıdır. Görüntü alanı boyutu, resim isteği yapıldığında tarayıcının sahip olduğu tek düzen bilgisidir.
Basılı belgeler için biraz karmaşık bir ifade olabilir ancak pratikte 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ğer, düzenimizdeki img öğesinin kapladığı alanın 80vw-görüntü alanının% 80'i kadar genişliğe sahip olduğunu tarayıcıya bildirir. Bunun bir talimat olmadığını, sayfa düzenindeki resmin boyutunun bir açıklaması olduğunu unutmayın. "Bu resmin görüntü alanının% 80'ini kaplamasını sağla" yazmaz, ancak "bu resim, sayfa oluşturulduktan sonra görüntü alanının% 80'ini kaplar."
Geliştirici olarak işiniz tamamlandı. srcset öğesinde aday kaynakların listesini ve sizes içinde resminizin genişliğini doğru bir şekilde açıkladınız. 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 amacıyla bir kullanıcının tarayıcısının bu işaretlemeyle karşılaştığında verdiği kararların üzerinden geçelim:
Tarayıcıya, bu resmin mevcut görüntü alanının% 80'ini kaplayacağını bildirdiniz. Dolayısıyla bu img dosyasını, 1.000 piksel genişliğinde görüntü alanına sahip bir cihazda oluşturursak bu resim 800 piksel kaplar. Daha sonra, tarayıcı bu değeri alır ve srcset politikasında belirttiğimiz resim kaynağı adaylarının her birinin genişliklerine böler. En küçük kaynağın doğal boyutu 600 pikseldir.Dolayısıyla: 600÷800=0,75. Orta büyüklükteki resmimizin genişliği 1200 pikseldir: 1200÷800=1,5. En büyük resmimiz 2.000 piksel genişliğindedir: 2000÷800=2,5.
Bu hesaplamaların sonuçları (.75, 1.5 ve 2.5), etkin bir şekilde kullanıcının görüntü alanı boyutuna özel olarak özelleştirilmiş DPR seçenekleridir. Tarayıcı, kullanıcının ekran yoğunluğuna ilişkin 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ğuna bakılmaksızın atılır. Hesaplanan DPR değeri 1 değerinden düşük olduğunda bu kaynak her kullanıcı için ölçeği yükseltmeyi gerektireceğinden uygun değildir. DPR'si 1 olan bir cihazda medium.jpg en yakın eşleşmeyi sağlar. Bu kaynak, 1.5 DPR'de gösterilmek için uygundur. Bu nedenle gerekenden biraz daha büyüktür ancak ölçek azaltma işleminin görsel olarak sorunsuz olduğunu unutmayın. DPR'si 2 olan bir cihazda en yakın eşleşme olduğundan large.jpg seçilir.
Aynı resim 600 piksel genişliğindeki bir görüntü alanında oluşturulursa, tüm bu hesaplamaların sonucu tamamen farklı olur: 80vw artık 480 pikseldir.
Kaynaklarımızın genişliklerini buna göre böldüğümüzde 1.25, 2.5 ve 4.1666666667 sonucunu elde ederiz. Bu görüntü alanı boyutunda small.jpg, 1x cihazlarda seçilir ve 2x cihazlarda medium.jpg eşleştirilir.
Bu resim, bu göz atma bağlamlarının tümünde aynı görünecektir: Tüm kaynak dosyalarımız, boyutlarından tamamen ayrıdır ve her biri, kullanıcının görüntü yoğunluğunun izin verdiği ölçüde net biçimde oluşturulur. Ancak en büyük görüntü alanlarına ve en yüksek yoğunluklu ekranlara uyum sağlamak için her kullanıcıya large.jpg sunmak yerine kullanıcılara her zaman en küçük uygun aday sunulur.
Kurallı bir söz dizimi yerine açıklayıcı bir söz dizimi kullandığınızda, kesme noktalarını manuel olarak ayarlamanıza ve gelecekteki görüntü alanları ile DPR'leri göz önünde bulundurmanıza gerek yoktur. Tarayıcıya bilgi sağlamanız ve yanıtları sizin için belirlemesine izin vermeniz yeterlidir.
sizes değerimiz, görüntü alanına göre ve sayfa düzeninden tamamen bağımsız olduğundan, bir komplikasyon katmanı ekler.
Herhangi bir sabit genişlikte kenar boşluğu, dolgu veya sayfadaki diğer öğelerin etkisi olmadan görüntü alanının yalnızca bir yüzdesini kaplayan bir resmin olması nadirdir. Sık sık bir resmin genişliğini, yüzde, em, px vb. değerlerden oluşan bir kombinasyon kullanarak ifade etmeniz gerekir.
Neyse ki burada calc() kullanabilirsiniz. Duyarlı resimleri yerel olarak destekleyen tüm tarayıcılar calc()'i destekler. Bu sayede CSS birimlerini karıştırıp eşleştirebiliriz. Örneğin, kullanıcının görüntü alanının tam genişliğini kaplayan bir resim, her iki tarafta 1em kenar boşluğu çıkar:
<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üzenlere uzun süre çalıştıysanız, bu örneklerde muhtemelen bir şeyin eksik olduğunu fark etmişsinizdir:
Bir düzende bir resmin kapladığı alan, düzenimizin ayrılma noktaları arasında büyük olasılıkla değişir. Bu durumda, tarayıcıya biraz daha fazla ayrıntı iletmeniz gerekir: srcset resim kaynakları için virgülle ayrılmış önerileri kabul ettiği gibi, sizes da resmin oluşturulan boyutu için virgülle ayrılmış adaylar kümesini 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şir eşleşmez tarayıcı, sizes özelliğini ayrıştırmayı durdurur ve belirtilen değer uygulanır.
Görüntü alanının% 80'ini kaplayan bir resminiz olduğunu ve 1.200 pikselin üzerindeki görüntü alanlarında her iki tarafta em bir dolgu kapladığını varsayalım. Daha küçük görüntü alanlarında, bu resim görüntü alanının tam 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) ifadesi, düzenimizdeki resmin genişliğini tanımlar. (min-width: 1200px) koşulu eşleşmezse tarayıcı bir sonraki değere geçer. Bu değere bağlı belirli bir medya koşulu olmadığından, varsayılan olarak 100vw kullanılır. Bu sizes özelliğini max-width medya sorgusu kullanarak yazdıysanız:
<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 ifadeyle: "(max-width: 1200px) eşleşiyor mu? Böyle bir durum yoksa devam edin. Bir sonraki değer (calc(80vw - 2em)) için uygun bir koşul olmadığından bu değer seçilidir.
img öğeniz hakkında olası kaynaklar, doğal genişlikler ve resmi kullanıcıya nasıl sunmak istediğiniz gibi tüm bu bilgileri tarayıcıya sağladığınıza göre, tarayıcı bu bilgilerle ne yapacağını belirlemek için bir dizi kural kullanır. Bu kulağa muğlak gelebilir, çünkü tasarım gereği böyledir. HTML spesifikasyonunda kodlanan kaynak seçim algoritması, kaynağın nasıl seçilmesi gerektiği konusunda açıkça belirsizdir. Kaynaklar, tanımlayıcıları ve resmin nasıl oluşturulacağı ayrıştırıldıktan sonra, tarayıcı istediği şeyi yapabilir. Tarayıcının hangi kaynağı seçeceğini kesin olarak bilemezsiniz.
"Bu kaynağı yüksek çözünürlüklü bir ekranda kullan" şeklindeki bir söz dizimi tahmin edilebilir olsa da, görüntülerle ilgili temel sorunu duyarlı bir düzende ele almaz: kullanıcı bant genişliğini koruma. Ekranların piksel yoğunluğu, internet bağlantı hızıyla (varsa) yalnızca teğet olarak ilişkilidir. Birinci sınıf bir dizüstü bilgisayar kullanıyor ancak sayaçlı bir bağlantı, telefonunuza bağlı olarak veya titrek bir uçak kablosuz bağlantısı aracılığıyla web'de geziniyorsanız ekranınızın kalitesi ne olursa olsun yüksek çözünürlüklü resim kaynaklarını devre dışı bırakmak isteyebilirsiniz.
Son sözü tarayıcıya bırakmak, kesinlikle kuralcı bir söz dizimiyle yönetebileceğimizden çok daha fazla performans iyileştirmesine olanak tanır. Örneğin, çoğu tarayıcıda srcset veya sizes söz dizimini kullanan img, hiçbir zaman kullanıcının tarayıcı önbelleğinde bulunandan daha küçük boyutlara sahip bir kaynak isteğinde bulunmakla uğraşmaz. Tarayıcı, mevcut resim kaynağının ölçeğini sorunsuzca küçültebiliyorken aynı görünecek bir kaynak için yeni bir istekte bulunmanın anlamı nedir? Ancak kullanıcı görüntü alanını, ölçeği büyütmeyi önlemek için yeni bir resmin gerekli olduğu noktaya kadar ölçeklendirirse bu istek yine de yapılır. Böylece her şey beklediğiniz gibi görünür.
Açık bir şekilde kontrol edememesi kulağa biraz ürkütücü gelebilir, ancak aynı içeriğe sahip kaynak dosyaları kullandığınız için tarayıcının verdiği kararlardan bağımsız olarak kullanıcılara tek kaynaklı src ile sağlayacağımızdan daha "bozuk" bir deneyim sunma olasılığımız daha düşüktür.
sizes ve srcset kullanılıyor
Bu hem siz hem de okuyucu ve tarayıcı için çok fazla bilgi içerir. Hem srcset hem de sizes, oldukça az sayıda karakterle şoke edici miktarda bilgi tarif eden yoğun söz dizimidir. Yani, daha iyi ya da daha kötüsü, tasarım gereği: Bu söz dizimlerini daha kısa ve insanlar tarafından daha kolay ayrıştırılabilir hale getirmek, tarayıcı tarafından ayrıştırılmalarını daha zor hale getirebilirdi. Bir dizeye ne kadar karmaşıklık eklenirse, ayrıştırıcı hatalarının veya farklı tarayıcılarda istenmeyen davranış farklılıkları ortaya çıkma olasılığı o kadar yüksektir. Ancak bunun bir avantajı vardır: makineler tarafından daha kolay okunan bir söz dizimi, onlar tarafından daha kolay yazılan bir söz dizimidir.
srcset, otomasyon için kestirme bir çözümdür. Bir üretim ortamı için görüntülerinizin birden çok sürümünü elle oluşturuyor olmanız nadir görülen bir durumdur. Bunun yerine Gulp gibi bir görev çalıştırıcı, Webpack gibi bir paketleyici, Cloudinary gibi bir üçüncü taraf CDN veya tercih ettiğiniz İYS'de yerleşik olarak bulunan işlevler kullanarak işlemi otomatik hale getirirsiniz. Kaynaklarımızı oluşturmaya yetecek kadar bilgiye sahip olduğunuzda sistem, bunları geçerli bir srcset özelliğine yazmak için yeterli bilgiye sahip olur.
sizes aracının otomatikleştirilmesi biraz daha zordur. Bildiğiniz gibi, bir sistemin, oluşturulmuş düzendeki bir resmin boyutunu hesaplamanın tek yolu, düzeni oluşturmaktır. Neyse ki, sizes özelliklerini el yazısıyla yazma sürecini soyutlayan bir dizi geliştirici aracı, el ile asla eşleştiremeyeceğiniz bir verimlilikle ortaya çıkarmıştır. Örneğin, respImageLint, sizes özelliklerinizin doğruluğunu değerlendirmek ve iyileştirme önerileri sunmak için tasarlanmış bir kod snippet'idir. Lazysizes projesi, düzen oluşturulana kadar resim isteklerini erteleyerek verimlilik için belirli bir hızdan ödün verir. Bu da JavaScript'in sizin için sizes değerleri oluşturmasına izin verir. React veya Vue gibi tam istemci tarafı oluşturma çerçevesi kullanıyorsanız srcset ve sizes özelliklerini yazmak ve/veya oluşturmak için çeşitli çözümler vardır. Bu çözümleri İYS ve Çerçeveler bölümünde ayrıntılı olarak ele alacağız.