Użyj deskryptorów gęstości

Katie Hempenius

Poznaj tę wersję demonstracyjną

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran.
• Załaduj stronę na różnych urządzeniach, aby sprawdzić, czy przeglądarka wczytuje różne obrazy.

Możesz do tego użyć emulatora urządzenia. Jeśli zależy Ci na gęstości ekranu, możesz wypróbować te urządzenia:

• Aby poznać kod, który to umożliwia, odwiedź stronę index.html.

Jak to działa?

Większość osób może nie wiedzieć, czym są deskryptory gęstości. Aby lepiej je zrozumieć, warto zorientować się, jak przeglądarka obsługuje piksele.

Co to są piksele

Zacznijmy od początku, od zdefiniowania, czym jest piksel. Brzmi to prosto, ale „piksel” może mieć wiele znaczeń:

Piksele urządzenia (inaczej „fizyczne piksele”)

Najmniejszy punkt koloru, który może być wyświetlany na urządzeniu.

Element logiczny

Informacje określające kolor w konkretnym miejscu na siatce. Ten typ piksela nie ma żadnego wbudowanego rozmiaru fizycznego.

Piksel CSS

Specyfikacja CSS definiuje piksel jako jednostkę pomiaru fizycznego. 1 piksel = 1/96 cala.

Gęstość pikseli

Gęstość pikseli (nazywana też „gęstością ekranu” lub „gęstością wyświetlacza”) mierzy gęstość pikseli urządzenia na danym obszarze fizycznym. Jest ona zwykle mierzona w pikselach na cal (ppi).

Przez wiele lat rozdzielczość 96 ppi stanowiła bardzo powszechną gęstość wyświetlania (właśnie dlatego CSS definiuje piksel jako 1/96 cala). Od lat 80. XX w. była to domyślna rozdzielczość systemu Windows. W ten sposób udało się też rozwiązać monitory CRT.

Sytuacja zaczęła się zmieniać, gdy w pierwszej dekadzie XXI w. monitory LED stały się powszechne. W szczególności Apple wzbudziło duże zainteresowanie w 2010 r., gdy wprowadziło wyświetlacze Retina. Miały one minimalną rozdzielczość 192 ppi, czyli dwa razy większą niż „zwykłe” wyświetlacze (192 ppi/96 ppi = 2).

window.devicePixelRatio

Wraz z wprowadzeniem nowszej technologii wyświetlania „piksele urządzenia” różnią się wielkością i kształtem. Ich rozmiar przestał być taki sam jak „piksele CSS”. Potrzeba zdefiniowania relacji między rozmiarem „pikseli urządzenia” a „pikselami CSS” doprowadziła do wprowadzenia devicePixelRatio (czasami nazywanego „proporcją pikseli CSS”).

devicePixelRatio definiuje relację między pikselami urządzenia a pikselami CSS na danym urządzeniu. Urządzenie o przekątnej 192 ppi ma wartość devicePixelRatio o wartości 2 (192 ppi/96 ppi = 2), ponieważ „2 piksele wyświetlacza to rozmiar 1 piksela CSS”.

Obecnie współczynnik pikseli urządzenia mieści się w zakresie od 1,0 do 4,0.

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

• W tej tabeli znajdziesz współczynniki pikseli dla najpopularniejszych urządzeń. Większość z nich mieści się w zakresie od 1,0 do 4,0.

Jak można wykorzystać te informacje?

Dostosowywanie rozmiaru obrazów na podstawie współczynnika pikseli urządzenia

Aby obrazy wyglądały jak najlepiej na ekranach o wysokiej rozdzielczości, konieczne jest udostępnienie różnych wersji obrazów dla różnych devicePixelRatios.

Warto wiedzieć:

• Wymiary pikseli podane w edytorach obrazów, katalogach plików i innych miejscach są miarą pikseli logicznych.
• W przypadku ekranów o wyższej rozdzielczości i większych wyświetlaczy potrzebne będą obrazy o większych wymiarach. Samo powiększenie mniejszych obrazów nie spełnia celu przesyłania wielu wersji obrazu. Przeglądarka zrobiłaby to samo, gdyby nie było obrazu w wysokiej rozdzielczości.

Używanie atrybutów gęstości do wyświetlania wielu obrazów

Deskryptory gęstości w połączeniu z atrybutem „srcset” mogą służyć do wyświetlania różnych obrazów na różnych urządzeniachPixelRatios.

• Otwórz plik 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">

Ten przykład w słowie:

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

Jak korzystać z tej funkcji:

• Aby zapisać opisy gęstości, użyj wartości devicePixelRatio i jednostki x. Na przykład opis gęstości dla wielu ekranów Retina (window.devicePixelRatio = 2) będzie wyglądał tak: 2x.
• Jeśli nie podano opisu gęstości, przyjmuje się, że jest to 1x.
• Uwzględnianie deskryptorów gęstości w nazwach plików jest powszechną konwencją (pomoże Ci śledzić pliki), ale nie jest konieczne. Obrazy mogą mieć dowolną nazwę pliku.
• Nie musisz dodawać atrybutu sizes. Atrybut sizes jest używany tylko w przypadku opisów szerokości.