Kilka lat temu Apple zaczął stosować w swoich komputerach przenośnych ekrany zwane „Retina”. Ich cechą podstawową była znacznie wyższą niż w klasycznych monitorach wartość PPI (czyli gęstość pikseli na cal / centymetr). O ile w klasycznych monitorach wartość ta wynosiła najczęściej mniej więcej 70-80 ppi to produkty Apple’a miały gęstość przekraczającą 150 ppi. Oczywiście przy klasycznym rozmiarze 13 czy 15 cali wymusiło to znaczne zwiększenie ich rozdzielczości. Wkrótce do Apple’a dołączyli producenci monitorów z wyższej półki, szczególnie kiedy technologia 4K stawała się coraz popularniejsza. I w zasadzie historię można by zakończyć już teraz – gdyby nie jeden drobny szczegół. Okazało się, że interfejsy użytkownika na monitorach o tak dużej rozdzielczości wyglądały mikroskopijnie – wszakże dotychczas ich wymiary definiowane były w pikselach. Patrzenie przez lupę na monitor to żadna przyjemność – dlatego Apple (a potem Microsoft) musieli coś z tym zrobić. I właśnie w tym momencie pojawił się współczynnik skalowania interfejsu. Ułatwił to fakt, że dzisiejsze interfejsy użytkownika są w zasadzie wektorowe (a czcionki rastrowe wyginęły grube 10 lata temu). Tak więc zdecydowano, że interfejs logicznie będzie miał niższą rozdzielczość a jego elementy będą rysowane z większą rozdzielczością używającą wszystkich pikseli monitora. I tak dla przykładu monitor o rozdzielczości 3840×2160 z punktu widzenia interfejsu był tylko monitorem 1920×1080 – za to silnik graficzny pod spodem „rysował” go używając pełnej rozdzielczości. Jeżeli czcionka miała mieć 20 pikseli interfejsu – to tak na prawdę rysowana była z użyciem 40 pikseli rzeczywistych. Sytuacja taka zapewniała niesamowitej jakości elementy graficzne przypominające rozdzielczość papieru jednakże „rozmiar” interfejsu był tożsamy z monitorami o klasycznej rozdzielczości. Oczywiście wszystko było pięknie dopóki na takim interfejsie trzeba było wyświetlić obrazu rastrowego (pikselowego). Jak się łatwo domyśleć aby grafika rastrowa na takim monitorze wyglądała normalnie trzeba było ją dwukrotnie powiększyć… I tu pojawił się problem, bo powiększana grafika albo wyglądała jak „pikseloza” albo była wygładzana co znacznie obniżało jej ostrość. Była to zmora (i jest do dziś) użytkowników gęstych monitorów próbujących oglądać choćby zdjęcia. Był to również ogromny problem dla projektantów stron webowych – na nowych monitorach grafika na stronach WWW po prostu wyglądała źle – szczególnie w porównaniu do pięknego interfejsu systemu. Apple od razu znalazł rozwiązanie tego problemu (zostało ono również później zaadaptowane przez Microsoft oraz producentów przeglądarek www). Sprawa była prosta – jeżeli obrazek na ekranie miał zajmować powiedzmy 200×200 piksel interfejsu to wystarczyło dostarczyć go w rozdzielczości dwukrotnie wyższej – w tym przypadku 400×400. Przeglądarka zamiast skalować obrazek źródłowy po prostu mogła go wyświetlić 1:1. Zapewniło to doskonałą jakość grafiki a także znaczny wzrost ilości szczegółów – czyli to czym gęste monitory miały się wyróżniać.
Dziś wsparcie dla gęstych monitorów stało się już w zasadzie standardem – na wielu stronach grafika dostarczana jest w podwójnej rozdzielczości (czasami strony zawierają oddzielną grafikę dla monitorów gęstych i zwykłych). Należy zwrócić uwagę, że jeżeli na stronie posiadamy jedynie grafikę dla monitorów gęstych to w wypadku monitora klasycznego przeglądarka będzie ją musiała zmniejszyć 2 razy (bo wymiar interfejsu to – w naszym przykładzie – 200×200 ale grafika serwowana przez serwer WWW ma 400×400 pikseli).
Sprawy oczywiście potrafią być nieco bardziej skomplikowane. Otóż nie zawsze producent decyduje się na skalę interfejsu 2x. W nowszych urządzeniach mobilnych Apple’a skala ta wynosi 3x – im gęstszy ekran – tym większa skala. Jak to sprawdzić? W wypadku systemu Windows 10 lub 11 (bo tylko te systemy Microsoftu wspierają skalowanie interfejsu) współczynnik skali w % (2x = 200%) można ustawić w panelu sterowania w sekcji konfiguracji monitora. W wypadku komputerów Apple – na razie wynosi on zawsze 2x. Należy wrócić uwagę, że w niektórych laptopach posiadających zwykłe monitory Microsoft potrafi standardowo stosować skalę 125%. O ile daje to nieco „większy” interfejs to powoduje degradacją wyświetlanej grafiki i zdjęć – wszakże wszystko musi być skalowane 1,25x w górę. W celu oglądania zdjęć absolutnie polecam stosowanie w takim wypadku skalowania 100%.
Poniżej prosty przykład obrazka o szerokości 400px w wersji klasycznej oraz „retina” (800px). Różnicę na plus zobaczą oczywiście użytkownicy gęstych monitorów, natomiast dla użytkowników monitorów klasycznych wersja „retina” może być mniej ostra – przeglądarka zmniejsza ją dwukrotnie stosując najczęściej mało precyzyjny algorytm.
Obrazek klasyczny – rozdzielczość wirtualna 400px ze źródłem o takiej samej rozdzielczości
Obrazek „retina” – rozdzielczość wirtualna 400px jednakże źródło o rozdzielczości 800px
Na koniec warto dodać, aby nie mylić skalowania interfejsu na poziomie systemu opracyjnego ze „powiększeniem” jakie można ustawić w każdej przeglądarce. Powiększenie to nie jest w żaden sposób standaryzowane a przeglądarka (w odróżnieniu od skalowania systemowego) nie raportuje go (w skryptach JS) – tak więc w tym przypadku strona nie jest w stanie serwować odpowiedniej treści.
Problem oczywiście jest bardziej złożony i ma jeszcze wiele innych aspektów – tym nie mniej chciałem bardzo w skrócie przybliżyć ten temat – choćby po to, aby świadomie korzystać z dobrodziejstw nowych monitorów.