Günümüzde cihazların karmaşıklığı nedeniyle çok çeşitli ekran piksel yoğunlukları mevcuttur. Bazı cihazlar çok yüksek çözünürlüklü ekranlara sahipken diğerleri bu konuda geride kalır. Uygulama geliştiricilerin bir dizi piksel yoğunluğunu desteklemesi gerekir. Bu, oldukça zor olabilir. Mobil web'de zorluklar çeşitli faktörlerle daha da artar:
- Farklı form faktörlerine sahip çok çeşitli cihazlar.
- Ağ bant genişliği ve pil ömrü sınırlıdır.
Web uygulaması geliştiricilerinin resimlerle ilgili hedefi, en yüksek kaliteli resimleri mümkün olduğunca verimli bir şekilde yayınlamaktır. Bu makalede, bunu bugün ve yakın gelecekte yapmak için kullanabileceğiniz bazı faydalı teknikler ele alınmaktadır.
Mümkünse resim kullanmaktan kaçının
Bu solucan kutusunu açmadan önce, web'in büyük ölçüde çözünürlükten ve DPI'dan bağımsız olan birçok güçlü teknolojiye sahip olduğunu unutmayın. Özellikle metin, SVG ve CSS'nin büyük bir kısmı, web'in otomatik piksel ölçeklendirme özelliği (devicePixelRatio aracılığıyla) sayesinde "otomatik olarak çalışır".
Bununla birlikte, raster resimlerden her zaman kaçınamazsınız. Örneğin, saf SVG/CSS'de kopyalanması oldukça zor öğeler alabilirsiniz veya bir fotoğrafla uğraşıyor olabilirsiniz. Resmi otomatik olarak SVG'ye dönüştürebilirsiniz ancak fotoğrafları vektörelleştirmek pek mantıklı değildir çünkü ölçeklendirilmiş sürümler genellikle iyi görünmez.
Arka plan
Görüntü yoğunluğu geçmişinin çok kısa olması
İlk dönemlerde bilgisayar ekranlarının piksel yoğunluğu 72 veya 96 dpi (inç başına nokta) olarak belirlenmişti.
Ekranların piksel yoğunluğu, büyük ölçüde kullanıcıların telefonlarını genellikle yüzlerine daha yakın tuttuğu ve pikselleri daha görünür kıldığı mobil kullanım alanından dolayı kademeli olarak iyileştirildi. 2008'e gelindiğinde 150 dpi telefonlar yeni norm haline geldi. Görüntü yoğunluğundaki artış trendi devam etti ve günümüzün yeni telefonlarında 300 dpi ekranlar (Apple tarafından "Retina" markalı) kullanılıyor.
Elbette en büyük hedef, piksellerin tamamen görünmediği bir ekrandır. Telefon form faktörü için mevcut Retina/HiDPI ekranlar bu ideale yakın olabilir. Ancak Project Glass gibi yeni donanım ve giyilebilir cihaz sınıfları, muhtemelen daha fazla piksel yoğunluğunu artırmaya devam edecektir.
Pratikte, düşük yoğunluklu resimler yeni ekranlarda eski ekranlarda olduğu gibi görünmelidir. Ancak kullanıcıların görmeye alıştığı yüksek yoğunluklu net görüntülere kıyasla düşük yoğunluklu resimler rahatsız edici ve piksel piksel görünür. Aşağıda, 1x boyuttaki bir resmin 2x ekranda nasıl görüneceğinin kaba bir simülasyonu verilmiştir. Buna karşılık, 2x resim oldukça iyi görünüyor.
Web'deki pikseller
Web'in tasarlanması sırasında görüntülerin% 99'u 96 dpi'ydi (veya ymiş gibi davranılıyor) ve bu açıdan varyasyon için çok az şey yapıldı. Ekran boyutlarındaki ve yoğunluklarındaki büyük çeşitlilikten dolayı, resimlerin çeşitli ekran yoğunlukları ve boyutlarında iyi görünmesini sağlayacak standart bir yönteme ihtiyacımız vardı.
HTML spesifikasyonu, kısa süre önce üreticilerin CSS pikselinin boyutunu belirlemek için kullandığı bir referans pikseli tanımlayarak bu sorunu giderdi.
Üretici, referans pikseli kullanarak cihazın fiziksel pikselin boyutunu standart veya ideal piksele göre belirleyebilir. Buna cihaz piksel oranı denir.
Cihazın piksel oranını hesaplama
Bir akıllı telefonun inç başına 180 piksel (ppi) fiziksel piksel boyutunda bir ekranı olduğunu varsayalım. Cihaz piksel oranını hesaplamak için üç adım gerekir:
Cihazın tutulduğu gerçek mesafeyi referans pikselin mesafesiyle karşılaştırın.
Özelliklere göre, 28 inç için idealin inç başına 96 piksel olduğunu biliyoruz. Ancak akıllı telefon olduğu için kullanıcılar cihazı dizüstü bilgisayara kıyasla yüzlerine daha yakın tutuyor. Bu mesafenin 45 cm olduğunu varsayalım.
Belirli bir mesafe için ideal piksel yoğunluğunu elde etmek amacıyla mesafe oranını standart yoğunlukla (96 ppi) çarpın.
idealPixelDensity = (28/18) * 96 = inç başına 150 piksel (yaklaşık)
Cihazın piksel oranını elde etmek için fiziksel piksel yoğunluğunun ideal piksel yoğunluğuna oranını alın.
devicePixelRatio= 180/150 = 1,2
Artık bir tarayıcının, ideal veya standart çözünürlüğe göre bir resmin ekrana sığması için nasıl yeniden boyutlandırılacağını bilmesi gerektiğinde, tarayıcı cihazın 1,2 piksel oranına, yani her ideal piksel için bu cihazın 1,2 fiziksel piksele sahip olduğunu belirtir. İdeal (web spesifikasyonu tarafından tanımlandığı şekilde) ve fiziksel (cihaz ekranındaki noktalar) piksel arasında geçiş yapmak için kullanılan formül şudur:
physicalPixels = window.devicePixelRatio * idealPixels
Geçmişte cihaz tedarikçileri, devicePixelRatios değerini (DPR'ler) yuvarlama eğilimindeydi. Apple'ın iPhone ve iPad'leri 1 DPR, Retina eşdeğerlerininki ise 2'dir. CSS spesifikasyonu,
piksel birimi, referans piksele en yakın cihaz pikseli tam sayısını ifade eder.
Yuvarlak oranların daha iyi olmasının bir nedeni, daha az alt piksel yapılarına yol açmalarıdır.
Ancak cihaz ortamının gerçekliği çok daha çeşitlidir ve Android telefonların DPR'si genellikle 1,5'tir. Nexus 7 tabletin DPR'si yaklaşık 1,33'tür.Bu değere, yukarıdakine benzer bir hesaplamayla elde edilmiştir. Gelecekte farklı DPR'lere sahip daha fazla cihaz görebilirsiniz. Bu nedenle, müşterilerinizin tam sayı DPR'lerine sahip olacağını asla varsaymayın.
HiDPI resim tekniklerine genel bakış
En iyi kaliteli resimleri olabildiğince hızlı gösterme sorununu çözmek için birçok teknik vardır. Bu teknikler iki kategoriye ayrılır:
- Tek resimleri optimize etme ve
- Birden fazla resim arasından seçim yapmayı optimize etme.
Tek resimli yaklaşımlar: Tek bir resim kullanın ancak bu resimle akıllıca bir şey yapın. Bu yaklaşımların dezavantajı, daha düşük DPI'ye sahip eski cihazlarda bile HiDPI resimler indireceğiniz için performanstan ödün vermenizdir. Tek resimli durum için bazı yaklaşımlar aşağıda verilmiştir:
- Çok sıkıştırılmış HiDPI resim
- Süper resim biçimi
- Progresif resim biçimi
Birden fazla resim yaklaşımı: Birden fazla resim kullanın ancak hangilerinin yükleneceğini seçmek için akıllıca bir şey yapın. Bu yaklaşımlar, geliştiricinin aynı öğenin birden çok sürümünü oluşturması ve ardından bir karar stratejisi belirlemesi için doğası gereği ek yük getirir. Seçenekleri aşağıda bulabilirsiniz:
- JavaScript
- Sunucu tarafı yayınlama
- CSS medya sorguları
- Yerleşik tarayıcı özellikleri (
image-set(),<img srcset>)
Yoğun biçimde sıkıştırılmış HiDPI resmi
Görseller, ortalama bir web sitesini indirmek için harcanan bant genişliğinin %60'ını oluşturuyor. Tüm istemcilere HiDPI resimler sunarak bu sayıyı artıracağız. Ne kadar büyüyecek?
90, 50 ve 20 JPEG kalitesinde 1x ve 2x resim parçaları oluşturan bazı testler çalıştırdım. Bunları oluşturmak için kullandığım kabuk komut dosyası (ImageMagick'i kullanıyor) aşağıda verilmiştir:
Bu küçük, bilimsel olmayan örneklemeden yola çıkılarak, büyük resimleri sıkıştırmanın kalite ile boyut arasında iyi bir denge sağladığı anlaşılıyor. Bence, çok sıkıştırılmış 2 kat görüntüler, sıkıştırılmamış 1 kat resimlerden daha iyi görünüyor.
Elbette 2x cihaza düşük kaliteli, yüksek oranda sıkıştırılmış 2x görüntü sunmak, daha yüksek kaliteli görüntüler sunmaktan daha kötüdür ve yukarıdaki yaklaşım, görüntü kalitesi cezalarına neden olur. Kalite: 90 resim ile Kalite: 20 resim seçeneklerini karşılaştırırsanız netlikte düşüş ve tanecikliliğin arttığını görürsünüz. Bu yapıların kabul edilmesi, yüksek kaliteli resimlerin önemli olduğu durumlarda (ör. fotoğraf görüntüleyici uygulaması) veya ödün vermek istemeyen uygulama geliştiriciler için uygun olmayabilir.
Yukarıdaki karşılaştırma tamamen sıkıştırılmış JPEG'lerle yapılmıştır. Yaygın olarak kullanılan resim biçimleri (JPEG, PNG, GIF) arasında birçok değiş tokuş olduğunu belirtmek isteriz. Bu da bizi şu noktaya getiriyor:
Süper resim biçimi
WebP, yüksek görüntü kalitesini korurken çok iyi sıkıştıran ilgi çekici bir resim biçimidir. Elbette, henüz her yerde uygulanmadı!
WebP desteğini kontrol etmenin bir yolu JavaScript'i kullanmaktır. data-uri aracılığıyla 1 piksellik bir resim yükler, loaded veya error etkinliklerinin tetiklenmesini bekler ve ardından boyutun doğru olduğunu doğrularsınız. Modernizr, Modernizr.webp üzerinden ulaşabileceğiniz böyle bir özellik algılama komut dosyası ile birlikte gelir.
Ancak bunu yapmanın daha iyi bir yolu, image() işlevini kullanarak doğrudan CSS'dedir. Dolayısıyla, WebP resminiz ve JPEG yedeğiniz varsa aşağıdakileri yazabilirsiniz:
#pic {
background: image("foo.webp", "foo.jpg");
}
Bu yaklaşımın birkaç sorunu vardır. İlk olarak, image() yaygın olarak
uygulanmadı. İkinci olarak, WebP sıkıştırması JPEG'i geride bıraksa da nispeten kademeli bir iyileştirmedir. Bu WebP galerisine göre yaklaşık %30 daha küçüktür. Dolayısıyla, WebP yüksek DPI sorununu çözmek için tek başına yeterli değildir.
Progresif resim biçimleri
JPEG 2000, Progressive JPEG, Progressive PNG ve GIF gibi aşamalı resim biçimlerinin, resmin tamamen yüklenmeden önce yerine gelmesini görme avantajı vardır (biraz tartışmalı bir avantajdır). Bu konuda çelişkili kanıtlar olsa da bazı boyut ek maliyetleri olabilir. Jeff Atwood, progresif modun "PNG resimlerin boyutuna yaklaşık% 20, JPEG ve GIF resim boyutuna ise yaklaşık% 10 oranında eklendiğini" iddia etti. Ancak Stoyan Stefanov, büyük dosyalar için aşamalı modun (çoğu durumda) daha verimli olduğunu iddia etti.
Progresif resimler, en iyi kaliteli resimleri mümkün olduğunca hızlı sunma bağlamında ilk bakışta çok ümit verici görünüyor. Buradaki amaç, ek verilerin görüntü kalitesini artırmayacağını anladığında tarayıcının görüntünün indirilmesini ve kodunu çözmesini durdurabilmesidir (ör. tüm doğruluk iyileştirmeleri alt pikseldir).
Bağlantıların sonlandırılması kolay olsa da yeniden başlatılması genellikle pahalıdır. Çok sayıda resmi olan bir site için en verimli yaklaşım, tek bir HTTP bağlantısını mümkün olduğunca uzun süre boyunca yeniden kullanarak etkin durumda tutmaktır. Bir resim yeterince indirildiği için bağlantı erken sonlandırılırsa tarayıcının yeni bir bağlantı oluşturması gerekir. Bu işlem, düşük gecikmeli ortamlarda gerçekten yavaş olabilir.
Bununla ilgili bir geçici çözüm, tarayıcıların getirilecek bir bayt aralığı belirtmesine olanak tanıyan HTTP Aralığı isteğini kullanmaktır. Akıllı bir tarayıcı, başlığı almak, işlemek, resmin ne kadarının gerçekten gerekli olduğuna karar vermek ve ardından getirmek için bir HEAD isteğinde bulunabilir. Maalesef HTTP aralığı, web sunucularında yeterince desteklenmediğinden bu yaklaşım pratik değildir.
Son olarak, bu yaklaşımın bariz bir sınırlaması, hangi resmin yükleneceğini seçememenizdir. Yalnızca aynı resmin farklı çözünürlüklerini seçebilirsiniz. Bu nedenle, "sanat yönetmenliği" kullanım alanı bu kapsamda değildir.
Hangi resmin yükleneceğine karar vermek için JavaScript kullanın
Hangi resmin yükleneceğine karar vermek için ilk ve en belirgin yaklaşım, istemcide JavaScript kullanmaktır. Bu yaklaşım, kullanıcı aracınız hakkında
her şeyi öğrenmenizi ve doğru şeyi yapmanızı sağlar. window.devicePixelRatio aracılığıyla cihaz piksel oranını belirleyebilir, ekran genişliğini ve yüksekliğini alabilir, hatta navigator.connection aracılığıyla ağ bağlantısı taraması yapabilir veya foresight.js kitaplığının yaptığı gibi sahte istek gönderebilirsiniz. Tüm bu bilgileri topladıktan sonra hangi resmin yükleneceğine karar verebilirsiniz.
Yukarıdaki gibi bir şey yapan yaklaşık bir milyon JavaScript kitaplığı vardır ve maalesef bunların hiçbiri özellikle öne çıkmaz.
Bu yaklaşımın en büyük dezavantajı, JavaScript'in kullanılması durumunda resmin yüklenmesinin, ileriye dönük ayrıştırıcı tamamlanana kadar erteleneceğidir. Bu, temel olarak resimlerin pageload etkinliği tetiklenene kadar indirilmeye bile başlamayacağı anlamına gelir. Bu konu hakkında daha fazla bilgiyi Jason Grigsby'nin makalesinde bulabilirsiniz.
Sunucuya hangi resmin yükleneceğine karar verme
Sunduğunuz her resim için özel istek işleyicileri yazarak kararı sunucu tarafına bırakabilirsiniz. Böyle bir işleyici, Kullanıcı Aracısı'na (sunucuya aktarılan tek bilgi parçası) dayanarak Retina desteğini kontrol eder. Ardından, sunucu tarafı mantığının HiDPI öğeleri sunup sunmayacağına bağlı olarak uygun öğeyi (bilinen bir adlandırma kuralına göre adlandırılmış) yüklersiniz.
Maalesef User-Agent, bir cihazın yüksek mi yoksa düşük kaliteli mi resim alması gerektiğine karar vermek için her zaman yeterli bilgi sağlamaz. Ayrıca, Kullanıcı Aracısı ile ilgili her şeyin bir saldırı olduğunu ve mümkünse kaçınılması gerektiğini söylemeye gerek yoktur.
CSS medya sorgularını kullanma
CSS medya sorguları açıklayıcı olduğundan amacınızı belirtmenize ve tarayıcının sizin adınıza doğru şeyi yapmasına olanak tanır. Medya sorgularının en yaygın kullanımına (eşleşen cihaz boyutu) ek olarak devicePixelRatio öğesini de eşleştirebilirsiniz. İlişkilendirilmiş medya sorgusu, cihaz-piksel oranıdır ve beklediğiniz gibi ilişkili minimum ve maksimum varyantlara sahiptir. Yüksek DPI resimler yüklemek istiyorsanız ve cihaz piksel oranı bir eşiği aşıyorsa aşağıdakileri yapabilirsiniz:
#my-image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
#my-image { background: (high.png); }
}
Tüm tedarikçi firma ön eklerinin karıştığı durumlarda durum biraz daha karmaşık hale gelir. Özellikle "min" ve "max" ön eklerinin yerleşimindeki çılgın farklılıklar nedeniyle:
@media only screen and (min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
#my-image {
background:url(high.png);
}
}
Bu yaklaşımla, JS çözümünde kaybedilen ileriye dönük ayrıştırmanın avantajlarından yeniden yararlanabilirsiniz. Ayrıca, duyarlı durma noktalarınızı seçme esnekliğine de sahip olursunuz (ör. düşük, orta ve yüksek DPI resimleriniz olabilir). Bu esneklik, sunucu tarafı yaklaşımında yoktu.
Maalesef bu yöntem hâlâ biraz hantal ve garip görünümlü CSS'lere yol açıyor (veya ön işleme gerektiriyor). Ayrıca bu yaklaşım CSS mülkleriyle sınırlıdır. Bu nedenle, <img src> ayarlamak mümkün değildir ve resimlerinizin tümü arka planı olan öğeler olmalıdır. Son olarak, yalnızca cihaz piksel oranına güvenerek yüksek DPI'li akıllı telefonunuzun EDGE bağlantısı kullanırken 2x boyutunda büyük bir resim öğesi indirdiği durumlarla karşılaşabilirsiniz. Bu, en iyi kullanıcı deneyimi değildir.
Yeni tarayıcı özelliklerini kullanma
Yüksek DPI resim sorunuyla ilgili web platformu desteği hakkında son zamanlarda çok fazla tartışma yapıldı. Apple da kısa süre önce bu alana girerek image-set() CSS işlevini WebKit'e ekledi. Sonuç olarak hem Safari
hem de Chrome desteklemektedir. CSS işlevi olduğundan image-set(), <img> etiketleriyle ilgili sorunu gidermez. Bu sorunu gideren ancak (bu makalenin yazıldığı sırada) henüz referans uygulamalarının bulunmadığı @srcset öğesini girin. Bir sonraki bölümde image-set ve srcset konuları ele alınmaktadır.
Yüksek DPI desteği için tarayıcı özellikleri
Sonuç olarak, hangi yaklaşımı kullanacağınıza karar
vermek belirli gereksinimlerinize bağlıdır. Bununla birlikte, yukarıda belirtilen yaklaşımların tümünün dezavantajları olduğunu unutmayın. Ancak gelecekte image-set ve srcset yaygın olarak desteklendiğinde bu soruna uygun çözümler olacaktır. Şimdilik bizi bu ideal geleceğe mümkün olduğunca yaklaştırabilecek bazı en iyi uygulamalardan bahsedelim.
Öncelikle, bu ikisi arasındaki farklar nelerdir? image-set(), arka plan CSS özelliğinin değeri olarak kullanılması uygun olan bir CSS işlevidir. srcset, benzer söz dizimine sahip <img> öğelerine özgü bir özelliktir.
Bu etiketlerin her ikisi de resim bildirimlerini belirtmenizi sağlar, ancak srcset özelliği, görüntü alanı boyutuna göre hangi resmin yükleneceğini de yapılandırmanıza olanak tanır.
Resim grubu için en iyi uygulamalar
image-set() CSS işlevi, -webkit-image-set() önekiyle kullanılabilir. Söz dizimi oldukça basittir. Bir veya daha fazla virgülle ayrılmış resim beyanı alır. Bu beyanlar, bir URL dizesi veya url() işlevinin ardından ilişkili çözünürlükten oluşur. Örneğin:
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Bu, tarayıcıya aralarından seçim yapılabilecek iki resim olduğunu bildirir. Biri 1x ekran, diğeri ise 2x ekran için optimize edilmiştir. Ardından tarayıcı, çeşitli faktörlere göre hangisinin yükleneceğini seçer. Bu faktörler arasında, tarayıcı yeterince akıllıysa ağ hızı da bulunabilir (Bildiğim kadarıyla şu anda uygulanmıyor).
Tarayıcı, doğru resmi yüklemenin yanı sıra uygun şekilde ölçeklendirir. Diğer bir deyişle tarayıcı, 2x resimlerin 1x resimlerin iki katı kadar büyük olduğunu varsayar ve bu nedenle, resmin sayfadaki boyutu aynı kalacak şekilde 2x resmini 2 faktörüyle küçültür.
1x, 1,5x veya Nx yerine, dpi cinsinden belirli bir cihaz piksel yoğunluğunu da belirtebilirsiniz.
Bu işlem, hiç resim göstermeyen image-set özelliğini desteklemeyen tarayıcılar dışında iyi sonuç verir! Bu durum kesinlikle kötüdür. Bu nedenle, sorunu gidermek için yedek (veya bir dizi yedek) kullanmanız gerekir:
background-image: url(icon1x.jpg);
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
/* This will be useful if image-set gets into the platform, unprefixed.
Also include other prefixed versions of this */
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Yukarıdaki örnek, uygun öğeyi, resim grubunu destekleyen
tarayıcılara yükler, aksi takdirde 1x öğeyi kullanır. Önemli uyarı, image-set() tarayıcı desteği düşük olsa da çoğu kullanıcı aracısının 1x öğeyi alacağıdır.
Bu demo, doğru resmi yüklemek için image-set() öğesini kullanır ve bu CSS işlevi desteklenmiyorsa 1x öğeyi kullanır.
Bu noktada, neden image-set() için polyfill (yani JavaScript shim oluşturma) yapmayıp işimi bitirmediğimi merak ediyor olabilirsiniz. CSS işlevleri için etkili çoklu dolguların uygulanmasının oldukça zor olduğu ortaya çıktı. (Nedeni hakkında ayrıntılı bilgi için bu www-style tartışmasına göz atın).
Resim srcset
Aşağıda srcset örneği verilmiştir:
<img alt="my awesome image"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 640w, banner-phone-HD.jpeg 640w 2x">
Gördüğünüz gibi, srcset öğesi, image-set tarafından sağlanan x beyanlarına ek olarak, en alakalı sürümü sunmaya çalışırken görüntü alanının boyutuna karşılık gelen w ve h değerlerini de alır. Yukarıdaki örnek, görüntü alanı genişliği 640 pikselin altında olan cihazlarda banner-phone.jpeg, küçük ekran yüksek DPI cihazlarına banner-phone-HD.jpeg, banner-HD.jpeg ekranı 640 pikselden büyük olan yüksek DPI cihazlarda ve diğer her şey için banner.jpeg'dir.
Resim öğeleri için resim grubunu kullanma
img öğelerindeki srcset özelliği çoğu tarayıcıda uygulanmadığından, img öğelerinizi <div> ile değiştirmek ve resim grubu yaklaşımını kullanmak cazip gelebilir. Bu yöntem, bazı sınırlamalarla kullanılabilir. Bunun dezavantajı, <img> etiketinin uzun süreli semantik değere sahip olmasıdır. Pratikte bu, çoğunlukla web tarayıcıları ve erişilebilirlik
nedeniyle önemlidir.
-webkit-image-set kullanmaya karar verirseniz background CSS özelliğini kullanmak isteyebilirsiniz. Bu yaklaşımın dezavantajı, resim boyutunu belirtmenizin gerekmesidir. 1x olmayan bir resim kullanıyorsanız bu belirsizdir.
Bunun yerine, içerik CSS özelliğini aşağıdaki gibi kullanabilirsiniz:
<div id="my-content-image"
style="content: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x);">
</div>
Bu işlem, resmi devicePixelRatio'ya göre otomatik olarak ölçeklendirir. Yukarıdaki tekniğin kullanıldığı bu örneğe bakın. Bu örnekte, image-set desteklemeyen tarayıcılar için url()'ye ek bir yedek seçenek de sunulmaktadır.
srcset için çoklu dolgu
srcset'ün kullanışlı özelliklerinden biri, doğal bir yedek seçeneği sunmasıdır.
srcset özelliğinin uygulanmadığı durumlarda tüm tarayıcılar src özelliğini işlemeyi bilir. Ayrıca, yalnızca bir HTML özelliği olduğundan JavaScript ile polyfill oluşturabilirsiniz.
Bu polyfill, spesifikasyona mümkün olduğunca yakın olmasını sağlamak için birim testleriyle birlikte gelir. Ayrıca, srcset doğal olarak uygulanırsa polyfill'in herhangi bir kod yürütmesini engelleyen kontroller vardır.
Polifill'in kullanıldığı bir demoyu burada bulabilirsiniz.
Sonuç
Yüksek DPI'li resimlerle ilgili sorunu çözmek için sihirli bir çözüm yoktur.
En kolay çözüm, resimleri tamamen kullanmaktan kaçınarak bunun yerine SVG ve CSS'yi tercih etmektir. Ancak bu, özellikle sitenizde yüksek kaliteli görüntüler varsa her zaman gerçekçi olmayabilir.
JS, CSS ve sunucu tarafı yaklaşımlarının her birinin güçlü ve zayıf yönleri vardır. Ancak en umut verici yaklaşım, yeni tarayıcı özelliklerinden yararlanmaktır. image-set ve srcset için tarayıcı desteği henüz tam olarak sağlanmamış olsa da şu anda kullanılabilecek makul yedek seçenekler mevcuttur.
Özetlemek gerekirse önerilerim aşağıdaki gibidir:
- Arka plan resimleri için, desteklemeyen tarayıcılar için uygun yedeklerle birlikte image-set öğesini kullanın.
- İçerik resimleri için srcset polyfill kullanın veya image-set'i kullanma yöntemini kullanın (yukarıya bakın).
- Resim kalitesinden ödün vermek istediğiniz durumlarda yoğun bir şekilde sıkıştırılmış 2x resimler kullanmayı düşünün.