Ретиновый мир

Кто как борется с засильем экранов высокого разре­шения в наших девайсах? Как разместить картинку на странице так, чтобы на наших ретинах она не превра­щалась в расплыв­чатое недора­зу­мение, теребящее тревожный звоночек, напоми­нающий о неотвра­тимости прибли­жа­ющегося похода к офталь­мологу?

Что я имею ввиду? В то прост­ранство, которое на класси­ческом, обычном экране занимает одна точка (далее пиксель), на ретине поме­щаются четыре. Когда откры­ваешь на ретина-экране страницу с картин­ками, сверстанную под обычный экран, браузеру неоткуда взять изобра­жение улучшен­ного качества, он берет что дают и просто растя­гивает это в два раза по горизон­тали и по вертикали, ну и немного сглаживает результат. Получается что получается. Тут надо сказать, что если на этой картинке представ­лена обычная бытовая фотография, то описанного подвоха можно и не заметить. Проблемы вылезают, если на изобра­жении есть контрастные линии. Это могут быть графики, картинки с текстом, что-нибудь такое.

Когда сайт заранее адап­тируют для открывания на разных устрой­ствах, самое правильное подго­товить два изобра­жения: поменьше, для мониторов попроще, и в два-на-два раза больше, для мониторов повышенной четкости. Например, 320x240 точек для классики и 640x480 точек для ретины. В коде страницы пишется программа, при каждом открытии страницы трево­жащая сервер сайта, которому прихо­дится проверять на каком обору­до­вании отобра­жается страница и, в свою очередь подсо­вывать браузеру картинку нужного разре­шения. Такой подход еще и потому правильный, что экономит интернет-трафик.

Но, как и у каждого яня, у этого подхода тоже есть свой инь. Проблема в том, что никто вам не даст нахаляву насиловать их обору­до­вание. Если каждому давать, поломается кро… кхм, сервер, вестимо. Поэтому, на общест­венных ресурсах наглухо закры­вается любая возмож­ность вставить свои испол­ня­емые скрипты в код страницы.

Для себя я решил проблему так: я загружаю на сайт только бо́льшую картинку, а в коде страницы указываю, что она занимает меньшее простран­ство. Для этого, в тег <img> дописываю атрибут style.

Следующую, графи­ческую часть лучше посмот­реть и сравнить для себя на разных экранах.

Для примера приведу картинку, которую я нарисовал для сайта о програм­ми­руемом кальку­ляторе Citizen SRP–175. Плани­ро­валось, что изобра­жение будет занимать 153x42 условных пикселей простран­ства страницы. Подго­товлены два варианта:

Изображение-1x
153x42 точек, здесь в код страницы вставлена только ссылка на картинку, как есть, без применения стилей

Изображение-2x
306x84 точек, тоже вставлена только ссылка на картинку, как есть, без применения стилей

Опа! Ретина в попе. Сравнили? Заметили? На ретине браузер оба изобра­жения увеличил и размыл. Испортил ради совмес­ти­мости, чтобы они занимали относи­тельно ту же площадь на стоящих бок-о-бок экранах. А на класси­ческий же экран браузер вывел картинки как они есть, в опти­мальном качестве.

Теперь выведу обе эти же, физически разного размера картинки, но с добав­лением в тег <img> одного и того же атрибута style="height:auto; width:auto; max-width:153px; max-height:42px". Здесь я велю браузеру выкру­чи­ваться как хочет, но чтоб изобра­жение занимало максимум 153x42 пикселей. Полностью команда в обоих случаях выглядит так:

<img src="http://www.АДРЕС.com/КАРТИНКА-N.png" style="height:auto;width:auto;max-width:153px;max-height:42px">

Изображение-1x
153x42 точек изображения занимают 153x42 точек на классике, а на ретине растянуты до 306x84 точек, которые, тем не менее, занимают все те же 153x42 условных пикселей страницы сайта

Изображение-2x
306x84 точек изображения вписаны в 153x42 пикселей страницы, что на ретине покажет картинку как есть, а на обычном экране сожмет ее до 153x42 точек экрана

Что называется, кто там нонеча за ретина-экраном, почув­ствуйте разницу. Остальным может пока­заться, что в двух последних случаях картинка исполь­зована одна и та же.

Повторюсь. При таком моем бюджетном способе, на ретина-экран браузер выводит картинку как есть, а на экране прошлого поколения сжимает ее. И это меньшее из зол. Да скачи­ваются лишние байты, но зато умень­шенная картинка на обычном экране смотрится гармо­ничнее, чем растя­нутая на улучшенном.

---

Правка

Нашел способ проще — у тега img есть параметр zoom для этого. Настроил таблицы CSS, теперь в этом блоге все картинки проходят через фильтр <img stile="zoom: 50%" /> и смотрятся сказочно как на ретине, так и, насколько это возможно, на класси­ческих мониторах.