Użyj deskryptorów gęstości

Katie Hempenius

Zapoznaj się z tą demonstracją

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran
• Załaduj ponownie stronę na różnych urządzeniach, aby przeglądarka wczytywała się inaczej obrazów.

W tym celu możesz użyć emulatora urządzenia. Jeśli szukasz konkretnego wyświetlacza gęstości, możesz wypróbować te urządzenia:

• Odbierz index.html kodu, dzięki któremu to działa.

Jak to działa?

Większość osób może nie wiedzieć, czym są deskryptory gęstości. Na lepsze dobrze je zrozumieć, warto jednak zorientować się, jak działa przeglądarka. z pikselami.

Co to są piksele?

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

Piksel urządzenia (inaczej „piksel fizyczny”)

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

Piksel logiczny

Informacje określające kolor w konkretnym miejscu na siatce. Piksele tego typu nie mają fizycznego rozmiaru.

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”) mierzy gęstość pikseli urządzenia na danym obszarze fizycznym. To jest zwykle mierzony przy użyciu pikseli na cal (ppi).

Przez wiele lat rozdzielczość 96 ppi stanowiła powszechną gęstość wyświetlania (dlatego CSS określał piksel to 1/96 cala). Od lat 80. XX wieku było to domyślne ustawienie systemu Windows. Ponadto rozwiązanie CRT i monitory.

To zaczęło się zmieniać, ponieważ monitory LED stały się powszechne w pierwszej dekady XXI wieku. W szczególności Firma Apple wprowadziła na rynek ekrany Retina w 2010 roku. Te miały minimalną rozdzielczość 192 ppi, czyli dwukrotnie większą niż „standardowy” (192 ppi/96 ppi = 2).

window.devicePixelRatio

Wraz z wprowadzeniem nowszej technologii wyświetlania nazwa „piksele urządzenia” zaczynają się zmieniać w rozmiarach i kształcie i różnią się rozmiarem od „pikseli CSS”. Konieczność zdefiniowania zależność między rozmiarem „pikseli urządzenia” i „Piksele CSS”, co doprowadziło do Wprowadzenie do usługi devicePixelRatio (czasami nazywanej „pikselem CSS” proporcje”).

devicePixelRatio określa zależność między pikselami urządzenia a pikselami CSS dla konkretnego urządzenia. W przypadku urządzenia o rozdzielczości 192 ppi wskaźnik devicePixelRatio wynosi 2 (192) ppi/96 ppi = 2), ponieważ „2 z wyświetlanych pikseli to rozmiar 1 piksela CSS”.

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

• Określ gęstość pikseli na urządzeniu, wpisując window.devicePixelRatio w konsoli.

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

Jak więc zastosować te informacje?

Dopasuj rozmiar obrazów na podstawie współczynnika pikseli urządzenia

Aby zdjęcia wyglądały jak najlepiej na ekranach o wysokiej rozdzielczości, konieczne jest przesłanie różnych wersji obrazu dla różnych elementów devicePixelRatios.

Warto wiedzieć:

• wymiary w pikselach podane w edytorach obrazów, katalogach plików w innych miejscach – piksele logiczne.
• W przypadku ekranów o wyższej rozdzielczości i większych wyświetlaczy potrzebne są obrazy większe wymiary. Samo powiększanie mniejszych obrazów eliminuje cel która wyświetla reklamy w wielu wersjach obrazów. Przeglądarka i tak zrobiłaby to, gdyby nie dostarczono obrazu w 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” może służyć do wyświetlają różne obrazy na różnych urządzeniachPixelRatios.

• Spójrz na 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 jest przedstawiony w słowach:

• 1x, 2x i 3x to deskryptory gęstości, które informują przeglądarkę gęstości pikseli, do której jest przeznaczony obraz. Dzięki temu przeglądarka zaoszczędzi przed pobraniem obrazu w celu określenia tych informacji.
• Przeglądarka może wybrać spośród trzech obrazów: flower-1x.jpg (zamierzone dla przeglądarek o gęstości pikseli 1.0), flower-2x.jpg (przeznaczony dla przeglądarek o gęstości pikseli 2.0) oraz flower-3x.jpg (przeznaczony dla i przeglądarkach o gęstości pikseli 3.0).
• flower.jpg to obraz zastępczy dla przeglądarek, które nie obsługują srcset

Jak korzystać z tej funkcji:

• Do zapisywania deskryptorów gęstości używaj elementów devicePixelRatio i jednostki x. Dla: Na przykład deskryptor gęstości dla wielu ekranów Retina (window.devicePixelRatio = 2) zostałaby zapisana jako 2x.
• Jeśli deskryptor gęstości nie zostanie podany, przyjmuje się, że jest to 1x.
• Uwzględnienie deskryptorów gęstości w nazwach plików jest powszechną konwencją ułatwiają śledzenie plików), ale nie jest to konieczne. Obrazy mogą zawierać dowolne nazwa pliku.
• Nie musisz dodawać atrybutu sizes. Atrybut sizes ma tylko wartość używane z deskryptorami szerokości.