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

• Aby pobrać kod, który to umożliwia, przejdź do 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 znać podstawy działania przeglądarki w odniesieniu do pikseli.

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.

Piksel 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. monitory LED stały się powszechne. 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 urządzenia” zaczęły się różnić pod względem fizycznych rozmiarów i kształtu, a ich rozmiar nie był już taki sam jak „pikseli 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 urządzenia, 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ą wymiarami 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 obrazu w wysokiej rozdzielczości.

Używanie atrybutów gęstości pikseli 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:

• 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 zapisany jako 2x.
• Jeśli nie podano deskryptora 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.