Кто как борется с засильем экранов высокого разрешения в наших девайсах? Как разместить картинку на странице так, чтобы на наших ретинах она не превращалась в расплывчатое недоразумение, теребящее тревожный звоночек, напоминающий о неотвратимости приближающегося похода к офтальмологу?
Что я имею ввиду? В то пространство, которое на классическом, обычном экране занимает одна точка (далее пиксель), на ретине помещаются четыре. Когда открываешь на ретина-экране страницу с картинками, сверстанную под обычный экран, браузеру неоткуда взять изображение улучшенного качества, он берет что дают и просто растягивает это в два раза по горизонтали и по вертикали, ну и немного сглаживает результат. Получается что получается. Тут надо сказать, что если на этой картинке представлена обычная бытовая фотография, то описанного подвоха можно и не заметить. Проблемы вылезают, если на изображении есть контрастные линии. Это могут быть графики, картинки с текстом, что-нибудь такое.
Когда сайт заранее адаптируют для открывания на разных устройствах, самое правильное подготовить два изображения: поменьше, для мониторов попроще, и в два-на-два раза больше, для мониторов повышенной четкости. Например, 320x240 точек для классики и 640x480 точек для ретины. В коде страницы пишется программа, при каждом открытии страницы тревожащая сервер сайта, которому приходится проверять на каком оборудовании отображается страница и, в свою очередь подсовывать браузеру картинку нужного разрешения. Такой подход еще и потому правильный, что экономит интернет-трафик.
Но, как и у каждого яня, у этого подхода тоже есть свой инь. Проблема в том, что никто вам не даст нахаляву насиловать их оборудование. Если каждому давать, поломается кро… кхм, сервер, вестимо. Поэтому, на общественных ресурсах наглухо закрывается любая возможность вставить свои исполняемые скрипты в код страницы.
Для себя я решил проблему так: я загружаю на сайт только бо́льшую картинку, а в коде страницы указываю, что она занимает меньшее пространство. Для этого, в тег <img> дописываю атрибут style.
Следующую, графическую часть лучше посмотреть и сравнить для себя на разных экранах.
Для примера приведу картинку, которую я нарисовал для сайта о программируемом калькуляторе Citizen SRP–175. Планировалось, что изображение будет занимать 153x42 условных пикселей пространства страницы. Подготовлены два варианта:
153x42 точек, здесь в код страницы вставлена только ссылка на картинку, как есть, без применения стилей
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">153x42 точек изображения занимают 153x42 точек на классике, а на ретине растянуты до 306x84 точек, которые, тем не менее, занимают все те же 153x42 условных пикселей страницы сайта
306x84 точек изображения вписаны в 153x42 пикселей страницы, что на ретине покажет картинку как есть, а на обычном экране сожмет ее до 153x42 точек экрана
Что называется, кто там нонеча за ретина-экраном, почувствуйте разницу. Остальным может показаться, что в двух последних случаях картинка использована одна и та же.
Повторюсь. При таком моем бюджетном способе, на ретина-экран браузер выводит картинку как есть, а на экране прошлого поколения сжимает ее. И это меньшее из зол. Да скачиваются лишние байты, но зато уменьшенная картинка на обычном экране смотрится гармоничнее, чем растянутая на улучшенном.
Правка
Нашел способ проще — у тега img есть параметр zoom для этого. Настроил таблицы CSS, теперь в этом блоге все картинки проходят через фильтр <img stile="zoom: 50%" /> и смотрятся сказочно как на ретине, так и, насколько это возможно, на классических мониторах.
Комментарии