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

Katie Hempenius
Katie Hempenius
X

Bu demoyu inceleyin

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

1 kat 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
  • Bunu sağlayan kod için index.html sayfasına göz atın.

İşleyiş şekli

Yoğunluk tanımlayıcıları kavramı çoğu kişi için yabancı olabilir. Bunları daha iyi anlamak için tarayıcının piksellerle nasıl çalıştığı hakkında biraz bilgi sahibi olmak faydalı olacaktır.

Piksel nedir?

En baştan, pikselin ne olduğunu tanımlayarak başlayalım. Bu basit bir soru gibi görünse de "piksel" aslında birçok anlama gelebilir:

Cihaz pikseli ("fiziksel piksel" olarak da bilinir)
Bir cihazda görüntülenebilen en küçük renk noktası.
Mantıksal piksel
Izgaradaki belirli bir konumda rengi belirten bilgiler. Bu tür piksellerin kendine özgü fiziksel boyutu yoktur.
CSS pikseli
CSS spesifikasyonu, pikseli fiziksel bir ölçü birimi olarak tanımlar. 1 piksel = 1 inçin 96'da biri.

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 genellikle inç başına piksel (ppi) kullanılarak ölçülür.

Uzun yıllar boyunca 96 ppi çok yaygın bir ekran yoğunluğuydu (bu nedenle CSS, pikseli bir 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üğü de buydu.

2000'li yıllarda LED monitörlerin yaygınlaşmasıyla bu durum değişmeye başladı. Özellikle Apple, 2010'da Retina ekranları piyasaya sürdüğünde büyük ses getirmişti. Bu ekranların minimum çözünürlüğü 192 ppi'ydi. Bu, "normal" ekranların çözünürlüğünün iki katıydı (192 ppi/96 ppi = 2).

window.devicePixelRatio

Daha yeni ekran 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 pikselleri" ile aynı boyutta değildi. "Cihaz pikselleri" ile "CSS pikselleri" arasındaki ilişkiyi tanımlama ihtiyacı, devicePixelRatio (bazen "CSS Piksel Oranı" olarak da adlandırılır) özelliğinin kullanıma sunulmasına yol açtı.

devicePixelRatio, belirli bir cihaz için cihaz pikselleri ile CSS pikselleri arasındaki ilişkiyi tanımlar. 192 ppi değerine sahip bir cihazın devicePixelRatio değeri 2'dir (192 ppi/96 ppi = 2). Bunun nedeni, "ekran piksellerinden 2'sinin 1 CSS pikseli boyutunda olmasıdı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 olarak kullanılan cihazların piksel oranlarını görmek için bu tabloya bakın. Çoğu 1,0 ile 4,0 arasındadır.

Peki bu bilgileri nasıl uygulayacaksınız?

Resimleri cihaz piksel oranları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ğlamak gerekir.

Cihaz Piksel Oranı Şu anlama gelir: Bu cihazda, CSS genişliği 250 piksel olan bir <img> etiketi, kaynak resim aşağıdaki gibi olduğunda en iyi şekilde görünür...
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 boyutlu resimler kullanmanız gerekir. Küçük resimleri yalnızca büyütmek, birden fazla resim sürümü sunma amacına aykırıdır. Yüksek çözünürlüklü bir resim sağlanmasaydı tarayıcı bunu zaten yapardı.

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

Yoğunluk tanımlayıcılar, "srcset" özelliğiyle birlikte kullanılarak farklı devicePixelRatio'lara farklı resimler sunulabilir.

  • 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:

  • 1x, 2x ve 3x, tarayıcıya bir resmin amaçlanan 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ı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 öğesini desteklemeyen tarayıcılar için yedek resimdir.

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 (window.devicePixelRatio = 2) yoğunluk tanımlayıcısı 2x olarak yazılır.
  • Yoğunluk tanımlayıcı sağlanmazsa 1x olduğu varsayılır.
  • Dosya adlarına yoğunluk tanımlayıcıları eklemek yaygın bir kuraldır (ve dosyaları takip etmenize yardımcı olur) ancak zorunlu değildir. Resimlerin dosya adı herhangi bir ad olabilir.
  • sizes özelliğini eklemenize gerek yoktur. sizes özelliği yalnızca genişlik tanımlayıcılarla kullanılır.