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

в 13:28, , рубрики: high resolution, javascript, less, retina display, Песочница, метки: , , ,

Новый 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", и если есть (и вы с экраном, поддерживающем большое физическое разрешение), отобразит её.

Автор: TunzTunz

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js