Пишу, по большей части, про историю, свою жизнь и немного про программирование.

Ретина на «Маке»: вопросы и ответы

Поскольку «Ретина» и сравнимые с ней экраны ещё редкость вне смартфонов и планшетах, то многие так до сих пор и не разобрались что это и как работает. Я решил написать эту заметку, чтобы ответить на вопросы, которые возникали у меня и возникают сейчас у моих друзей и знакомых.

Вступление

Долгое время такая характеристика как число точек на единицу площади в экранах не росло, хотя другие характеристики менялись с ошеломляющей скоростью. Тому была причина — увеличение количество пикселей на точку, например, в два раза, означало бы что все программы отображались в два раза мельче. Если в миниатюрную кнопку вы ещё попадёте, то крошечный шрифт многие просто прочесть не смогут.

Ситуация изменилась, когда фирма Эпл выпустила первое устройство с экраном где плотность точек была в два раза выше. Эпловцы вышли из положения очень интересным способом — для старых программ ничего не менялось, просто каждый пиксель такой программы выводился как четыре. Скоро все стали делать так же.

Такой экран Эпл назвала «Ретиной», от латинского названия сетчатки. Утверждается, что такое число точек для глаза максимально, дальше увеличивать плотность не имеет смысла. Хотя есть и другие точки зрения, например, «Самсунг» (если ничего не путаю) выпустил смартфон с экраном тройной плотности.

Слово «ретина» сразу стало нарицательным и его, похоже, ждёт судьба «джипа» и «ксерокса».

Достоинства

Большинство программ в «Маке» к таким изменениям подготовились и выглядят просто превосходно — после чёткой «ретины» смотреть на экран других ноутбуков неприятно, тут шрифт невероятно красив, читать стало комфортнее, сверхтонкая прорисовка иконок радует глаз.

Недостатки

Увы, не все программы готовы к такому переходу, прямо сейчас я пишу этот текст в клиенте, который ничего о «ретине» не знает и текст в нём выглядит отвратительно. Кроме того, остаётся веб — подавляющее большинство картинок в нём для «ретины» не подготовлены и выглядят плохо. У меня на сайте, кстати, с момента покупки «Мака» с «ретиной» все иллюстрации готовятся в двух вариантах — для обычных экранов тоже.

Вебу плохо ещё и от того, что браузеры мало что могут предложить для комфортной вёрстки под экраны высокой плотности. Насколько я знаю, этим занимаются только ребята, пишущие «Вебкит» — недавно они анонсировали поддержку атрибута srcset у изображений, а год назад сделали поддержку image-set в ЦСС. Остальные же поддержали новые экраны только на уровне Джаваскрипта.

И ни один браузер не позволяет указать толщину чего-либо в полпикселя, чтобы на «ретине» это отобразилось толщиной в один.

Ещё в вебе может плохо смотреться Флеш. От чего это зависит я не знаю, но факт — некоторые части флеш-приложения могут смотреться хуже других.

Дизайнерам приходится туго — рисовать-то нужно всё ещё для прежних экранов, а на «ретине» всё в два раза мельче, так что я бы не рекомендовал сейчас дизайнерам переходить на этот тип экрана. По крайней мере пока производители графических редакторов не придумают что с этим делать.

Глюки и интересные моменты

Никогда не задумывались что будет, если подключить к ноуту с «ретиной» обычный монитор и перетащить окно на или с него? Какое-то время плотность пикселей меняться не будет — на обычном мониторе их часть «провалится», на «ретине» изображение будет чуть размыто, а потом всё разом перерисуется. Если же вытащить окно не полностью, меньше половины, то меньшая часть по пикселям подстроится под бо́льшую часть.

Интересный глюк обнаружился у текущей версии «Хрома» (какая она там у него уже? сороковая? сотая?) — иногда при переходе с «ретины» на обычный экран у него сползает незначительная часть интерфейса, да так и остаётся. Глюков у других программ я не заметил.

Производительность

Производительности иногда нехватает, но мне её нехватало и на предыдущем «Маке», причём куда в бо́льшей степени, так что тут ситуация скорее улучшилась.

Резюме

Купил бы я снова ноут на «ретине»? Безусловно!

19 комментариев
ichik 2013

