Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Porady WordPress: automatyczne dostosowanie zdjęć do ekranów Retina

Warsztat / Porady

WordPress: automatyczne dostosowanie zdjęć do ekranów Retina

Bartosz Romanowski 23 lipca 2012 komentarze ()

W najnowszych urządzeniach firmy Apple (iPad 3, iPhone 4/4S i nowych MacBookach Pro) zastosowano matryce Retina, charakteryzujące się większą gęstością pikseli (HiDPI). Obraz na takich matrycach jest znacznie ostrzejszy i bardziej szczegółowy, ale niestety grafiki, które nie zostały specjalnie przygotowane, wyglądają niezbyt dobrze.

Na szczęście dostosowanie naszej strony do ekranów Retina nie jest trudne. Z teoretycznego punktu widzenia wystarczy przygotować dwukrotnie większe zdjęcia. Na przykład jeśli nasze zdjęcie ma mieć na stronie rozmiar 200 x 200 pikseli, to musimy przygotować plik o rozmiarach 400 x 400 pikseli, a następnie ustalić rozmiar elementu na 200 x 200 pikseli. Może to wyglądać na przykład tak:

Kod: Zaznacz cały

<img src="http://nasza-domena.pl/nasz-obrazek-400x400.jpg" width="200" height="200" />

Można to oczywiście zrobić również korzystając z arkuszy stylów CSS.

W przypadku WordPressa sytuacja jest znacznie prostsza. Z pomocą przychodzi nam bowiem wtyczka WP Retina 2x, która utworzy nowe, dwukrotnie większe wersje wszystkich dodanych do Biblioteki Mediów obrazów, a także zautomatyzuje proces podmieniania zdjęć na stronie. Wystarczy ją zainstalować i aktywować, a następnie przejść do nowej podstrony w menu Media aby wygenerować nowe obrazy. Wystarczy kliknąć przycisk Generate for all files, co rozpocznie proces przetwarzania obrazów znajdujących się w naszej bibliotece. Po zakończeniu tego procesu zostaniemy poinformowani o obrazach, których oryginalna wersja jest zbyt mała - w takich przypadkach będziemy mogli wysłać na serwer alternatywny plik graficzny.

Wszystkie te czynności możemy również wykonać w samej Bibliotece Mediów, korzystając z nowej sekcji Retina na liście plików. Oczywiście dla wszystkich dodawanych po instalacji wtyczki obrazów nowe, większe wersje będą generowane automatycznie.

WP Retina 2x generuje nowe miniatury korzystając z zarejestrowanych rozmiarów - po prostu powiększa każdy z nich dwukrotnie i dodaje do nazwy pliku końcówkę @2x. W ustawieniach wtyczki możemy wybrać te rozmiary, dla których nie mają być generowane nowe pliki - można wykluczyć na przykład nieużywane rozmiary.

Wtyczka posiada dwa tryby podmiany obrazów: po stronie klienta i po stronie serwera. Ten drugi jest nieco szybszy, ale może sprawiać problemy w połączeniu z systemami cache i w serwisach korzystających z serwerów CDN. Pierwszy tryb, mimo że nieco wolniejszy, powinien działać wszędzie bez problemów.

Wtyczka współpracuje z rozszerzeniem Enable Media Replace, które warto również zainstalować, bo znacznie ułatwia proces podmieniania zbyt małych obrazów.

Trzeba pamiętać, że w przypadku nowych komputerów MacBook Pro wtyczka WP Retina 2x działa tylko w przeglądarkach, które obsługują nowe ekrany. W momencie pisania tego tekstu jedyną taką przeglądarką było Safari.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook