Stosowanie grafik dla wyświetlaczy Retina na stronach WWW

retina.js to otwarta biblioteka JavaScript ułatwiająca wstawianie na strony internetowe obrazów o wysokiej rozdzielczości przeznaczonych dla wyświetlaczy Retina.

Jak to działa

Podczas wczytywania strony przez przeglądarkę skrypt przegląda wszystkie obrazy na tej stronie i sprawdza, czy dostępne są na serwerze ich odpowiedniki o podwyższonej rozdzielczości. Jeśli tak, retina.js powoduje ich pobranie i wyświetlenie zamiast zwykłych grafik.

Obrazy o podwyższonej rozdzielczości są przez skrypt rozpoznawane dzięki specjalnym znacznikom Apple wysokiej rozdzielczości (@2x), które powinny znajdować się w nazwach tych obrazów.

Przykładowo, jeśli zwykła wersja obrazu jest wstawiona na stronę za pomocą poniższego elementu HTML:

 
<img src="/images/my_image.png" />

Sskrypt retina.js będzie szukał na serwerze obrazu o następującej nazwie:

"/images/my_image@2x.png"

Sposób użycia skryptu retina.js

JavaScript

Skrypt pomocniczy JavaScript automatycznie zamienia zwykłe obrazy na warianty o wysokiej rozdzielczości (oczywiście, jeśli są dostępne). Program należy pobrać, wysłać na serwer i dołączyć na dole strony:

1. Wyślij plik retina.js na serwer.
2. Dołącz skrypt do strony za pomocą poniższego kodu:

   
   <script type="text/javascript" src="/scripts/retina.js"></script>
   

   (najlepiej umieść go na dole, przed zamykającym znacznikiem </body>)

LESS

Można też używać domieszki LESS, aby obrazy o wysokiej rozdzielczości ustawiać w tle elementów strony za pomocą reguł CSS. Należy podać ścieżkę do pliku obrazu i wymiary grafiki przy pierwotnej rozdzielczości. Domieszka utworzy zapytanie o media dotyczące wyświetlaczy Retina, zamieni obrazy tła na warianty o wysokiej rozdzielczości i zastosuje własność background-size oryginalnego obrazu, aby zachować wymiary.

Aby użyć opisanej domieszki, należy ją pobrać, zaimportować lub dołączyć do arkusza LESS i zastosować do wybranych elementów.

Składnia domieszki LESS:

 
.at2x(@ścieżka, [opcjonalnie] @width: auto, [opcjonalnie] @height: auto);

1. Dodaj domieszkę .at2x() z pliku retina.less do swojego arkusza LESS
2. W arkuszu zamiast używać własności CSS background-image, wywołaj domieszkę .at2x():

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

   Powyższy kod LESS zostanie zamieniony na następujący kod CSS:

   #logo { background-image: url('/images/my_image.png'); } @media all and (-webkit-min-device-pixel-ratio: 1.5) { #logo { background-image: url('/images/my_image@2x.png'); background-size: 200px 100px; } }