Большие изображения на сайте для пользователей с Retina Display — retina.js

Новый iPad уже появился в магазинах, не говоря уже про братьев iPhone 4S и iPhone 4, которыми многие давно и успешно пользуются, а вот сайтов, учитывающих возможности отображения дисплеями этих устройств картинок в высоком разрешении, пока не так много. Но есть простой вариант, как сделать свой сайт соответственно тренду «отзывчивым», или на их манер: responsive.

Как-то, примерно год назад, один знакомый фотограф жаловался, мол, приходится уменьшать фотографии, теряя детали, в которых кроется вся соль, мол разрешение экранов таково, что точки слишком заметны. iPhone 4 он отверг по причине «кропа» — несмотря на достойное физическое разрешение, на таком дисплейчике помещается лишь часть фотографии. Дальше он переключился на камеры с кропнутыми матрицами и тем, что получается даже при использовании хороших объективов, но меня зацепила та часть, которая касалась отображения картинок, а именно отсутствием возможности качественно показать изображение с экрана, не уменьшая размеров картинки до лилипутских.

И вот пришёл большой iPad!
Счастливая девочка Карли держит ГрушеПад



Но шутки шутками, а новый iPad действительно позволил показывать цифровые фотографии ближе к тому, какими мы их привыкли видеть, и это здорово. Но оказалось, что в Интернете практически нет сайтов, где большие изображения нормально используются в контенте и оформлении.

Решение есть, и оно не потребует переделывать сайты полностью, потребуется лишь незначительная доработка.

Во-первых, наши зарубежные коллеги подошли к решению задачи донесения highres-изображений, опираясь на букву закона, а именно на Drawing and Printing Guide for iOS, где присутствует автоматическая поддержка отображения изображений в высоком разрешении (@2x). Требуется лишь предоставить эти большие картинки и сказать о том, что они есть. Конечно, большие изображения будут загружены только тогда, когда в них есть потребность, пользователи обычных и привычных устройств с разрешением около 72dpi не будут скачивать весомых картинок впустую.

Во-вторых, они решили такую задачу лаконично, да ещё и в двух вариантах.

Для Javascript


Предлагается загрузить retina.js (1,63 Кб) на сервер и вызвать его в футере, недалеко от закрывающего тега завершения тела документа. Вызов стандартный:
<script type="text/javascript" src="/scripts/retina.js"></script>

Для LESS


Придуман понятный без лишних объяснений синтаксис:
.at2x(@path, [optional] @width: auto, [optional] @height: auto);

Нужно подключить (включить в состав своей таблицы стилей LESS) кусочек кода, содержащегося в файле retina.less из архива с сайта http://retinajs.com/ и после этого пользоваться всей мощью конструкций типа:

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


Превращающихся чудесным образом в подробные инструкции по отображению имеющихся у вас вариантов изображений для разного типа дисплеев:

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


Результат


Например, у вас на странице есть интересная картинка:
<img srс="/images/boobs.png" />

При выводе скрипт проверит, есть ли большая картинка "/images/boobs@2x.png", и если есть (и вы с экраном, поддерживающем большое физическое разрешение), отобразит её.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 5

    0
    Приятная и полезная тема, так как только что сравнивал сайты на новом iPad. Слухи о заметной пикселизации картинок чуток преувеличены. Менее четкая картинка бросается в глаза только на фоне очень четкого текста. Но если сравнивать со старым экраном, то картинки практически идентичны.
      0
      Вообще не согласен с вами. На iPad с ретиной картинки сильно размыты по сравнению с iPad'ом без ретины.
      +6
      Какая-то несправедливость…
      Большие сиськи boobs@2x.png только для новых iPad…
        0
        Это несправедливый мир, бро… Всё продаётся, всё покупается...
        0
        Как владелец устройств с ретиной, ПРОШУ, не делайте для меня большие картинки!
        И так по 600р в месяц на мобильный интернет уходит, а вы хотите, чтобы я 1200р тратил!

        Only users with full accounts can post comments. Log in, please.