Jak skonfigurować swoją witrynę internetową w celu uzyskania obrazów przystosowanych do obrazów Retina

Spisu treści:

Anonim

Minęło sporo czasu, odkąd wyświetlacze Retina na urządzeniach z systemem iOS zostały po raz pierwszy wypuszczone, ale wciąż jest wiele stron internetowych, które nie są gotowe na Retinę, nawet jeśli projektanci i programiści doszli do faktów w pełni responsywnych, mobilnych Przyjazny świat.

Oto, co powinieneś wiedzieć o opcjach, które sprawią, że Twoja praca będzie wyglądała najlepiej na coraz popularniejszych wyświetlaczach Retina. Dobra wiadomość jest taka, że ​​może to wydawać się zniechęcające, ale nie jest to aż tak skomplikowane.

$config[code] not found

Przygotuj swoją witrynę internetową do obrazów przygotowanych dla retiny

Podwój swoją zabawę

W rzeczywistości istnieje wiele sposobów na skórze tego kota, że ​​tak powiem. Po pierwsze, musisz nieco wyostrzyć swój styl CSS i dołączyć wersje swoich obrazów dwukrotnie większą od ich normalnej rozdzielczości. CSS określi obraz do wyświetlenia na podstawie urządzenia, na którym przeglądana jest twoja strona.

Potrzebne aktualizacje CSS będą się różnić w zależności od docelowych przeglądarek, ale dobrą wiadomością jest to, że obecnie nie jest to zbyt skomplikowane i jest coraz łatwiejsze. Zostawimy faktyczne kodowanie na inny dzień.

Trzeba o tym pamiętać: możesz opracować konwencję nazewnictwa dla obrazów siatkówki, aby móc łatwo powiązać dwie wersje obrazu na wypadek, gdyby trzeba je było później edytować.

SVG

Inne podejście to SVG lub Scalable Vector Graphics. Jak sama nazwa wskazuje, są one ograniczone do grafiki wektorowej i nie będą działać z fotograficznymi obrazami, ale grafika SVG eliminuje potrzebę dwóch plików graficznych dla każdej grafiki w witrynie. Ponownie, są różne od przeglądarki do przeglądarki, więc będziesz chciał wykonać dodatkowe badania w zależności od potrzeb.

Jak wspomniano powyżej, SVG prawdopodobnie nie będzie działać jako jedyne rozwiązanie na większości witryn, chyba że witryna nie zawiera zdjęć typu zdjęć.

Brutalna siła

Oczywiście możesz też po prostu zrzucić pliki o niskiej rozdzielczości i po prostu wyświetlać obrazy przygotowane do Retina. Zalecamy to tylko w przypadku zastosowań z bardzo wąską grupą odbiorców. Jeśli wiesz, że przepustowość nie będzie problemem, może to być właściwa trasa, ale z pewnością nie jest to najlepsza praktyka

Inne rozwiązania kodowania

Na drugim końcu spektrum wysiłku i elegancji znajdują się metody kodowania, które opierają się na pewnych zmianach po stronie serwera (takich jak wpisy plików.htaccess) wraz z kodowaniem PHP i JavaScript.

To może być twoje najlepsze podejście, choć wysiłek może nie być warty dla mniejszych projektów.

Podsumowując, podejście, jakie podejmiesz, zależy od Twoich odbiorców, charakteru wizualizacji Twojej witryny i poziomu wiedzy technicznej zespołu programistów. Jest dobre rozwiązanie dla każdej sytuacji. Jedynym złym rozwiązaniem jest całkowite ignorowanie wyświetlaczy Retina.

NASDAQ Zdjęcie za pośrednictwem Shutterstock