Plusy i minusy korzystania z Retina js. Dostosowanie układu do ekranów Retina

Obecnie pojawia się coraz więcej urządzeń wyposażonych w ekrany o zwiększonej gęstości pikseli, dlatego warto mieć to na uwadze projektując nowoczesne strony (zwłaszcza strony promocyjne, strony docelowe itp.).

Nie będę zagłębiał się w teorię, a jedynie opowiem o praktycznym zastosowaniu niektórych technik.

Główną przyczyną rozmazanych obrazów na ekranach Retina jest niewystarczająca ilość informacji. ponieważ jeden piksel obrazu jest odwzorowywany na cztery fizyczne piksele. Innymi słowy, wszelkie decyzje sprowadzają się do tego, aby obrazy były 2 razy większe lub aby były wyświetlane 2 razy mniejsze (obraz nie jest skalowany na ekranach Retina).

użyj obrazu 2 razy większego, twardego, podając parametry szerokości i wysokości

obraz przykład2x.png powinien mieć wymiary 200x400

Metoda jest podobna do pierwszej, ale nieco zautomatyzowana

$(okno).load(funkcja() ( var obrazy = $("img"); obrazy.each(funkcja(i) ( $(this).width($(this).width() / 2); ) );

Jeśli chcesz określić wymiary tła, a nie obrazu, można to zrobić w następujący sposób:

Obraz (obraz tła: url(example2x.png); rozmiar tła: 100px 200px; /* Alternatywnie rozmiar tła: zawiera; */ szerokość: 100px; wysokość: 200px; )

Ale parametr rozmiaru tła nie jest obsługiwany w IE 7 i 8.

I jak widać każde z powyższych rozwiązań wymaga załadowania dwukrotnie większego obrazu, niezależnie od tego, czy jest to prosty ekran, czy siatkówka, co nie jest dobre.

Dlatego powinieneś użyć 2 obrazów, jednego dla prostych ekranów i drugiego dla ekranów Retina.

Dotyczy to przede wszystkim obrazów tła.

Ikona (obraz tła: url(example.png); szerokość: 100px; wysokość: 200px; ) Tylko ekran @media i (-Webkit-min-device-pixel-ratio: 1,5),
tylko ekran i (-moz-min-device-pixel-ratio: 1,5),
tylko ekran i (-o-min-device-pixel-współczynnik: 3/2),
tylko ekran i (min. współczynnik pikseli urządzenia: 1,5),
tylko ekran i (min--moz-device-pixel-ratio: 1,5),
tylko ekran i (min. rozdzielczość: 1,5 dppx)( .icon ( obraz tła: url(example2x.png); ) )

gdzie obraz przykład.png ma wymiary 100x200, a obraz przykład2x.png ma wymiary 200x400

Jeśli to konieczne, zamień zdjęcia na większe:

$(dokument).ready(function())( if (window.devicePixelRatio > 1) ( var lowresImages = $("img"); obrazy.each(funkcja(i) ( var lowres = $(this).attr( " src"); var wysoka rozdzielczość = niska rozdzielczość. zamień(".", "@2x."); $(this).attr("źródło", wysoka rozdzielczość) ) ));

Tak i na zakończenie dodam, że wyświetlacz Retina nie jest do końca poprawną nazwą, bo Jest to termin marketingowy firmy Apple i formalnie odnosi się wyłącznie do jego technologii. Jednak obecnie jest on używany we wszystkich ekranach o dużej gęstości pikseli.

Od czasu pojawienia się urządzeń z wyświetlaczami o wysokiej rozdzielczości, takich jak iPhone, iPad, Samsung Galaxy Note II i oczywiście MacBooka Pro z wyświetlaczem Retina twórcy stron internetowych i blogerzy stanęli przed pytaniem, w jaki sposób ich witryny będą normalnie wyświetlane na tych urządzeniach. Poniżej opowiem jak dodałem obsługę wyświetlaczy o wysokiej rozdzielczości na moich stronach.

Najpierw musimy wyjaśnić, czym są wyświetlacze o wysokiej rozdzielczości (Retina to nazwa marketingowa wyświetlaczy o wysokiej rozdzielczości stosowanych w technologii Apple). Konwencjonalne wyświetlacze, na przykład w 15-calowym laptopie, mają rozdzielczość ekranu 1440x900. Oznacza to, że matryca monitora składa się z pikseli (kropek) i matryca ta ma 1440 punktów długości i 900 punktów wysokości.

Wszystko jest proste, ale wraz z pojawieniem się wyświetlaczy o wysokiej rozdzielczości wszystko stało się nieco bardziej skomplikowane. Aby ludzkie oko widziało nie piksele, ale obrazy, jak na stronach magazynu lub na prawdziwej fotografii, pojawiły się wyświetlacze, które dla tych samych 15 cali mają fizyczną rozdzielczość ekranu 2880 × 1800 pikseli. Dokładnie dwa razy więcej niż w przypadku zwykłego monitora. Przy wyświetlaniu grafiki wektorowej, czyli np. elementów interfejsu, czcionek, ramek wykonanych za pomocą CSS na stronach internetowych, wszystko wygląda pięknie i wspaniale, natomiast przy wyświetlaniu grafiki rastrowej, czyli obrazów, nie wszystko jest tak płynne.

Na zwykłych monitorach na monitorze wyświetli się również obraz o wymiarach 300 na 200 pikseli - oczywiście 300x200, jeśli nie będzie on skalowany. Na matrycach o wysokiej rozdzielczości obraz o wymiarach 300 na 200 można wyświetlić na dwa sposoby.

• Jako obraz o rozdzielczości 600x400 pikseli zajmie wtedy na ekranie dokładnie tyle samo miejsca, co na zwykłym monitorze.
• Niby obraz o rozdzielczości 300x200, ale wtedy na monitorze hi-res będzie zajmował o połowę mniej miejsca niż na zwykłym. Oznacza to, że będzie o połowę mniejszy, ponieważ wyświetlacze hi-res, mające dwukrotnie większą rozdzielczość, mają taki sam rozmiar jak zwykłe wyświetlacze.

Domyślną opcją podczas wyświetlania stron internetowych jest opcja pierwsza - wszystkie obrazy są podwajane. Z tego powodu wszystkie obrazy na stronie: zdjęcia, a zwłaszcza ikony i logo, stają się rozmazane, czego przykład podałem na początku artykułu.

Aby Twoja witryna wyświetlała się idealnie na wszystkich urządzeniach, także tych z wyświetlaczem o wysokiej rozdzielczości, wystarczy zapisać wszystkie obrazy w dwukrotnie większym rozmiarze i wskazać w kodzie HTML aktualny rozmiar wyświetlania:

lub w CSS:

Klasa obrazu (obraz tła: url(/image-600x400.png); rozmiar tła: 300px 200px; )

To jest najbardziej najprostszy sposób, ale ma to wadę - dwukrotnie większe zdjęcia dostaną wszyscy użytkownicy, także ci ze zwykłymi wyświetlaczami. Będą wyświetlane normalnie, tak jak zwykłe obrazy, ale ładowanie takich obrazów wymaga dwukrotnie większego ruchu, co niekorzystnie wpływa na szybkość i optymalizację, więc lepiej tego nie robić.

Aby wyświetlać zwykłe obrazy użytkownikom na zwykłych wyświetlaczach i obrazy dwukrotnie większe użytkownikom korzystającym z wysokiej rozdzielczości, używam JavaScript retina.js. Oryginalny skrypt znajduje się na stronie retinajs.com, jednak w niektórych miejscach potrzebne były zmiany, które są już obecne w mojej wersji skryptu.

Ten skrypt sprawdza podczas ładowania strony, czy Twoje urządzenie ma wyświetlacz o wysokiej rozdzielczości, a jeśli tak, to czy Twój serwer zawiera te same obrazy, ale których nazwa kończy się na @2x (jest to standardowe oznaczenie obrazu dwukrotnie większego rozmiar dla urządzeń Retina). Oznacza to, że dla obrazu src="http://site.com/images-directory/image.png" skrypt sprawdzi obecność http://site.com/images-directory/ [e-mail chroniony], a jeśli ten obraz zostanie znaleziony, wyświetli go na stronie, ustawiając wymagane wartości szerokości i wysokości (szerokość i wysokość).

Aby skorzystać ze skryptu, prześlij go na swój serwer i określ go jak najbliżej tagu zamykającego:

Dla tych, którzy używają preprocesora CSS (mniej), przydatne może być miksowanie, aby nie kopiować i wklejać ponownie.

Jeśli znajdziesz błąd lub masz jakieś pytania, nie zapomnij napisać o tym w komentarzach.

Z każdym nowym gadżetem od Apple pojawia się coraz więcej ekranów z technologią Retina Display. Obecnie ekrany Retina można znaleźć na iPhone'ach, iPodach, iPadach i różne modele MacBook i ich Łączna użytkownicy są pod wrażeniem. Nauczmy się, jak tworzyć niestandardowe obrazy siatkówki dla Twojej witryny, aby wyglądała bardziej wyrafinowanie, żywo i wyraźnie na tego typu zaawansowanych ekranach.

Na początku nie spodziewałem się, że liczba użytkowników urządzeń z ekranami Retina będzie tak imponująca, gdyż technologia ta zaczęła być stosowana stosunkowo niedawno. Ale potem, za pośrednictwem konta Analytics, przejrzałem statystyki dotyczące gadżetów mobilnych i doszedłem do wniosku, że produkty Apple przodują we wszystkich wskaźnikach, a wśród nich przede wszystkim iPhone, iPod i iPad - i wszystkie działają na siatkówkę technologia. Jeśli chodzi o MacBooka Pro 13″ lub 15″ z wyświetlaczem Retina, najpopularniejszymi przeglądarkami użytkowników są Chrome, Firefox, Safari i Internet Explorera. Dlatego jeśli pracujesz w Operze, najprawdopodobniej liczba potencjalnych odwiedzających Twoją witrynę jest mniejsza niż ogólna liczba użytkowników urządzeń Retina (przynajmniej według statystyk mojej własnej witryny).

Można założyć, że obrazy siatkówki są zapisywane z większą liczbą wysoka rozdzielczość PPI, ale nie o to chodzi. Wszystko, co musisz zrobić, to zapisać wiele kopii obrazów Retina w dwukrotnie większym rozmiarze, aby na przykład obraz o wymiarach 200 x 200 pikseli miał wymiary 400 x 400 pikseli. Te powiększone obrazy są następnie wyświetlane w ich oryginalnym rozmiarze, co pozwala uzyskać wyraźną i czystą grafikę na ekranach o dużej gęstości pikseli.

Brzmi prosto, ale jak uzyskać te powiększone obrazy?

Idealnym rozwiązaniem do tworzenia obrazów siatkówki jest grafika wektorowa. Jeśli Twoje logo lub ikona jest wykonana w formacie pliku EPS lub Ai, to jej parametry można zmienić przed przeniesieniem lub skopiowaniem do Photoshopa. Oznacz element jako obiekt inteligentny, a zachowa on swoją formę wektorową, dzięki czemu będzie można go podwoić i zapisać osobno jako specjalny obraz siatkówkowy.

Photoshop to przede wszystkim aplikacja do grafiki pikselowej, ale to nie znaczy, że nie ma funkcji dla obrazów wektorowych. Każde narzędzie do zmiany kształtu może utworzyć warstwę wektorową zamiast pikseli, a wszystkie efekty stylu warstwy można nadal skalować. Po powiększeniu elementów do dwukrotnego rozmiaru wszystkie efekty będą musiały zostać zmniejszone, aby utworzyć niemal dokładną replikę w podwójnej skali.

Jedną z najważniejszych zasad prawdziwych projektantów jest to, aby nie przekraczać rozmiaru obrazu, ale jeśli już stworzyłeś witrynę i chcesz cofnąć się o krok i dodać obsługę siatkówki, nie masz innego wyjścia, jak tylko przerobić każdy obraz ręcznie. Zazwyczaj skalowanie obrazu skutkuje rozmyciem obrazu z dużą ilością dodatkowych linii, ale w menu Rozmiar obrazu programu Photoshop istnieje jedna luka o nazwie Najbliższy sąsiad. Ta funkcja pomoże zapobiec rozmyciu obrazów i zachować ostre krawędzie, dzięki czemu nadaje się do małych ikon i obiektów o jednolitym kolorze. Nie da to takich samych rezultatów, jak całkowite przerobienie elementu, ale na jakiś czas jest to dobra alternatywa.

Być może myślisz: „Dlaczego nie stworzę po prostu własnego układu w podwójnej skali, a następnie będę mógł przeskalować wszystko do standardowych rozmiarów?” W teorii projektowania druku to by zadziałało, ale jeśli chodzi o projektowanie stron internetowych, pracujemy na poziomie pikseli i tworzymy idealne kształty i linie. Nawet kompresja obrazów w Photoshopie doprowadzi do tego niewyraźny obraz, szczególnie jeśli chodzi o małe ikony.

Po utworzeniu i przesłaniu kopii wszystkich obrazów stockowych w podwójnym rozmiarze możesz zacząć dodawać je do swojej witryny różne sposoby. Słowo o nazwie pliku: zapisuj obrazy siatkówki bezpośrednio w folderze obrazów z tą samą nazwą pliku, ale na końcu dodaj @2x. Na przykład snarf.jpg zostanie zmieniony na [e-mail chroniony].

Najprostszym sposobem, aby obrazy siatkówki działały, jest użycie skryptu retina.js. Retina.js zaznaczy wszystkie obrazy @2x na liście obrazów i automatycznie zmieni ich rozmiar.

nagłówek h1 a (
obraz tła: url(images/ [e-mail chroniony]);
rozmiar tła: 164px 148px;
}

Inną opcją jest ręczne dodanie obrazów siatkówki, aby zapisać całą stylizację strony w formacie CSS. Żądanie pośrednie zawiera minimalny współczynnik pikseli urządzenia: 2 dla obiektów o podwójnej gęstości pikseli. W ten sposób zastąpisz każdy obraz jego kopią o rozmiarze @2x, ale pamiętaj, aby przywrócić oryginalny rozmiar obrazu za pomocą parametru rozmiaru tła.

Metoda CSS świetnie sprawdza się w przypadku obrazów tła, ale w przypadku obrazów osadzonych na stronie HTML konieczna będzie zmiana tagów . Po prostu dodaj obraz @2x do oryginalnych atrybutów, a następnie użyj szerokości i wysokości, aby zwrócić oryginalne parametry.

Powiem Ci, jak szybko zoptymalizować obrazy stron internetowych, aby wyświetlały się w wysokiej jakości na wyświetlaczach Retina używanych w nowych MacBookach, iMacach, iPhone'ach, iPadach itp. Jak zwykle przed tym trochę teorii i moja praktyczna rada.

Zacznijmy od definicji:

Rétina (od łac. retina – retina) to ogólna nazwa marketingowa wyświetlaczy LCD stosowanych w urządzeniach Apple i charakteryzujących się tak dużą gęstością pikseli, że ludzkie oko nie jest w stanie zauważyć, że obraz się z nich składa.

Być może na tym zakończymy część teoretyczną. Każdy zainteresowany projektowaniem wyświetlaczy Retina może z łatwością znaleźć bardziej szczegółowe informacje w specjalistycznych zasobach.

Prawdopodobnie zauważyłeś, że na platformie Retina niektóre grafiki na większości stron internetowych są rozmyte. Bardziej słuszne byłoby stwierdzenie, że nie wygląda to zbyt wyraźnie w porównaniu do innych elementów interfejsu. Co widać nawet gołym okiem. Nie jest to trudne do zrozumienia – grafika rastrowa jest płynna. Nie ma nic złego w wektorze; skaluje się idealnie w każdej rozdzielczości i przy dowolnej gęstości pikseli. Istnieje wiele sposobów radzenia sobie z tym problemem; opracowano całe biblioteki, dzięki którym możesz całkowicie dostosować swoją witrynę do Retina. Ale dzisiaj porozmawiamy o czymś trochę innym.

Moim zdaniem adaptacja rastrowa nie jest zbyt rozsądnym podejściem. Uważam, że najwyższy czas pozbyć się go w interfejsie i całkowicie zamienić jego elementy na grafikę wektorową. Na przykład w SVG. Dodatkowo za pomocą nowych stylów CSS3 można pozbyć się rastrowych plam w gradientach, cieniach na przyciskach i innych elementach interfejsu. Ikony rastrowe, niegdyś popularne na przełomie wieków, również umarły dawno temu i używane są jedynie przez zacofanych amatorów. Zostały one zastąpione tym samym wektorowym SVG i bibliotekami ikon czcionek, tak uwielbianymi przez twórców stron internetowych. Będziesz zaskoczony, ale interfejs prawie każdej witryny internetowej może bez większego problemu pozbyć się rastra. W ten sposób na zawsze pozbędziemy się problemów z wyświetlaniem na wyświetlaczach o wysokiej rozdzielczości.

Jeśli nie udało Ci się całkowicie pozbyć rastra, nie martw się! Kilka obrazów rastrowych w interfejsie witryny nie stanowi problemu i nie stanowi żadnego problemu. Powiem Ci, jak w prosty i inteligentny sposób wykorzystać kilka linii CSS, aby dostosować obraz bitmapowy do prawidłowego wyświetlania na wyświetlaczu Retina.

Nie wchodząc w szczegóły sytuacji, weźmy prosty przykład. Twoja witryna posiada skomplikowane graficznie logo, którego nie da się lub trudno przekonwertować do formatu wektorowego. Pomińmy logiczne pytania: jak to się stało, że nie ma logo wektorowego i co to za logo, którego nie da się wyświetlić w wektorze? Naszym zadaniem jest sprawienie, aby ekspozycja logo na siatkówce była przejrzysta, pozbywając się mydła.

Musimy tylko dodać zapytanie o media, aby dla wyświetlaczy ze stosunkiem pikseli fizycznych i CSS większym niż 1,5 załadował się nasz nowy obraz logo2x.png

Odbywa się to bardzo prosto:

@media all i (-webkit-min-device-pixel-ratio: 1,5) ( #logo ( obraz tła: url("images/ [e-mail chroniony]"); rozmiar tła: 300px 100px; ) )

Nie zapomnij ustawić wymiarów tła na takie same jak w oryginalnym obrazie. W naszym przypadku 300x100 pikseli.

Oczywiste jest, że tę metodę zaleca się stosować w przypadku niewielkiej liczby określonych obrazów. Jeśli chcesz mieć obsługę Retina także w treści, użyj innych metod. Porozmawiamy o nich innym razem.

Zapisz się na mój telegram i jako pierwszy otrzymuj nowe materiały m.in. których nie ma na stronie.

• Tłumaczenie

Wraz z niedawną premierą MacBooka Pro Retina i nowego iPada, ekrany o zwiększonej gęstości pikseli zaczęły aktywnie wkraczać w nasze życie. Co to oznacza dla twórców stron internetowych?

Najpierw zapoznajmy się z terminologią.

Fizyczne piksele (piksel urządzenia lub piksel fizyczny) to piksele, do których jesteśmy przyzwyczajeni: najmniejsze elementy każdego wyświetlacza, z których każdy ma swój własny kolor i jasność.

Gęstość ekranu to liczba fizycznych pikseli na wyświetlaczu. Zwykle mierzony w pikselach na cal (PPI: piksele na cal). Apple, które opracowało ekrany Retina o podwójnej gęstości pikseli, twierdzi, że ludzkie oko nie jest w stanie dostrzec większej gęstości.

Piksele CSS to abstrakcyjna wartość używana przez przeglądarki do dokładnego wyświetlania treści na stronach, niezależnie od ekranu (DIP: piksele niezależne od urządzenia). Przykład:

Taki blok na zwykłych ekranach będzie zajmował obszar 200x300 pikseli, a na ekranach Retina ten sam blok otrzyma 400x600 pikseli, zatem na ekranach Retina gęstość pikseli jest 4 razy większa niż na zwykłych:

Relację pomiędzy pikselami fizycznymi i CSS można ustawić w następujący sposób:
współczynnik pikseli urządzenia, -o-stosunek pikseli urządzenia, -moz-współczynnik pikseli urządzenia, -Webkit-współczynnik pikseli urządzenia (...)

Lub tak:
współczynnik pikseli urządzenia, -o-min-stosunek pikseli urządzenia, min--moz-współczynnik pikseli urządzenia, -Webkit-min-współczynnik pikseli urządzenia (...)

W JavaScript można to osiągnąć za pomocą
okno.urządzeniePixelRatio

Oprócz rozdzielczości rastrowej obrazy w Internecie mają abstrakcyjne wymiary w pikselach CSS. Przeglądarka kompresuje lub rozciąga obraz zgodnie z jego szerokością i długością CSS. Podczas wyświetlania na normalnym ekranie jeden piksel rastrowy odpowiada jednemu pikselowi CSS. Na ekranach Retina każdy piksel rastrowy jest mnożony czterokrotnie:

A to na Retinie:

Istnieje kilka sposobów implementacji skalowania HTML i CSS:

Gdzie używać: w witrynach jednostronicowych z wieloma obrazami.

Gdzie używać: w witrynach zawierających wiele obrazów w treści.

Możesz użyć pseudoelementów:przed lub:po
.image-container:before ( obraz tła: url( [e-mail chroniony]); rozmiar tła: 200px 300px; treść:"";

Blok wyświetlacza;
wysokość: 300px; szerokość: 200px; ) [e-mail chroniony] Technika ta działa również przy użyciu duszków:

.icon (obraz tła: url(

• Gdzie używać: na stronach z ograniczoną liczbą obrazów tła (na przykład jeden jako duszek).
• Skalowanie HTML i CSS: zalety

• Kompatybilność z różnymi przeglądarkami
• Skalowanie HTML i CSS: wady
• Urządzenia ze zwykłymi ekranami pobiorą dodatkowe megabajty

Gdzie używać: na stronach internetowych lub w aplikacjach, które wykorzystują obraz tła jako elementy projektu. Nie nadaje się do obrazów w treści.

• Skalowanie HTML i CSS: zalety

• Męczące we wdrażaniu, szczególnie w dużych witrynach
• Używanie obrazu treści jako tła jest semantycznie niepoprawne

Istnieje specjalna wtyczka JavaScript Retina.js, która może zrobić wszystko, co opisano powyżej, ale z dodatkowymi funkcjami, takimi jak pomijanie obrazów zewnętrznych i pomijanie kopii wewnętrznych, ale nie kopii siatkówki.

Gdzie używać: na dowolnych stronach zawierających obrazy w treści.

• Łatwość wdrożenia
• Urządzenia nie pobierają niepotrzebnych obrazów
• Kontrolowanie gęstości pikseli na stronie internetowej

• Urządzenia Retina pobierają obie wersje każdego obrazu
• Na urządzeniach z siatkówką zauważalne jest manipulowanie obrazem
• Nie działa w niektórych popularne przeglądarki(IE i Firefox)

W tym przykładzie prosty obraz SVG można skalować według potrzeb:

To samo stanie się z użyciem CSS:
/* Używanie obrazu tła */ .image ( obraz tła: url(example.svg); rozmiar tła: 200px 300px; wysokość: 200px; szerokość: 300px; ) /* Używanie treści:url() */ .image - kontener:przed (treść: url(example.svg); /* szerokość i wysokość nie działają z treścią:url() */ )

Obsługa IE 7 lub 8 oraz Androida 2.x będzie wymagać użycia zastępczych obrazów PNG. Można to łatwo zrobić za pomocą Modernizr:
.image ( obraz tła: url(przykład.png); rozmiar tła: 200px 300px; ) .svg ( .image (obraz tła: url(przykład.svg); ) )

Aby uzyskać lepszą kompatybilność między przeglądarkami i uniknąć problemów z rasteryzacją w przeglądarkach Firefox i Opera, należy dopasować każdy obraz SVG do jego nadrzędnego elementu HTML.

W HTML możesz zaimplementować coś podobnego, używając żądanych danych w tagu a:

Używanie jQuery i Modernizr:
$(dokument).ready(function())( if(!Modernizr.svg) ( var obrazy = $("img"); obrazy.each(funkcja(i) ( $(this).attr("src", $ (this).data("png-fallback"));

Gdzie używać: na dowolnej stronie internetowej, odpowiednie do ikon, logo i prostych ilustracji wektorowych.

• Pojedynczy zestaw obrazów dla wszystkich urządzeń
• Gdzie używać: na stronach z ograniczoną liczbą obrazów tła (na przykład jeden jako duszek).
• Nieskończone skalowanie

• Brak precyzyjnego antyaliasingu piksel po pikselu
• Nie nadaje się do skomplikowanych grafik ze względu na duże rozmiary plik
• Brak natywnej obsługi w IE 7, 8 i wcześniejszych wersjach Androida