Użyj deskryptorów gęstości

Katie Hempenius

Poznaj 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 szukasz konkretnych gęstości pikseli, wypróbuj te urządzenia:

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

Jak to działa?

Pojęcie deskryptorów gęstości może być nieznane większości osób. Aby lepiej je zrozumieć, warto wiedzieć, jak przeglądarka obsługuje piksele.

Co to są piksele

Zacznijmy od początku, od zdefiniowania, czym jest piksel. Brzmi to prosto, ale słowo „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 96 ppi była bardzo popularną gęstością pikseli (stąd definicja piksela w CSS jako 1/96 cala). Od lat 80. XX w. była to domyślna rozdzielczość systemu Windows. Poza tym była to rozdzielczość monitorów CRT.

Sytuacja zaczęła się zmieniać, gdy w pierwszej dekadzie XXI w. popularne stały się monitory LED. W szczególności firma Apple wzbudziła duże zainteresowanie w 2010 r., gdy wprowadziła 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 na urządzeniu” zaczęły się różnić rozmiarem i kształtem, a ich rozmiar nie był już taki sam jak „pikseli w kodzie 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 gęstości 192 ppi ma wartość devicePixelRatio równą 2 (192 ppi/96 ppi = 2), ponieważ „2 piksele na wyświetlaczu odpowiadają 1 pikselowi w CSS”.

Obecnie współczynnik pikseli urządzenia wynosi od 1,0 do 4,0.

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

• 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 i tak, gdyby nie było przesłanego 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 dla różnych wartości devicePixelRatio.

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

• Wartości 1x, 2x i 3x to opisy gęstości, które informują przeglądarkę o gęstości pikseli, do której jest przeznaczony obraz. Dzięki temu przeglądarka nie musi pobierać obrazu, aby uzyskać te informacje.
• 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.

Sposób użycia:

• 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.
• Umieszczanie w nazwach plików opisów gęstości jest powszechną konwencją (i pomaga w śledzeniu plików), 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.