Для дизайнеров еще миллион лет назад придумана векторная графика, ничего дополнительного производители графических редакторов с этим не делали и не будут делать.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для ichik:

Фотографию ретушировать тоже векторами? Кроме того, вектор в вебе пока очень плох.

Виктор 2013

А какая у вас модель ноутбука? Это 15» Макбук про?

Олег Горбунов 2013

Комментарий для Евгения Степанищева:

Возможно флеш местами выглядит плохо в тех частях где используется растр, а не вектор?

Владимир 2013

а как же 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%;
   }
}

Избыточно, конечно, но работает.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Виктор:

А какая у вас модель ноутбука? Это 15» Макбук про?

У меня 13, 15 мне много.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Олег Горбунов:

Возможно флеш местами выглядит плохо в тех частях где используется растр, а не вектор?

Не знаю. Я храню дерево своих предков на сайте myheritage, там Флеш используется. Вот там половина надписей хорошо смотрится, оставшаяся — нет. Неясно почему.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Владимир:

а как же media query в CSS?

Да никак. Это подспорье, конечно, но это не картинки, это задний фон со всеми проблемами: загружаются такие изображения позднее, на печать скорее всего не попадут.

Nikolay 2013

«пишушие» -> Щ

У меня ретина 15», доволен безумно — очень красиво, качественная цветопередача. Ужас, когда приходится включать MS Word :)

ichik 2013

Фотографию ретушировать тоже векторами? Кроме того, вектор в вебе пока очень плох.

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

Ретушь фотографии отношения к работе интерфейсного дизайнера вообще не имеет. А интерфейсный дизайнер — это вообще единственный человек, которого существование наборов графических элементов в двух размерах должно волновать.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для ichik:

Я вообще ничего не понял. Причём тут интерфейсный дизайнер?

Вот у меня на сайте фотографии в двух разрешениях. Для ретины, чтобы была высокая детализация и для обычных экранов, чтобы не гонять лишний трафик и чтобы браузер не тормозил при попытки масштабировать.

А вы мне о каких-то интерфейсных дизайнерах.

Дофин 2013

offtopic Попрежнему жду на твоём блоге «эксплоатацию» и «лойяльность».

Димон 2013

Комментарий для Евгения Степанищева:

А зачем ударение в слове «бо́льшей»? По-другому ведь не говорят.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Дофин:

Попрежнему жду на твоём блоге «эксплоатацию» и «лойяльность».

Это ты так на ошибку намекаешь? :) Ну так пиши прямо, я же не могу всё вычитать, глаз мылится.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для Димон:

А зачем ударение в слове «бо́льшей»? По-другому ведь не говорят.

Это не ударение, это акцент на слове.

ichik 2013

Дизайнерам приходится туго — рисовать-то нужно всё ещё для прежних экранов
Вот у меня на сайте фотографии в двух разрешениях
А вы мне о каких-то интерфейсных дизайнерах

рисовать
фотографии

Чисто технический аспект сохранить картинку в двух разрешениях (да хоть в 25-ти, если уж на то пошло, это все равно одной кнопкой делается).

я бы не рекомендовал сейчас дизайнерам переходить на этот тип экрана

Лучше все-таки ничего не советовать людям тех профессий, о работе которых ты имеешь настолько ПРИБЛИЗИТЕЛЬНОЕ представление.

Евгений Степанищев (bolknote.ru) 2013

Комментарий для ichik:

Лучше все-таки ничего не советовать людям тех профессий, о работе которых ты имеешь настолько ПРИБЛИЗИТЕЛЬНОЕ представление.

Похоже, это вы имеете приблизительное представление об этой работе. Со мной бок о бок работают дизайнеры, в т.ч. и на ретине. Я вижу их трудности каждый день, вижу проблему взаимодействия между дизайнерами на ретинах и теми (верстальщиками, например), у кого ретины нет.

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

Vladimir Moskva (fulc.ru) 2013

от латинского названия сетчатки

Думаю, все же от английского :)

Евгений Степанищев (bolknote.ru) 2013

Комментарий для fulc.ru:

Как-то не очень похоже на английское слово, скорее — на медицинский латинский термин, перешедший в язык, что-то вроде нашего «ортопед», вроде слово и русское, но какое-то… очень специальное. Но может я и не прав.