Новый 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
