Użyj deskryptorów gęstości

Katie Hempenius
Katie Hempenius
X

Zobacz wersję demonstracyjną

  • Aby wyświetlić podgląd witryny, naciśnij Wyświetl aplikację, a następnie Pełny ekran pełny ekran.
  • Odśwież stronę na różnych urządzeniach, aby zobaczyć, jak przeglądarka wczytuje różne obrazy.

Możesz w tym celu użyć emulatora urządzenia. Jeśli szukasz konkretnych gęstości wyświetlania, wypróbuj te urządzenia:

gęstość 1x, Blackberry Playbook, wiele monitorów zewnętrznych
2x density iPad lub iPhone 5/6
3x gęstość Galaxy S5 lub iPhone X
  • Kod, który to umożliwia, znajdziesz w pliku index.html.

Jak to działa?

Koncepcja deskryptorów gęstości może być dla większości osób nieznana. Aby lepiej je zrozumieć, warto dowiedzieć się, jak przeglądarka działa z pikselami.

Czym są piksele?

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

Piksel urządzenia (inaczej „piksel fizyczny”)
Najmniejszy punkt koloru, który można wyświetlić na urządzeniu.
Piksel logiczny
Informacje określające kolor w konkretnej lokalizacji na siatce. Ten typ piksela nie ma określonego rozmiaru fizycznego.
piksel CSS
Specyfikacja CSS definiuje piksel jako jednostkę miary fizycznej. 1 piksel = 1/96 cala.

Gęstość pikseli

Gęstość pikseli (nazywana też „gęstością ekranu” lub „gęstością wyświetlacza”) określa gęstość pikseli urządzenia na danym obszarze fizycznym. Zwykle mierzy się ją w pikselach na cal (ppi).

Przez wiele lat bardzo popularną gęstością wyświetlacza było 96 ppi (stąd CSS definiuje piksel jako 1/96 cala). Od lat 80. była to domyślna rozdzielczość systemu Windows. Była to też rozdzielczość monitorów CRT.

Zaczęło się to zmieniać, gdy w pierwszej dekadzie XXI wieku monitory LED stały się powszechne. W szczególności firma Apple zrobiła furorę w 2010 roku, gdy wprowadziła wyświetlacze Retina. Te wyświetlacze miały minimalną rozdzielczość 192 ppi, czyli 2 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 różnić się rozmiarem fizycznym i kształtem i nie były już takie same jak „piksele CSS”. Konieczność zdefiniowania relacji między rozmiarem „pikseli urządzenia” a „pikselami CSS” doprowadziła do wprowadzenia devicePixelRatio (czasami nazywanego „współczynnikiem pikseli CSS”).

devicePixelRatio określa relację między pikselami urządzenia a pikselami CSS na danym urządzeniu. Urządzenie o rozdzielczości 192 ppi ma wartość devicePixelRatio równą 2 (192 ppi / 96 ppi = 2), ponieważ „2 piksele wyświetlacza mają rozmiar 1 piksela CSS”.

Obecnie większość urządzeń ma współczynnik pikseli urządzenia między 1,0 a 4,0.

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

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

Jak więc wykorzystać te informacje w praktyce?

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

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

Współczynnik pikseli urządzenia Wskazuje, że: Na tym urządzeniu tag <img> o szerokości CSS wynoszącej 250 pikseli będzie wyglądał najlepiej, gdy obraz źródłowy będzie miał…
1 1 piksel urządzenia = 1 piksel CSS 250 pikseli szerokości,
2 2 piksele urządzenia = 1 piksel CSS 500 pikseli szerokości,
3 3 piksele urządzenia = 1 piksel CSS 750 pikseli szerokości,

Warto wiedzieć:

  • Wymiary w pikselach podawane w edytorach obrazów, katalogach plików i innych miejscach to wymiary w pikselach 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ększanie mniejszych obrazów mija się z celem, jakim jest wyświetlanie wielu wersji graficznych. Przeglądarka i tak by to zrobiła, gdyby nie został dostarczony obraz o wysokiej rozdzielczości.

Używaj deskryptorów gęstości, aby wyświetlać wiele obrazów

Deskryptory gęstości w połączeniu z atrybutem „srcset” mogą służyć do wyświetlania różnych obrazów w zależności od wartości devicePixelRatio.

  • Zapoznaj się z plikiem 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 można opisać tak:

  • 1x, 2x i 3x to deskryptory gęstości, które informują przeglądarkę o gęstości pikseli, dla której przeznaczony jest obraz. Dzięki temu przeglądarka nie musi pobierać obrazu, aby określić te informacje.
  • 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 (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 zastępczy dla przeglądarek, które nie obsługują formatu srcset.

Jak korzystać z tej funkcji:

  • Użyj devicePixelRatio i jednostki x, aby zapisać deskryptory gęstości. Na przykład deskryptor 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.
  • Uwzględnianie deskryptorów gęstości w nazwach plików jest powszechną konwencją (i 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 z deskryptorami szerokości.