Stosowanie grafik dla wyświetlaczy Retina na stronach WWW

10 kwietnia 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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; } }
    
Strona projektu GitHub

Dyskusja

Twój adres e-mail nie zostanie opublikowany.