Retina-экраны и страшный сон веб-дизайнера

О неизбежном появлении компьютерных мониторов высокого разрешения (с плотностью пикселей 200 ppi и больше) говорили уже довольно давно, но только в этом году они наконец-то стали реальностью. Прямо сейчас на рынке присутствуют два устройства с фактором масштабирования 2x, причём одно из них — очень дорогое и заведомо нишевое, а второе, напротив, недорогое и массовое. Можно предположить, что уже через год-другой количество подобных гаджетов на руках у пользователей будет исчисляться десятками миллионов штук. То есть игнорировать данную тенденцию однозначно не стоит.

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

Самый, казалось бы, простой вариант решения проблемы — сохранять изображения с линейным разрешением в два раза больше, чем нужно, и прописывать нужные значения параметров height и width в теге <img>. Однако при этом наши картинки начинают мутно выглядеть на устройствах с фактором масштабирования 1x: чтобы изображение выглядело хорошо, его мало просто уменьшить в два раза, необходимо ещё грамотно навести резкость при помощи фильтра unsharp mask, а браузеры этому, естественно, не обучены.

Вот тут-то на помощь и мог бы прийти универсальный векторный формат для веба, но поскольку с ним как-то не сложилось, приходится решать задачу колхозными методами. На Apple.com, например, используется джаваскрипт, который в случае обнаружения Retina-экрана подсовывает клиенту картинку учетверённого размера. Минусы данного подхода понятны: необходимо держать два набора графики разного размера, плюс все эти джаваскрипты увеличивают время загрузки страницы.

Лично мне оптимальным вариантом кажется создание сайтов с абсолютно необходимым минимумом служебной графики, всё остальное должно решаться при помощи HTML+CSS. Правда, необходимости готовить два набора иллюстраций к текстам это всё равно не отменяет.

Отдельной проблемой является видео. Во-первых, сильно пережатое видео (привет, YouTube!) на Retina-экранах выглядит просто отвратительно. Во-вторых, попытка посмотреть полноэкранное видео на всё том же YouTube не привела к удовлетворительным результатам. Впрочем, это всё детские болезни, которые наверняка скоро будут вылечены — в отличие от описанных выше проблем с подготовкой графики для веба, которые надо решать системно. 

Если вам понравился этот текст, не забудьте подписаться на обновления моего блога.

Плюсануть
Поделиться