Bu Demoyu Keşfedin
- Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.
- Tarayıcının farklı resimler yüklediğini görmek için sayfayı farklı cihazlar kullanarak yeniden yükleyin.
Bunun için cihaz emülatörünü kullanabilirsiniz. Belirli ekran yoğunluklarını arıyorsanız şu cihazları deneyebilirsiniz:
1x yoğunluk | Blackberry Playbook, birçok harici monitör |
2x yoğunluk | iPad veya iPhone 5/6 |
3x yoğunluk | Galaxy S5 veya iPhone X |
- Bu işlevin çalışmasını sağlayan kod için
index.html
ödeme yapın.
İşleyiş şekli
Yoğunluk açıklayıcıları kavramı çoğu kişiye tanıdık gelebilir. Tarayıcının piksellerle çalışma şekli hakkında biraz bilgi sahibi olmak, bunları daha iyi anlamanıza yardımcı olur.
Piksel nedir?
En baştan pikselin ne olduğunu tanımlayarak başlayalım. Bu kulağa basit geliyor, ancak "piksel"in aslında birçok anlamı olabilir:
- Cihaz pikseli ("fiziksel piksel" olarak da bilinir)
- Bir cihazda gösterilebilen en küçük renk noktası.
- Mantıksal piksel
- Izgarada belirli bir konumdaki rengi belirten bilgi. Bu piksel türünün doğal bir fiziksel boyutu yoktur.
- CSS pikseli
- CSS spesifikasyonu, pikseli bir fiziksel ölçüm birimi olarak tanımlar. 1 piksel = bir inçin 1/96'sı.
Piksel Yoğunluğu
Piksel yoğunluğu ("ekran yoğunluğu" veya "görüntü yoğunluğu" olarak da adlandırılır), belirli bir fiziksel alandaki cihaz piksellerinin yoğunluğunu ölçer. Bu değer genellikle inç başına piksel (ppi) cinsinden ölçülür.
96 ppi yıllar boyunca çok yaygın olarak kullanılan bir görüntü yoğunluğuydu (bu yüzden CSS, pikseli bir inçin 1/96'sı olarak tanımlardı). 1980'lerden itibaren bu, Windows'un varsayılan çözünürlüğüydü. Ayrıca, CRT monitörlerin çözünürlüğü de geçerliydi.
LED monitörler 2000'lerde yaygınlaştıkça bu durum da değişmeye başladı. Özellikle Apple, 2010 yılında Retina ekranları kullanıma sunduğunda büyük bir sıçrama yaptı. Bu ekranlar, minimum 192 ppi çözünürlüğe sahipti. Bu, "normal" ekranların çözünürlüğünün iki katıydı (192 ppi/96 ppi = 2).
window.devicePixelRatio
Daha yeni görüntüleme teknolojisinin kullanılmaya başlanmasıyla "cihaz pikselleri", fiziksel boyut ve şekil açısından değişiklik göstermeye başlamıştır ve artık "CSS pikselleri" ile aynı boyutta değildir. "Cihaz pikselleri" ile "CSS pikselleri" arasındaki ilişkiyi tanımlama ihtiyacı, devicePixelRatio
(bazen "CSS Piksel Oranı" olarak adlandırılır) kullanıma sunulmasına neden olmuştur.
devicePixelRatio
, belirli bir cihaz için cihaz pikselleri ile CSS pikselleri arasındaki ilişkiyi tanımlar. 192 ppi cihazın devicePixelRatio
değeri 2'dir (192 ppi/96 ppi = 2). "Ekran piksellerinin 2'si 1 CSS pikselinin boyutundadır".
Günümüzde çoğu cihazın cihaz piksel oranı 1,0 ile 4,0 arasındadır.
Konsolda
window.devicePixelRatio
yazarak bir cihazın piksel yoğunluğunu belirleyin.Yaygın kullanılan cihazların piksel oranlarını görmek için bu tabloyu görüntüleyin. Çoğunlukla 1,0 ile 4,0 arasındadır.
Peki bu bilgileri tam olarak nasıl kullanabilirsiniz?
Resimleri cihaz piksel oranlarına göre boyutlandırın
Resimlerin yüksek çözünürlüklü ekranlarda en iyi şekilde görünmelerini sağlamak üzere farklı devicePixelRatios
için farklı resim sürümleri sağlamak gerekir.
Cihaz Piksel Oranı | Şunları belirtir: | Bu cihazda, CSS genişliği 250 piksel olan bir <img> etiketi şu durumlarda en iyi şekilde görünür: |
---|---|---|
1 | 1 cihaz pikseli = 1 CSS pikseli | 250 piksel genişlik |
2 | 2 cihaz pikseli = 1 CSS pikseli | 500 piksel genişlik |
3 | 3 cihaz pikseli = 1 CSS pikseli | 750 piksel genişlik |
Önemli noktalar:
- Resim düzenleyicilerde, dosya dizinlerinde ve diğer yerlerde listelenen piksel boyutları mantıksal piksellerin ölçümüdür.
- Daha yüksek çözünürlüklü ekranlar ve daha büyük ekranlar için daha büyük boyutlu resimlere ihtiyacınız vardır. Yalnızca daha küçük resimlerin büyütülmesi, birden fazla resim versiyonu sunma amacını ortadan kaldırır. Yüksek çözünürlüklü bir resim sağlanmasaydı, tarayıcı bunu yine de yapardı.
Birden çok
resmi sunmak için Yoğunluk Tanımlayıcıları kullanın
Yoğunluk tanımlayıcıları, "srcset" özelliğiyle birlikte farklı cihazPixelRatios'larına farklı resimler sunmak amacıyla kullanılabilir.
index.html
dosyasına göz atın ve<img>
öğesine dikkat edin.
<img src="flower.jpg"
srcset="flower-1x.jpg 1x,
flower-2x.jpg 2x,
flower-3x.jpg 3x">
Bu örnekten kelimeler:
1x
,2x
ve3x
, tarayıcıya bir resmin hedeflendiği piksel yoğunluğunu bildiren yoğunluk tanımlayıcılarıdır. Bu sayede, tarayıcının bu bilgileri belirlemek için resim indirmesi gerekmez.- Tarayıcı üç resim arasından seçim yapabilir:
flower-1x.jpg
(1.0
piksel yoğunluğuna sahip tarayıcılara yöneliktir),flower-2x.jpg
(2.0
piksel yoğunluğuna sahip tarayıcılara yöneliktir) veflower-3x.jpg
(3.0
piksel yoğunluğuna sahip tarayıcılara yöneliktir). flower.jpg
,srcset
özelliğini desteklemeyen tarayıcılar için yedek resim.
Bu nasıl kullanılır?
- Yoğunluk tanımlayıcıları yazmak için devicePixelRatio ve
x
birimini kullanın. Örneğin, birçok Retina ekranının yoğunluk tanımlayıcısı (window.devicePixelRatio = 2
)2x
olarak yazılır. - Yoğunluk açıklayıcısı sağlanmazsa
1x
olduğu varsayılır. - Dosya adlarına yoğunluk tanımlayıcıları eklemek yaygın bir yöntemdir (ve dosyaları takip etmenize yardımcı olur) ancak gerekli değildir. Görüntüler herhangi bir dosya adına sahip olabilir.
sizes
özelliği eklemenize gerek yoktur.sizes
özelliği yalnızca genişlik açıklayıcılarıyla kullanılır.