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

Katie Hempenius
Katie Hempenius
X

Bu Demoyu Keşfetme

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, 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ına sahip cihazlar arıyorsanız deneyebileceğiniz bazı cihazlar şunlardır:

1x yoğunluk Blackberry Playbook, birçok harici monitör
2 kat yoğunluk iPad veya iPhone 5/6
3 kat yoğunluk Galaxy S5 veya iPhone X
  • Bu işlemi gerçekleştiren kod için index.html adresine göz atın.

İşleyiş şekli

Yoğunluk tanımlayıcıları kavramı çoğu kişi için pek iyi olmayabilir. Bunları daha iyi anlamak için tarayıcının piksellerle nasıl çalıştığıyla ilgili biraz bilgi sahibi olmanız faydalı olacaktır.

Piksel nedir?

Baştan başlayarak pikselin ne olduğunu tanımlayalım. Bu basit bir konu gibi görünse de "piksel"in aslında birçok anlamı olabilir:

Cihaz pikseli ("fiziksel piksel" olarak da bilinir)
Bir cihazda görüntülenebilecek en küçük renk noktası.
Mantıksal piksel
Tablodaki belirli bir konumdaki rengi belirten bilgiler. Bu tür piksellerin doğal fiziksel boyutu yoktur.
CSS pikseli
CSS spesifikasyonu, pikseli fiziksel bir ölçü birimi olarak tanımlar. 1 piksel = 1 inçin 96'da 1'i.

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) kullanılarak ölçülür.

96 ppi, uzun yıllar boyunca çok yaygın bir ekran yoğunluğuydu (bu nedenle CSS, pikseli inçin 1/96'sı olarak tanımlar). 1980'lerden itibaren Windows'un varsayılan çözünürlüğüydü. Buna ek olarak, CRT monitörlerin çözünürlüğüdür.

2000'lerde LED monitörler yaygınlaştıkça bu durum değişmeye başladı. Özellikle Apple, 2010 yılında Retina ekranları kullanıma sunarak büyük bir etki yarattı. Bu ekranlar minimum 192 ppi çözünürlüğe sahipti. Bu da, "normal" ekranların iki katı çözünürlüğe sahipti (192 ppi/96 ppi = 2).

window.devicePixelRatio

Daha yeni görüntü teknolojilerinin kullanıma sunulmasıyla birlikte "cihaz pikselleri" fiziksel boyut ve şekil olarak değişmeye başladı ve artık "CSS pikselleriyle" aynı boyuta sahip değildi. "Cihaz pikselleri" ile "CSS pikselleri"nin boyutu arasındaki ilişkiyi tanımlama ihtiyacı, devicePixelRatio'ün (bazen "CSS piksel oranı" olarak da adlandırılır) kullanıma sunulmasına yol açmıştır.

devicePixelRatio, belirli bir cihaz için cihaz pikselleri ile CSS pikselleri arasındaki ilişkiyi tanımlar. 192 ppi'lık bir cihazın devicePixelRatio değeri 2'dir (192 ppi/96 ppi = 2) çünkü "ekran piksellerinden 2'si 1 CSS pikseli 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 cihazların piksel oranlarını görmek için bu tabloyu inceleyin. Çoğu 1,0 ile 4,0 arasındadır.

Peki bu bilgileri nasıl uygulayabilirsiniz?

Resimleri cihaz piksel oranına göre boyutlandırma

Resimlerin yüksek çözünürlüklü ekranlarda en iyi şekilde görünmesi için farklı devicePixelRatios için farklı resim sürümleri sağlamanız gerekir.

Cihaz piksel oranı Şunu gösterir: Bu cihazda, CSS genişliği 250 piksel olan bir <img> etiketi, kaynak resim...
1 1 cihaz pikseli = 1 CSS pikseli 250 piksel genişliğinde
2 2 cihaz pikseli = 1 CSS pikseli 500 piksel genişliğinde
3 3 cihaz pikseli = 1 CSS pikseli 750 piksel genişliğinde

Ö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 boyutlara sahip resimlere ihtiyacınız vardır. Küçük resimleri büyütmek, birden fazla resim sürümü yayınlamanın amacını ortadan kaldırır. Yüksek çözünürlüklü resim sağlanmamış olsaydı tarayıcı bunu zaten yapardı.

Birden fazla
resmi yayınlamak için yoğunluk tanımlayıcıları kullanma

Yoğunluk tanımlayıcıları, "srcset" özelliğiyle birlikte farklı devicePixelRatio değerlerine sahip cihazlara farklı resimler sunmak için kullanılabilir.

  • index.html dosyasına göz atın ve <img> öğesini not edin.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Bu örnekte, aşağıdakiler kelimelere dökülmüştür:

  • 1x, 2x ve 3x, tarayıcıya bir resmin amaçlanan piksel yoğunluğunu bildiren yoğunluk tanımlayıcılardır. Böylece, tarayıcı bu bilgileri belirlemek için resim indirme ihtiyacını ortadan kaldırır.
  • Tarayıcı üç resim arasından seçim yapabilir: flower-1x.jpg (1.0 piksel yoğunluğuna sahip tarayıcılar için tasarlanmıştır), flower-2x.jpg (2.0 piksel yoğunluğuna sahip tarayıcılar için tasarlanmıştır) ve flower-3x.jpg (3.0 piksel yoğunluğuna sahip tarayıcılar için tasarlanmıştır).
  • flower.jpg, srcset'yi desteklemeyen tarayıcılar için yedek resimdir.

Bu özelliği kullanma:

  • Yoğunluk tanımlayıcıları yazmak için devicePixelRatio ve x birimini kullanın. Örneğin, birçok Retina ekranın (window.devicePixelRatio = 2) yoğunluk tanımlayıcısı 2x olarak yazılır.
  • Yoğunluk tanımlayıcısı sağlanmazsa 1x olduğu varsayılır.
  • Dosya adlarına yoğunluk tanımlayıcıları eklemek yaygın bir uygulamadır (ve dosyalarınızı takip etmenize yardımcı olur) ancak zorunlu değildir. Resimler herhangi bir dosya adına sahip olabilir.
  • sizes özelliği eklemenize gerek yoktur. sizes özelliği yalnızca genişlik tanımlayıcılarıyla kullanılır.