Optymalizacja układu wyświetlaczy siatkówki

  1. Teoria przygotowania strony Retina
  2. Wtyczka Photoshop Retinize It
  3. Użyj retina.js dla znaczników img
  4. Zanieczyszczenie dla MNIEJ

Teraz, z wielką popularnością MacBooków, iPhone'ów i innych urządzeń z wysoką DPI, obrazy na stronie muszą być zoptymalizowane, aby nie były rozmyte. Do tego mamy kilka rozwiązań. Najbardziej popularne jest stworzenie czcionki ikony lub użycie SVG. Ale co, jeśli nie ma sposobu, aby sobie z tym poradzić, lub kochasz PNG bardzo. Rozwiązaniem jest oczywiście. W formie wtyczki do Photoshopa, biblioteki js i zanieczyszczeń sass / less / stylus.

Teoria przygotowania strony Retina

Wyjaśnię to własnymi słowami. Ze względu na fakt, że gęstość punktów na ekranach siatkówki jest większa, obraz jest rozmazany (ponieważ jest rozciągnięty). Aby temu zaradzić, musisz użyć obrazu 2 lub 3 razy większego od oryginalnego i przeskalować go za pomocą narzędzi html i css do rozmiaru x1. Wtedy obraz będzie wyglądał świetnie na ekranach siatkówki. Ale najpierw musisz wyciąć 2 lub 3 rozmiary obrazów, a następnie użyć biblioteki js i domieszki w preprocesorze (dla wygody). Najpierw pierwsze rzeczy ...

Wtyczka Photoshop Retinize It

Teraz, z wielką popularnością MacBooków, iPhone'ów i innych urządzeń z wysoką DPI, obrazy na stronie muszą być zoptymalizowane, aby nie były rozmyte

Retinize It - wtyczka do Photoshopa, aby zoptymalizować grafikę do siatkówki

Jak napisano na oficjalnej stronie internetowej: „Najlepsza wtyczka do Photoshopa do optymalizacji grafiki na stronie dla wyświetlaczy iOS i Retina”. Możesz go pobrać strona projektu .

Wtyczka to nagrana akcja, którą można odtwarzać za pomocą klawiszy skrótu lub elementów menu. Wtyczka wybiera warstwy, tworzy z nimi nowy plik, przycina (przycina krawędzie) i zapisuje obraz w 1, 2 lub 3 rozmiarach.

Praca z nim jest łatwa:

  • Wybierz warstwy lub grupę warstw
  • Uruchom Retinize It (możesz dodać skrót)
  • Nazwij swoje pliki
  • Uzyskaj pokrojone obrazy

Jak działa wtyczka Retinize It

Do dalszego użycia polecam zapisywanie plików z postfixami @ 2x, @ 3x. Na przykład: file.png, [email protected], [email protected].

Użyj retina.js dla znaczników img

Wszystko jest proste, podłącz bibliotekę js i określi, czy musisz przesłać obraz na ekrany siatkówki. W razie potrzeby łącze do pliku źródłowego jest zastępowane przez ***@2x.*** lub ***@3x.***.

Zanieczyszczenie dla MNIEJ

Możesz pobrać zanieczyszczenie na miejscu .

Po połączeniu będzie dostępny do użycia. Zapisując: .at2x (@ ścieżka, @width, @height); (zamiast @path, @width i @height musisz napisać ścieżkę do obrazu i jego wymiarów).

Przykład:

#logo {.at2x ('/images/my_image.png', 200px, 100px); }

Ta nieczystość rozszerzy się jako:

#logo {background-image: ścieżka: / assets / img / url ('/ images / my_image.png'); } @media all i (-webkit-min-device-pixel-ratio: 1.5) {#logo {background-image: ścieżka: / assets / img / url ('/ images/[email protected]'); rozmiar tła: 200px 100px; }}

Przeczytaj więcej o retina.js i domieszkach. na miejscu Możesz go tam pobrać.

Jeśli masz jakieś pytania lub chcesz dodać ten artykuł do czegoś, napisz o tym w komentarzach :-)

Nadal możesz subskrybować biuletyn e-mailowy nowe notatki. Nie więcej niż raz w tygodniu, bez spamu.