Ретина на «Маке»: вопросы и ответы
Поскольку «Ретина» и сравнимые с ней экраны ещё редкость вне смартфонов и планшетах, то многие так до сих пор и не разобрались что это и как работает. Я решил написать эту заметку, чтобы ответить на вопросы, которые возникали у меня и возникают сейчас у моих друзей и знакомых.
Вступление
Долгое время такая характеристика как число точек на единицу площади в экранах не росло, хотя другие характеристики менялись с ошеломляющей скоростью. Тому была причина — увеличение количество пикселей на точку, например, в два раза, означало бы что все программы отображались в два раза мельче. Если в миниатюрную кнопку вы ещё попадёте, то крошечный шрифт многие просто прочесть не смогут.
Ситуация изменилась, когда фирма Эпл выпустила первое устройство с экраном где плотность точек была в два раза выше. Эпловцы вышли из положения очень интересным способом — для старых программ ничего не менялось, просто каждый пиксель такой программы выводился как четыре. Скоро все стали делать так же.
Такой экран Эпл назвала «Ретиной», от латинского названия сетчатки. Утверждается, что такое число точек для глаза максимально, дальше увеличивать плотность не имеет смысла. Хотя есть и другие точки зрения, например, «Самсунг» (если ничего не путаю) выпустил смартфон с экраном тройной плотности.
Слово «ретина» сразу стало нарицательным и его, похоже, ждёт судьба «джипа» и «ксерокса».
Достоинства
Большинство программ в «Маке» к таким изменениям подготовились и выглядят просто превосходно — после чёткой «ретины» смотреть на экран других ноутбуков неприятно, тут шрифт невероятно красив, читать стало комфортнее, сверхтонкая прорисовка иконок радует глаз.
Недостатки
Увы, не все программы готовы к такому переходу, прямо сейчас я пишу этот текст в клиенте, который ничего о «ретине» не знает и текст в нём выглядит отвратительно. Кроме того, остаётся веб — подавляющее большинство картинок в нём для «ретины» не подготовлены и выглядят плохо. У меня на сайте, кстати, с момента покупки «Мака» с «ретиной» все иллюстрации готовятся в двух вариантах — для обычных экранов тоже.
Вебу плохо ещё и от того, что браузеры мало что могут предложить для комфортной вёрстки под экраны высокой плотности. Насколько я знаю, этим занимаются только ребята, пишущие «Вебкит» — недавно они анонсировали поддержку атрибута srcset у изображений, а год назад сделали поддержку image-set в ЦСС. Остальные же поддержали новые экраны только на уровне Джаваскрипта.
И ни один браузер не позволяет указать толщину чего-либо в полпикселя, чтобы на «ретине» это отобразилось толщиной в один.
Ещё в вебе может плохо смотреться Флеш. От чего это зависит я не знаю, но факт — некоторые части флеш-приложения могут смотреться хуже других.
Дизайнерам приходится туго — рисовать-то нужно всё ещё для прежних экранов, а на «ретине» всё в два раза мельче, так что я бы не рекомендовал сейчас дизайнерам переходить на этот тип экрана. По крайней мере пока производители графических редакторов не придумают что с этим делать.
Глюки и интересные моменты
Никогда не задумывались что будет, если подключить к ноуту с «ретиной» обычный монитор и перетащить окно на или с него? Какое-то время плотность пикселей меняться не будет — на обычном мониторе их часть «провалится», на «ретине» изображение будет чуть размыто, а потом всё разом перерисуется. Если же вытащить окно не полностью, меньше половины, то меньшая часть по пикселям подстроится под бо́льшую часть.
Интересный глюк обнаружился у текущей версии «Хрома» (какая она там у него уже? сороковая? сотая?) — иногда при переходе с «ретины» на обычный экран у него сползает незначительная часть интерфейса, да так и остаётся. Глюков у других программ я не заметил.
Производительность
Производительности иногда нехватает, но мне её нехватало и на предыдущем «Маке», причём куда в бо́льшей степени, так что тут ситуация скорее улучшилась.
Резюме
Купил бы я снова ноут на «ретине»? Безусловно!
Для дизайнеров еще миллион лет назад придумана векторная графика, ничего дополнительного производители графических редакторов с этим не делали и не будут делать.
Комментарий для ichik:
Фотографию ретушировать тоже векторами? Кроме того, вектор в вебе пока очень плох.
А какая у вас модель ноутбука? Это 15» Макбук про?
Комментарий для Евгения Степанищева:
Возможно флеш местами выглядит плохо в тех частях где используется растр, а не вектор?
а как же media query в CSS?
div{
background-image:url(mobile-low.png);
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
div{
background-image:url(mobile-hd.png);
background-size:100%;
}
}
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) {
div{
background-image:url(mobile-hd.png);
background-size:100%;
}
}
Избыточно, конечно, но работает.
Комментарий для Виктор:
У меня 13, 15 мне много.
Комментарий для Олег Горбунов:
Не знаю. Я храню дерево своих предков на сайте myheritage, там Флеш используется. Вот там половина надписей хорошо смотрится, оставшаяся — нет. Неясно почему.
Комментарий для Владимир:
Да никак. Это подспорье, конечно, но это не картинки, это задний фон со всеми проблемами: загружаются такие изображения позднее, на печать скорее всего не попадут.
У меня ретина 15», доволен безумно — очень красиво, качественная цветопередача. Ужас, когда приходится включать MS Word :)
Нарисованное в векторе преспокойно экспортируется в несколько растровых картинок, причем этот процесс легко автоматизируется и даже уже автоматизирован.
Ретушь фотографии отношения к работе интерфейсного дизайнера вообще не имеет. А интерфейсный дизайнер — это вообще единственный человек, которого существование наборов графических элементов в двух размерах должно волновать.
Комментарий для ichik:
Я вообще ничего не понял. Причём тут интерфейсный дизайнер?
Вот у меня на сайте фотографии в двух разрешениях. Для ретины, чтобы была высокая детализация и для обычных экранов, чтобы не гонять лишний трафик и чтобы браузер не тормозил при попытки масштабировать.
А вы мне о каких-то интерфейсных дизайнерах.
offtopic Попрежнему жду на твоём блоге «эксплоатацию» и «лойяльность».
Комментарий для Евгения Степанищева:
А зачем ударение в слове «бо́льшей»? По-другому ведь не говорят.
Комментарий для Дофин:
Это ты так на ошибку намекаешь? :) Ну так пиши прямо, я же не могу всё вычитать, глаз мылится.
Комментарий для Димон:
Это не ударение, это акцент на слове.
Чисто технический аспект сохранить картинку в двух разрешениях (да хоть в 25-ти, если уж на то пошло, это все равно одной кнопкой делается).
Лучше все-таки ничего не советовать людям тех профессий, о работе которых ты имеешь настолько ПРИБЛИЗИТЕЛЬНОЕ представление.
Комментарий для ichik:
Похоже, это вы имеете приблизительное представление об этой работе. Со мной бок о бок работают дизайнеры, в т.ч. и на ретине. Я вижу их трудности каждый день, вижу проблему взаимодействия между дизайнерами на ретинах и теми (верстальщиками, например), у кого ретины нет.
Если говорить о ретуши фотографии, о чём я уже который раз тут упоминаю, ретушировать её в разрешении два раза больше, чем то, в котором её будут смотреть — вообще бесполезное занятие. На меньших разрешениях видно подробности, которые почти невозможно заметить на ретине — там эти вещи слишком мелкие.
Думаю, все же от английского :)
Комментарий для fulc.ru:
Как-то не очень похоже на английское слово, скорее — на медицинский латинский термин, перешедший в язык, что-то вроде нашего «ортопед», вроде слово и русское, но какое-то… очень специальное. Но может я и не прав.