Günümüzün karmaşık cihaz ortamının özelliklerinden biri de çok çeşitli ekran piksel yoğunluğunun olmasıdır. Bazı cihazlar çok yüksek çözünürlüklü ekranlara sahipken, bazıları geride kalır. Uygulama geliştiricilerin çeşitli piksel yoğunluklarını desteklemesi gerekir. Bu da oldukça zorlu bir görev olabilir. Mobil web'deki zorluklar çeşitli faktörlerden kaynaklanır:
- Farklı form faktörlerine sahip çok çeşitli cihazlar.
- Kısıtlı ağ bant genişliği ve pil ömrü.
Görseller açısından, web uygulaması geliştiricilerinin hedefi mümkün olduğunca etkili şekilde en kaliteli resimleri sunmaktır. Bu makalede, hem bugün hem de yakın gelecekte bunu yaparken kullanabileceğiniz bazı faydalı teknikler ele alınmaktadır.
Mümkünse resim kullanmaktan kaçının
Bu solucan kutusunu açmadan önce web'de, büyük oranda çözünürlükten ve DPI'dan bağımsız olan birçok güçlü teknoloji bulunduğunu unutmayın. Özellikle metin, SVG ve CSS'nin çoğu, web'in otomatik piksel ölçeklendirme özelliği (devicePixelRatio aracılığıyla) nedeniyle "sorunsuzca çalışır".
Bununla birlikte, kafes görüntülerden her zaman kaçınamazsınız. Örneğin, sadece SVG/CSS'de çoğaltılması oldukça zor olan öğeler veya bir fotoğrafla uğraşıyor olabilirsiniz. Resmi otomatik olarak SVG'ye dönüştürebilirsiniz, ancak büyütülmüş sürümler genellikle iyi görünmediğinden fotoğrafların vektöre dönüştürülmesi pek anlamlı değildir.
Arka plan
Görüntü yoğunluğunun çok kısa geçmişi
İlk zamanlarda bilgisayar ekranlarının piksel yoğunluğu 72 veya 96 dpi (inç başına nokta sayısı) seviyesindeydi.
Ekranlar, kullanıcıların genellikle telefonlarını yüzlerine yakın tutarak pikselleri daha görünür hale getirdiği mobil kullanım alanında piksel yoğunluğunda kademeli bir iyileşme sağlar. 2008'de yeni norm 150 dpi telefonlardı. Görüntü yoğunluğundaki artış eğilimi devam etti ve günümüzün yeni telefonlarda 300 dpi ekranlar (Apple'ın "Retina" markası) kullanıldı.
Kutsal tablo, tabii ki, piksellerin tamamen görünmez olduğu bir görüntüdür. Telefon form faktörü söz konusu olduğunda, mevcut nesil Retina/HiDPI ekranlar bu ideale yakın olabilir. Ancak Project Glass gibi yeni donanım ve giyilebilir cihaz sınıfları muhtemelen 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 yüksek yoğunluklu kullanıcıların görmeye alışkın olduğu net görüntülerle karşılaştırıldığında, düşük yoğunluklu resimler kötü ve pikselleştirilmiş görünür. Aşağıda, 1x bir resmin 2x ekranda nasıl görüneceğine dair kaba bir simülasyon bulunmaktadır. Buna karşılık 2x resim oldukça iyi görünür.
Web'de pikseller
Web tasarlandığında, ekranların% 99'u 96 dpi'ydi (veya varmış gibiydı) ve bu açıdan varyasyonlar için birkaç hüküm yapıldı. Ekran boyutları ve yoğunluklarındaki büyük farklılıklar nedeniyle, resimlerin çeşitli ekran yoğunluklarında ve boyutlarında iyi görünmesini sağlayacak standart bir yönteme ihtiyacımız vardı.
HTML spesifikasyonu, yakın zamanda üreticilerin CSS pikselinin boyutunu belirlemek için kullandıkları bir referans pikseli tanımlayarak bu sorunu çözmüştür.
Üretici, referans pikselini kullanarak cihazın fiziksel pikselinin boyutunu standart veya ideal piksele göre belirleyebilir. Bu orana, cihaz piksel oranı denir.
Cihazın piksel oranı hesaplanıyor
Bir akıllı telefonun inç başına 180 piksel (ppi) fiziksel piksel boyutuna sahip bir ekranının olduğunu varsayalım. Cihazın piksel oranını hesaplamak üç adımdan oluşur:
Cihazın tutulduğu gerçek mesafeyi, referans pikselinin uzaklığıyla karşılaştırın.
Spesifikasyona göre, 28 inç için ideal değerin inç başına 96 piksel olduğunu biliyoruz. Ancak, bu bir akıllı telefon olduğu için kullanıcılar cihazı yüzlerine dizüstü bilgisayarlara yaptıklarından daha yakın tutar. Mesafenin 18 inç olduğunu tahmin edelim.
Verilen mesafe için ideal piksel yoğunluğunu elde etmek üzere 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
Bu nedenle, bir tarayıcının ideal veya standart çözünürlüğe göre bir resmi ekrana sığacak şekilde nasıl yeniden boyutlandıracağını bilmesi gerektiğinde, tarayıcı 1,2 cihaz piksel oranını ifade eder. Yani her ideal piksel için bu cihazın 1,2 fiziksel pikseli vardır. İdeal (web spesifikasyonunda tanımlandığı gibi) ve fiziksel (cihaz ekranındaki noktalar) pikseller arasında uygulanacak formül şudur:
physicalPixels = window.devicePixelRatio * idealPixels
Daha önce, cihaz satıcıları devicePixelRatios (DPR'ler) yuvarlama eğilimindeydi. Apple'ın iPhone ve iPad'i DPR'yi 1, Retina eşdeğerleri ise 2 raporluyor. CSS spesifikasyonu şunu önerir:
piksel birimi, referans piksele en iyi şekilde yaklaşan cihaz pikselinin tam sayısını belirtir.
Yuvarlak oranların daha iyi olmasının nedenlerinden biri, daha az alt piksel yapısına yol açabilmesidir.
Bununla birlikte, cihaz ortamı çok daha çeşitlidir ve Android telefonların DPR'leri genellikle 1, 5'tir. Nexus 7 tabletin DPR değeri yaklaşık 1,33'tür.Bu değer, yukarıdakine benzer bir hesaplamayla elde edilmiştir. Gelecekte, değişken DPR'lere sahip daha fazla cihaz görebilirsiniz. Bu nedenle, müşterilerinizin DPR'lerinin tam sayı olacağını asla varsaymamalısınız.
HiDPI görüntü tekniklerine genel bakış
En iyi kalitede resimleri olabildiğince hızlı bir şekilde gösterme sorununu çözmek için kullanılabilecek birçok teknik vardır. Bu teknikler genel olarak iki kategoriye ayrılır:
- Tek resimleri optimize etme ve
- Birden çok resim arasındaki seçim optimize ediliyor.
Tek resimli yaklaşımlar: Tek bir resim kullanın ancak bu resimle akıllıca bir şeyler yapın. Bu yaklaşımların dezavantajı, daha düşük DPI'ya sahip eski cihazlarda bile HiDPI görüntüleri indireceğiniz için kaçınılmaz olarak performanstan ödün vermektir. Tek resimli büyük/küçük harf durumuyla ilgili bazı yaklaşımları aşağıda bulabilirsiniz:
- Sıkıştırılmış HiDPI resim
- Mükemmel resim biçimi
- Progresif resim biçimi
Çoklu resim yaklaşımları: Birden çok resim kullanın ancak hangisinin yükleneceğini belirlemek için akıllıca bir şeyler yapın. Bu yaklaşımlarda, geliştiricinin aynı öğenin birden çok sürümünü oluşturması ve ardından bir karar stratejisi belirlemesi doğal olarak gider. Yararlanabileceğiniz seçenekler şunlardır:
- JavaScript
- Sunucu tarafı dağıtım
- CSS medya sorguları
- Yerleşik tarayıcı özellikleri (
image-set(),<img srcset>)
Sıkıştırılmış HiDPI resim
Görseller zaten ortalama bir web sitesini indirmek için harcanan bant genişliğinin% 60'ını kapsıyor. Tüm müşterilere HiDPI resimleri sunarak bu sayıyı artıracağız. Ne kadar büyüyecek?
JPEG kalitesinde 90, 50 ve 20 çözünürlükte 1x ve 2x resim parçası üreten bazı testler yaptım. Bunları oluşturmak için kullandığım (ImageMagick kullanan) kabuk komut dosyası şöyledir:
Bu küçük ve bilimsel olmayan örneklemeye göre, büyük resimlerin sıkıştırılması kalite açısından iyi bir denge sağlıyor. Benim gözümde, yoğun şekilde sıkıştırılmış 2x görüntüler, sıkıştırılmamış 1x resimlerden daha iyi görünür.
Elbette, 2x cihaza düşük kaliteli, yüksek düzeyde 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 yol açar. 90 resim ile 20 resim kalitesini karşılaştırırsanız netlikte düşüş ve grenlilikte artış görürsünüz. Bu yapılar, yüksek kaliteli resimlerin çok önemli olduğu durumlarda (örneğin, bir fotoğraf görüntüleyici uygulaması) veya güvenlikten ödün vermek istemeyen uygulama geliştiriciler için kabul edilmeyebilir.
Yukarıdaki karşılaştırma tamamen sıkıştırılmış JPEG'lerle yapılmıştır. Yaygın olarak uygulanan resim biçimleri (JPEG, PNG, GIF) arasında pek çok dengeleme var. Bu da bizi şu noktalara getiriyor:
Mükemmel resim biçimi
WebP, resimleri çok iyi sıkıştırırken yüksek görüntü kalitesini korurken oldukça ilgi çekici bir resim biçimidir. Elbette, henüz her yerde uygulanmıyor!
Bunun bir yolu JavaScript aracılığıyla WebP desteğini kontrol etmektir. data-uri aracılığıyla 1 piksel boyutunda bir görüntü yükler, yüklenen veya hata etkinliklerinin tetiklenmesini bekler ve ardından boyutun doğru olduğunu doğrularsınız. Modernizr, Modernizr.webp üzerinden kullanılabilen özellik algılama komut dosyası ile birlikte sunulur.
Bununla birlikte, bunu yapmanın daha iyi bir yolu, image() işlevini doğrudan CSS'de kullanmaktır. Dolayısıyla, bir WebP görüntünüz ve JPEG yedeğiniz varsa aşağıdakileri yazabilirsiniz:
#pic {
background: image("foo.webp", "foo.jpg");
}
Bu yaklaşımda birkaç sorun vardır. İlk olarak, image() hiç yaygın şekilde uygulanmamıştır. İkinci olarak, WebP sıkıştırması JPEG'yi sudan çıkarırken nispeten artımlı bir iyileştirmedir. Bu WebP galerisine göre yaklaşık% 30 daha küçüktür. Bu nedenle, yüksek DPI sorununu çözmek için
tek başına WebP yeterli olmaz.
Progresif resim biçimleri
JPEG 2000, Progresif JPEG, Progresif PNG ve GIF gibi progresif resim biçimleri, görüntünün tam olarak yüklenmeden önce yerine oturması (biraz tartışmalıdır) avantajına sahiptir. Bu konuda çelişkili kanıtlar olmakla birlikte, bir miktar ek yüke neden olabilir. Jeff Atwood, progresif modun "PNG resimlerin boyutuna yaklaşık% 20, JPEG ve GIF resimlerin boyutuna yaklaşık% 10 katkıda bulunduğunu" iddia ediyor. Ancak Stoyan Stefanov, büyük dosyalar için progresif modun daha verimli (çoğu durumda) olduğunu iddia etti.
Aşamalı resimler, ilk bakışta mümkün olan en hızlı şekilde en yüksek kaliteli resimleri sunma bağlamında çok umut verici görünüyor. Buradaki fikir, tarayıcının ek verilerin resim kalitesini artırmayacağını bildiğinde (diğer bir deyişle, kaliteyle ilgili tüm iyileştirmeler alt pikseldir) resmi indirmeyi ve resmin kodunu çözmeyi durdurabilmesidir.
Bağlantıları sonlandırmak kolay olsa da yeniden başlatmak genellikle pahalıdır. Çok sayıda resme sahip bir site için en verimli yaklaşım tek bir HTTP bağlantısını aktif tutmak ve bunu mümkün olduğunca uzun süre yeniden kullanmaktır. Bir görüntü yeterince indirildiği için bağlantı zamanından önce sonlandırılırsa tarayıcının, düşük gecikmeli ortamlarda gerçekten yavaş olabilecek yeni bir bağlantı oluşturması gerekir.
Bu sorunu gidermeye yönelik çözümlerden biri, tarayıcıların getirilecek bayt aralığını belirtmesine olanak tanıyan HTTP Aralığı isteğini kullanmaktır. Akıllı bir tarayıcı, başlığa ulaşmak için HEAD isteğinde bulunabilir, resmi işleyebilir, resmin ne kadarının gerçekten gerekli olduğuna karar verebilir ve ardından getirme işlemini gerçekleştirebilir. Ne yazık ki HTTP Aralığı web sunucularında yeterince desteklenmediğinden bu yaklaşım pek de pratik değil.
Son olarak, bu yaklaşımın bariz bir sınırlaması, hangi resmin yükleneceğini seçemiyor olmanız, aynı resmin yalnızca kalitelerinin farklı olmasıdır. Sonuç olarak bu, "resim yönü" kullanım alanı kapsamına girmez.
Hangi resmin yükleneceğine karar vermek için JavaScript kullanın
Hangi resmin yükleneceğine karar vermek için kullanılabilecek ilk ve en belirgin yaklaşım, istemcide JavaScript kullanmaktır. Bu yaklaşım, kullanıcı aracınız hakkındaki her şeyi
öğrenip doğru olanı yapmanızı sağlar. Cihaz piksel oranını window.devicePixelRatio aracılığıyla belirleyebilir, ekran genişliğini ve yüksekliğini elde edebilir, hatta navigator.connection kullanarak veya foresight.js kitaplığının yaptığı gibi sahte bir istek göndererek ağ bağlantılarını kontrol edebilirsiniz. Tüm bu bilgileri topladıktan sonra
hangi resmin yükleneceğine karar verebilirsiniz.
Yukarıdakilere benzer bir şey yapan yaklaşık bir milyon JavaScript kitaplığı bulunmaktadır ve ne yazık ki bunların hiçbiri özellikle olağanüstü değildir.
Bu yaklaşımın en büyük dezavantajlarından biri, JavaScript kullanmanın, resim yüklemeyi ileriye dönük ayrıştırıcı tamamlanıncaya kadar geciktireceğiniz anlamına gelir. Bu, temel olarak pageload etkinliği tetiklenene kadar resimlerin indirilmeye başlanmadığı anlamına gelir. Bu konuyla ilgili daha fazla bilgiyi Jason Grigsby'nin makalesinde bulabilirsiniz.
Sunucuya hangi resmin yükleneceğine karar verin
Sunduğunuz her görüntü için özel istek işleyiciler yazarak kararı sunucu tarafına erteleyebilirsiniz. Böyle bir işleyici, Retina desteğini User-Agent (sunucuya aktarılan tek bilgi parçası) temelinde kontrol eder. Daha sonra, sunucu tarafı mantığının HiDPI öğelerini sunmak isteyip istemediğine bağlı olarak, uygun öğeyi (bilinen bir kurala göre adlandırılmış) yüklersiniz.
Ne yazık ki Kullanıcı Aracısı, bir cihazın yüksek kalitede görüntü mü alacağına karar vermek için yeterli bilgi sağlamaz. Ayrıca, User-Agent ile ilgili her şeyin bilgisayar korsanlığı olduğunu ve mümkünse kaçınılması gerektiğini söylemeye gerek yok.
CSS medya sorgularını kullanma
Bildirim temelli CSS medya sorguları, amacınızı belirtmenizi sağlar ve tarayıcının sizin adınıza doğru olanı yapmasına izin verir. Medya sorgularının en yaygın kullanımına (cihaz boyutuyla eşleşen) ek olarak devicePixelRatio de eşleştirebilirsiniz. İlişkili medya sorgusu, cihaz piksel oranıdır ve beklediğiniz gibi ilişkili minimum ve maksimum varyantları içerir. Yüksek DPI görüntüleri yüklemek istiyorsanız ve cihazın piksel oranı belirli 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 öneklerinin bir arada kullanılması, özellikle "min" ve "max" ön eklerinin yerleştirilmesindeki olağanüstü farklılıklar nedeniyle biraz daha karmaşık hale gelir:
@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üyle birlikte kaybedilen ileriye dönük ayrıştırma özelliğinin avantajlarını yeniden kazanırsınız. Ayrıca, duyarlı ayrılma noktalarını seçme esnekliği de elde edersiniz (örneğin, düşük, orta ve yüksek DPI'lı resimleriniz olabilir). Ancak bu resimler, sunucu tarafı yaklaşımıyla kaybolur.
Maalesef hâlâ biraz kullanışlı değil ve garip görünümlü CSS'ye yol açıyor (veya ön işleme gerektiriyor). Ayrıca, bu yaklaşım CSS özellikleriyle sınırlıdır. Bu nedenle, <img src> ayarlanamaz ve resimlerinizin tümü arka plana sahip öğeler olmalıdır. Son olarak, tamamen cihaz piksel oranına bağlı kalırsanız, Yüksek DPI'ya sahip akıllı telefonunuzun EDGE bağlantısı açıkken devasa bir 2x resim öğesi indirmesi gibi durumlarla karşılaşabilirsiniz. Çok iyi bir kullanıcı deneyimi bu değil.
Yeni tarayıcı özelliklerini kullanma
Yüksek DPI görüntü sorunuyla ilgili web platformu desteği son zamanlarda birçok kez tartışıldı. Apple kısa süre önce bu alana girip image-set() CSS işlevini WebKit'e getirdi. Sonuç olarak, hem Safari
hem de Chrome desteklemektedir. Bu bir CSS işlevi olduğundan, image-set()
<img> etiketleriyle ilgili sorunu ele almaz. Bu sorunu ele alan ancak (bu yazı yazıldığında) (henüz) referans uygulaması bulunmayan @srcset girin. Bir sonraki bölümde image-set ve srcset konusu ayrıntılı olarak ele alınmaktadır.
Yüksek DPI desteği için tarayıcı özellikleri
Sonuç olarak hangi yaklaşımı kullanacağınıza karar vermek, belirlediğiniz belirli şartlara bağlıdır. Bununla birlikte, yukarıda bahsedilen tüm yaklaşımların
dezavantajları olduğunu unutmayın. Ancak ileride image-set ve srcset geniş ölçüde desteklendiğinde bu soruna uygun çözümler olacaktır. Şimdilik ideal geleceğe mümkün olduğunca yaklaşmamızı
sağlayabilecek bazı en iyi uygulamalardan bahsedelim.
Öncelikle, bu ikisi arasındaki fark nedir? image-set(), arka plan CSS özelliğinin değeri olarak kullanılmaya uygun bir CSS işlevidir. srcset, benzer söz dizimine sahip <img> öğelerine özel bir özelliktir.
Bu etiketlerin ikisi de resim bildirimlerini belirtmenizi sağlar, ancak srcset özelliği, görüntü alanı boyutuna göre hangi resmin yükleneceğini yapılandırmanıza da olanak tanır.
Resim grubu için en iyi uygulamalar
image-set() CSS işlevi, -webkit-image-set() ön ekiyle kullanılabilir. Söz dizimi oldukça basittir. Bir URL dizesi veya url() işlevi ardından ilişkili çözünürlükten oluşan bir veya daha fazla virgülle ayrılmış resim bildirimi alınabilir. Örneğin:
background-image: -webkit-image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Bu, tarayıcıya aralarından seçim yapabileceğiniz iki resim olduğunu bildirir. Bunlardan biri 1x, diğeri 2x ekranlar için optimize edilmiştir. Daha sonra tarayıcı, yeterince akıllıysa (şu anda şu anda uygulanmadığı halde) ağ hızını bile içerebilecek çeşitli faktörlere dayanarak hangisinin yükleneceğini seçer.
Tarayıcı, doğru resmi yüklemenin yanı sıra resmi uygun şekilde ölçeklendirir. Diğer bir deyişle, tarayıcı 2 resmin 1x resmin iki katı büyüklükte olduğunu varsayar ve bu nedenle 2x resmi 2 kat küçülterek resmin sayfada aynı boyutta görünmesini sağlar.
1x, 1, 5x veya Nx yerine belirli bir cihaz piksel yoğunluğunu dpi olarak belirtebilirsiniz.
Bu, hiçbir resim göstermeyen image-set özelliğini desteklemeyen tarayıcılar dışında iyi bir şekilde çalışır. Bu açıkça kötü bir durumdur. Dolayısıyla bu sorunu gidermek için bir 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 işlem, uygun öğeyi, resim grubunu destekleyen tarayıcılarda yükler ve aksi takdirde 1x öğesine geri döner. Dikkat edilmesi gereken en önemli nokta, image-set() tarayıcı desteği düşük olsa da çoğu kullanıcı aracısının 1x öğesi alacağıdır.
Bu demoda, doğru resmi yüklemek için image-set() kullanılır ve bu CSS işlevi desteklenmiyorsa 1x öğesine döner.
Bu noktada, neden sadece çoklu dolgunun (yani, image-set() için bir JavaScript dolgusu derleyip) bir günlük olarak adlandırılmadığını merak ediyor olabilirsiniz. CSS işlevleri için verimli çoklu dolgular uygulamak oldukça zordur. (Neden ayrıntılı bir açıklama için bu www tarzı tartışmaya bakın).
Resim srcset
Aşağıda bir 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 bildirimlerine ek olarak görüntü alanının boyutuna karşılık gelen w ve h değerlerini de alarak en alakalı sürümü sunmaya çalışır. Yukarıdaki görüntü, görüntü alanı genişliği 640 pikselin altında olan cihazlara banner-phone.jpeg, küçük ekranlı yüksek DPI cihazlara, banner-HD.jpeg, 640 pikselden büyük ekranlara sahip yüksek DPI cihazlara ve diğer her şeye banner.jpeg sunulur.
Resim öğeleri için resim kümesi kullanma
img öğelerinde srcset özelliği çoğu tarayıcıda uygulanmadığından, img öğelerinizi arka planlarla (<div>) değiştirmek ve "resim ayarlama" yaklaşımını kullanmak cazip gelebilir. Bu, ancak uyarılarla
işe yarayacaktır. Buradaki dezavantaj, <img> etiketinin uzun süreli semantik değerine sahip olmasıdır. Pratikte bu, web tarayıcıları ve erişilebilirlik nedenlerinden
çok önemlidir.
-webkit-image-set kullanmaya karar verirseniz arka plan CSS özelliğini kullanmak isteyebilirsiniz. Bu yaklaşımın dezavantajı, resim boyutunu belirtmenizin gerekmesidir. 1x olmayan bir resim kullanıyorsanız bu bilinmez.
Bunu yapmak yerine, content 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 değerine göre otomatik olarak ölçeklendirir. image-set'yi desteklemeyen tarayıcılar için ek url() yedeğiyle birlikte yukarıdaki tekniğin nasıl çalıştığını gösteren bu örneğe bakın.
Çoklu doldurma srcset
srcset ürününün kullanışlı bir özelliği, doğal bir yedekle birlikte sunulmasıdır.
srcset özelliğinin uygulanmadığı durumlarda, tüm tarayıcılar src özelliğini işleyeceğini bilir. Ayrıca, yalnızca bir HTML özelliği olduğundan, JavaScript ile çoklu dolgular oluşturmak mümkündür.
Bu çoklu dolgu, spesifikasyona mümkün olduğunca yakın olduğundan emin olmak için birim testleri ile sunulur. Buna ek olarak, srcset yerel olarak uygulanırsa çoklu dolgunun herhangi bir kod yürütmesini engelleyen kontroller de vardır.
Aşağıda, çoklu dolgunun demosunu görebilirsiniz.
Sonuç
Yüksek DPI resimler sorununu çözmek için sihirli bir madde yoktur.
En kolay çözüm, resimlerden tamamen kaçınarak bunun yerine SVG ve CSS'yi etkinleştirmektir. Ancak bu, özellikle sitenizde yüksek kaliteli görüntüler varsa her zaman gerçekçi değildir.
JS, CSS'deki yaklaşımların ve sunucu tarafını kullanmanın kendi güçlü ve zayıf yönleri vardır. Ancak en gelecek vadeden yaklaşım, yeni tarayıcı
özelliklerinden yararlanmak. image-set ve srcset için tarayıcı desteği hâlâ eksik olsa da bugün kullanabileceğiniz makul yedekler vardır.
Önerilerimi özetlemek gerekirse:
- Arka plan resimleri için, desteklenmeyen tarayıcılar için uygun yedeklerle image-set kullanın.
- İçerik görüntüleri için srcset çoklu dolgusu kullanın veya yedek olarak image-set'i kullanın (yukarıya bakın).
- Resim kalitesinden ödün vermek isteyeceğiniz durumlar için yoğun şekilde sıkıştırılmış 2 kat resimler kullanmayı düşünün.