Yoğunluk açıklayıcıları kullanın

Katie Hempenius
Katie Hempenius
X

Bu Demoyu Keşfedin

  • Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran 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 ve 3x, 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) ve flower-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.