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 kullanıcı için yabancı olabilir. Bu metrikleri daha iyi anlamak için tarayıcının piksellerle nasıl çalıştığı hakkında biraz bilgi sahibi olmanız gerekir.

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 bilinir), 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ü. Ayrıca CRT monitörlerin çözünürlüğüdür.

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

window.devicePixelRatio

Daha yeni görüntü teknolojilerinin kullanıma sunulmasıyla birlikte "cihaz pikselleri" fiziksel boyut ve şekil açısından farklılık göstermeye 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'lik bir cihazın devicePixelRatio değeri 2'dir (192 ppi/96 ppi = 2) çünkü "ekran piksellerinin 2'si 1 CSS piksel boyutundadır".

Günümüzde çoğu cihazın cihaz piksel oranı 1,0 ile 4,0 arasındadır.

  • Konsola 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 yine 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. Bu sayede tarayıcı, bu bilgileri belirlemek için resim indirmek zorunda kalmaz.
  • Tarayıcı üç resim arasından seçim yapabilir: flower-1x.jpg (1.0 piksel yoğunluğuna sahip tarayıcılar için), flower-2x.jpg (2.0 piksel yoğunluğuna sahip tarayıcılar için) ve flower-3x.jpg (3.0 piksel yoğunluğuna sahip tarayıcılar için).
  • 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. Resimlerin dosya adı herhangi bir şey olabilir.
  • sizes özelliği eklemenize gerek yoktur. sizes özelliği yalnızca genişlik tanımlayıcılarıyla kullanılır.