Użyj deskryptorów gęstości

Katie Hempenius

Zobacz tę wersję demonstracyjną

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
• Odśwież stronę na różnych urządzeniach, by zobaczyć, jak przeglądarka wczytuje różne obrazy.

Możesz do tego użyć emulatora urządzenia. Jeśli chcesz poznać konkretną gęstość wyświetlacza, wypróbuj te urządzenia:

• Zapłać za produkt index.html za kod, który umożliwia działanie tej funkcji.

Jak to działa?

Dla większości osób pojęcie deskryptorów gęstości może być niezrozumiałe. Aby lepiej je zrozumieć, warto poznać nieco procesu obsługi pikseli przez przeglądarkę.

Czym są piksele

Zacznijmy od początku od zdefiniowania, co to jest piksel. Brzmi łatwo, ale pojęcie „piksel” może mieć wiele znaczeń:

Piksel urządzenia (inaczej „piksel fizyczny”)

Najmniejsza kropka koloru, która może zostać wyświetlona na urządzeniu.

Piksel logiczny

Informacje określające kolor w konkretnej lokalizacji siatki. Ten typ piksela nie ma naturalnego rozmiaru fizycznego.

Piksel CSS

Specyfikacja CSS definiuje piksel jako jednostkę miary fizycznej. 1 piksel = 1/96 cala.

Gęstość pikseli

Gęstość pikseli (nazywana również „gęstością ekranu” lub „gęstością wyświetlacza”) wskazuje gęstość pikseli urządzenia na danym obszarze fizycznym. Zwykle mierzy się to za pomocą pikseli na cal (ppi).

Przez wiele lat gęstość 96 ppi była bardzo powszechną rozdzielczością (w CSS piksel był definiowany przez CSS jako 1/96 cala). Począwszy od lat 80. była to domyślna rozdzielczość systemu Windows. Ponadto była ona rozdzielczość monitorów CRT.

Wszystko zaczęło się zmieniać w 2000 r., kiedy to monitory LED stały się powszechne. Szczególnie dużą popularnością cieszy się w 2010 r., kiedy firma Apple wprowadziła wyświetlacze Retina. Minimalna rozdzielczość tych wyświetlaczy wynosi 192 ppi, co stanowi dwa razy większą rozdzielczość niż zwykłe wyświetlacze (192 ppi/96 ppi = 2).

window.devicePixelRatio

Po wprowadzeniu nowszej technologii wyświetlania „piksele urządzeń” zaczęły się różnić pod względem rozmiaru i kształtu oraz nie były już takie same jak „piksele CSS”. Konieczność zdefiniowania zależności między rozmiarem „pikseli urządzenia” i „pikseli CSS” sprawiła, że wprowadzono parametr devicePixelRatio (czasami nazywany „współczynnikiem piksela CSS”).

devicePixelRatio określa relację między pikselami urządzenia a pikselami CSS dla danego urządzenia. W przypadku urządzenia o rozdzielczości 192 ppi parametr devicePixelRatio ma wartość 2 (192 ppi/96 ppi = 2), ponieważ „2 jego piksele wyświetlacza mają rozmiar 1 piksela CSS”.

Współcześnie większość urządzeń ma współczynnik pikseli w przedziale od 1,0 do 4,0.

• Aby określić gęstość pikseli na urządzeniu, wpisz w konsoli window.devicePixelRatio.

• W tej tabeli znajdziesz proporcje pikseli często używanych urządzeń. Większość mieści się w zakresie od 1,0 do 4,0.

Jak właściwie wykorzystać te informacje?

Dopasuj rozmiar zdjęć na podstawie proporcji pikseli urządzeń

Aby obrazy wyglądały jak najlepiej na ekranach o wysokiej rozdzielczości, musisz udostępnić różne wersje obrazu dla różnych parametrów devicePixelRatios.

Warto wiedzieć:

• Wymiary w pikselach podane w edytorach obrazów, katalogach plików i innych miejscach to wyznacznik liczby pikseli logicznych.
• Na ekranach o wyższej rozdzielczości i na większych ekranach potrzebujesz obrazów o większych wymiarach. Samo powiększenie mniejszych obrazów uniemożliwia wyświetlanie wielu wersji obrazu. Przeglądarka i tak zrobiłaby to, jeśli nie prześlesz obrazu w wysokiej rozdzielczości.

Używaj deskryptorów gęstości do wyświetlania wielu obrazów w usłudze

Deskryptory gęstości w połączeniu z atrybutem „srcset” umożliwiają wyświetlanie różnych obrazów na różnych urządzeniachPixelRatios.

• Przyjrzyj się plikowi index.html i zwróć uwagę na element <img>.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

W tym przykładzie ujmij go w słowa:

• 1x, 2x i 3x to deskryptory gęstości, które informują przeglądarkę o gęstości pikseli, dla których przeznaczony jest obraz. Dzięki temu przeglądarka nie musi pobierać obrazu w celu ustalenia tych informacji.
• Przeglądarka może wybrać jeden z 3 obrazów: flower-1x.jpg (przeznaczony dla przeglądarek o gęstości pikseli 1.0), flower-2x.jpg (przeznaczonych dla przeglądarek o gęstości pikseli 2.0) i flower-3x.jpg (przeznaczonych dla przeglądarek o gęstości pikseli 3.0).
• flower.jpg to obraz zastępczy wyświetlany w przeglądarkach, które nie obsługują srcset.

Jak tego użyć:

• Do zapisywania deskryptorów gęstości użyj jednostki devicePixelRatio i x. Na przykład deskryptor gęstości dla wielu ekranów Retina (window.devicePixelRatio = 2) byłby zapisany jako 2x.
• Jeśli deskryptor gęstości nie zostanie podany, przyjmuje się, że ma on postać 1x.
• Umieszczanie deskryptorów gęstości w nazwach plików jest powszechnie stosowane (i ułatwia śledzenie plików), ale nie jest konieczne. Obrazy mogą mieć dowolną nazwę pliku.
• Nie musisz dodawać atrybutu sizes. Atrybut sizes jest używany tylko z deskryptorami szerokości.