Что такое ретина дисплей на макбуке
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Преимущества и недостатки дисплеев Retina
Retina дисплей содержит в себе ряд преимуществ, которые отличают его от дисплеев других компаний:
- тип матрицы – IPS, а это значит, что такая техника отличается улучшенной графической составляющей: высокая яркость, контрастность и угол обзора, точная передачей цветов;
- фотографии выглядят живо и максимально соответствуют реальности;
- хорошо проявляют себя в цифровой живописи;
- картинка остаётся разборчивой при любых углах обзора;
- соотношение цена-качество оптимальное;
- автоматическое устранение пиксельных недочётов.
Но все дисплеи имеют свои недостатки. И Retina не стал исключением. При использовании на максимально возможных настройках батарея быстро нагревается и разряжается.
Что такое ретина-дисплеи?
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге. Изображения стали более чёткими и плавными. Появились полутона и исчезла «зернистость» картинок.
Сейчас экраны с повышенной плотностью пикселей выпускают, пожалуй, все крупные бренды. Их нельзя называть ретиной — это название принадлежит исключительно компании Apple. Но принцип отображения аналогичен.
Слева изображение для ретина-экрана, справа — для стандартного дисплея.
Использование приложений с дисплеем Retina
Если приложение выглядит на дисплее Retina или внешнем дисплее с высоким разрешением не так, как вы ожидали, попробуйте открыть приложение в режиме низкого разрешения:
- Выйдите из приложения.
- Откройте папку «Программы».
- Выделите приложение одним щелчком, затем выберите пункт «Свойства» в меню «Файл».
- В открывшемся окне «Свойства» установите флажок «Открыть в низком разрешении».
- Закройте окно «Свойства» и снова откройте приложение.
Для некоторых приложений, работающих в режиме низкого разрешения лучше или работающих только в режиме низкого разрешения, этот режим уже включен, и в этом случае отключить его бывает невозможно. Разработчик приложения может предлагать обновление, включающее поддержку дисплея Retina.
Using apps with a Retina display
If an app looks different than you expect on your Retina display or high-resolution external display, try opening the app in low-resolution mode:
- Quit the app.
- Open the Applications folder.
- Click the app once to select it, then choose Get Info from the File menu.
- From the Get Info window that opens, select the checkbox labeled ”Open in Low Resolution.”
- Close the Get Info window and open the app again.
Some apps that work best in low-resolution mode or that work only in low-resolution mode will have this mode already turned on, and in that case you might not be able to turn it off. The app developer might offer an update that includes support for the Retina display.
Retina использует только Apple?
Retina дисплей является запатентованным средством, а значит использовать его именно в таком виде не имеет права ни один бренд. Однако была попытка увеличить пиксели экрана в компании Sony, но она не увенчалась успехом. Так как именно в Apple размер экрана (дюймы) соответствует количеству пикселей. Ведь стоит помнить о том, что при увеличении разрешения требуется и увеличивать техническую составляющую устройство.
Стив Джобс (основатель Apple) как-то сказал, что 300 точек на дюйм – это золотая середина для телефонов.
Change the resolution of your display
Your Mac automatically chooses a default resolution that is optimal for your display. To change the resolution:
- Choose Apple menu > System Preferences.
- Click Displays. If you have multiple displays connected, click Display Settings, then select your display.
- Select Scaled, then select any of the four or five scaled resolutions, depending on your Mac model. With scaled resolutions, text and objects can appear larger and more visible, or smaller to provide more space for windows and apps.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Как изменить разрешение дисплея
Компьютер Mac автоматически выбирает оптимальное для дисплея разрешение по умолчанию. Чтобы изменить разрешение:
- Выберите меню Apple > «Системные настройки».
- Щелкните «Мониторы». Если подключено несколько дисплеев, нажмите «Настройки дисплея» и выберите свой дисплей.
- Выберите «Масштабированное», затем выберите любое из четырех или пяти масштабированных разрешений, в зависимости от модели компьютера Mac. В масштабированных разрешениях текст и объекты могут выглядеть крупнее и заметнее либо мельче, оставляя больше места для окон и приложений.
Что такое Retina дисплей?
При использовании этого дисплея человек совсем не заметит пикселей. Картинка очень чёткая и яркая, чем может похвастаться далеко не каждое устройство.
Раньше такой чёткостью дисплея можно было насладиться только на профессиональных компьютерах, но теперь доступно и на устройствах от Apple. Чаще всего Retina используется на планшетах iPad , разрешение составляет 2048х1536 точек. Это даже больше, чем у некоторых компьютерных мониторов.
Using Boot Camp and Windows with a Retina display
-
supports resolutions up to 3840 x 2160.
- When your Mac is using the Apple-supplied Windows Support Software, Windows starts up with the maximum dpi (pixels) it supports, which is 144 dpi, or 150-percent magnification. As a result, items on the display appear small, with a lot of space. You can use the Windows Display control panel item to adjust this setting in Windows.
Information about products not manufactured by Apple, or independent websites not controlled or tested by Apple, is provided without recommendation or endorsement. Apple assumes no responsibility with regard to the selection, performance, or use of third-party websites or products. Apple makes no representations regarding third-party website accuracy or reliability. Contact the vendor for additional information.
Давайте признаем: в формате ноутбука сейчас вряд ли возможно сделать что-то радикально новое. Можно экспериментировать с сенсорным вводом, как это делают производители Windows-ноутбуков под натиском Microsoft. Можно поставить тачпад над клавиатурой, как это сделала Acer. Но какой во всем этом смысл? Не лучше ли просто довести классику до совершенства, как поступает Apple? Я провел несколько месяцев с MacBook Pro 15 Retina и готов подробно рассказать обо всех плюсах, минусах и подводных камнях.
Вначале немного фактов из личного дела. Последней версией Windows, с которой я плотно работал, была Windows XP. И хотя в тот момент уже существовала Windows Vista, вместо ее покупки и установки я перешел на Mac. Пожалеть об этом с тех пор не пришлось ни разу. За несколько лет плотной работы Mac OS успела обновиться четырежды, если не считать многочисленных мелких апдейтов и выхода новых плагинов. Сначала был Leopard, затем Snow Leopard, потом Lion, Mountain Lion и, наконец, Mavericks. С покупкой первого MacBook Pro я полностью отказался от использования настольного компьютера, и ноутбук с тех пор сопровождает меня повсюду. Я работаю за ним дома, приношу в офис, беру в поездки и не оставляю дома, даже отправляясь в отпуск.
Переход с Windows на Mac, пожалуй, стал переломным моментом в моем пользовательском опыте. И казалось, что дальше никаких резких изменений не будет — покупай себе новый MacBook Pro и радуйся. Однако Apple явила миру макбуки с Retina-дисплеем. Стало понятно, что это следующий переломный период. Вам кажется, что большее разрешение экрана не несет в себе ничего нового? Вы ошибаетесь. Сейчас я расскажу обо всех особенностях работы с MacBook Pro 15 Retina после нескольких месяцев ежедневного использования.
MacBook Pro 15 Retina на рабочем месте
Моим основным и единственным компьютером был 13-дюймовый MacBook Pro 2010 года выпуска. И несмотря на то, что сам он морально устарел, я совершенно не спешил с покупкой более современных «прошек». Причина была довольно банальной. Ноутбук на базе Intel Core 2 Duo по сей день остается самым долгоиграющим макбуком. 10 часов автономной работы — прекрасный результат. Ни один из современных MacBook Pro не работает так долго. Однако время шло, я стал присматриваться к 15-дюймовому MacBook Pro с Retina-дисплеем и морально был готов пожертвовать парой часов автономности. Меня очень привлекала возможность заиметь более мощный и современный ноутбук с лучшим в мире экраном, который весил бы те же 2 кг, которые я привык носить с собой каждый день. Чуть большие линейные размеры (примерно на 3 см больше в длину и на 2 см в ширину) проблемой не стали: во все имеющиеся сумки и рюкзаки новый макбук влез без проблем. А в толщину MacBook Pro с Retina-дисплеем почти на треть меньше 13-дюймовой модели без Retina!
Если также используется внешний дисплей
Если внешний дисплей используется для расширения рабочего стола, можно выбрать предпочтительное разрешение для каждого из дисплеев. Чтобы отобразить дополнительные разрешения для внешнего дисплея, нажмите и удерживайте клавишу Option при выборе параметра «Масштабированное».
Если внешний дисплей используется для видеоповтора встроенного дисплея, компьютер Mac оптимизирует изображение для дисплея, выбранного во всплывающем меню «Оптимизация для». Позвольте компьютеру Mac выбрать наилучшее разрешение для дисплея или выберите «Масштабированное» и задайте другое разрешение.
При видеоповторе дисплеев можно оптимизировать изображение для внешнего дисплея, а не для встроенного.
Подведём итоги
Используйте тексты и градиенты — их не нужно дополнительно оптимизировать.
Используйте изображения минимум в двух форматах: для обычных экранов и для ретины.
По возможности отдавайте приоритет SVG.
При добавлении контентных изображений используйте тег и атрибут srcset.
Для фоновых картинок применяйте медиавыражение @media(min-resolution: 2dppx) <. >или используйте CSS-функцию image-set.
Не забывайте проверять, как выглядит вёрстка на экранах с различной плотностью пикселей.
Если вы хотите более подробно погрузиться в ретиновую графику и научиться готовить вёрстку для ретина-экранов, попробуйте наш профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация».
Разработчики разных компаний стараются уделять больше внимания дисплею, пытаясь привлечь новых пользователей к своей продукции. Так чем же удивил в этот раз Apple, и что такое дисплей Retina? Его преимущества перед другими и недостатки. Именно об этом и расскажет данная статья.
Дисплей – это неотъемлемая часть каждого устройства. Будь то планшет, компьютер или телефон. Ведь именно через него осуществляется связь человека с «железом».
Retina-совместимость и оптимизация
По умолчанию экран в MacBook Pro 15 Retina масштабируется, все элементы интерфейса имеют такие же размеры, как и в разрешении 1440х900 точек. Разница лишь в том, что шрифты, кнопки, иконки и картинки выглядят более четко. После Retina очень некомфортно снова работать за экраном с разрешением 1280х800 точек. То, что раньше казалось нормальным, теперь выглядит совсем нечетко. Собственно, то же самое можно заметить, если сравнить iPad mini и iPad mini Retina. Это новая планка качества для дисплеев, Full HD матрицы современных Windows-ноутбуков не идут ни в какое сравнение.
Настройки масштабирования на MacBook Pro 15 Retina
Эквивалент разрешения 1440х900 на примере Adobe Photoshop CS6
Эквивалент разрешения 1920х1200 на примере Adobe Photoshop CS6
Но, конечно, есть тонкости. Будьте готовы к тому, что все картинки на ваших любимых сайтах станут выглядеть хуже. Но есть и приятные исключения. Скажем, ВКонтакте отображается прекрасно, а вот Facebook до сих пор не оптимизирован. Веб-интерфейс Instagram недавно обновился и теперь выглядит на Retina-экране превосходно, а вот разрешение фотографий слишком мало. Но тут дело не столько в веб-интерфейсе, сколько в размере самих картинок. Поскольку Instagram — сервис прежде всего смартфонный, и размер картинки подобран с учетом средней скорости мобильного Интернета, то особых улучшений в ближайшее время ожидать не стоит.
Фирменный софт Apple, разумеется, оптимизирован наилучшим образом. Это касается всех встроенных приложений, официального сайта, интерфейса iCloud и так далее. Старые программы для Mac в Retina-разрешении выглядят скверно. Например, новый iWork при всех его достоинствах стал более казуальным. Тот же Pages стало гораздо менее пригодным для профессиональной работы. В работе журналиста шаблоны с красивыми списками, продвинутые функции вставки картинок и прочих медийных элементов совершенно не нужны. Нужны широкие возможности работы с выделением текста, сочетания клавиш, простота и скорость форматирования. В новом iWork зачем-то убрали возможность выделения разрозненных фрагментов текста с зажатием Cmd, а выделение с клавиатуры с использованием Shift, Alt, Cmd и стрелок стало работать по-новому. В Pages 09 все это было реализовано гораздо лучше и удобнее. Но мне пришлось перейти и смириться, потому что смотреть на грубый пикселизированный шрифт было неприятно. Кстати, это очень занятная деталь. Если взять неоптимизированный под Retina вебсайт, то нечетко будут выглядеть только картинки и растровые элементы интерфейса. Шрифт будет идеально четким. В Pages 09 ничего такого нет, шрифт ужасен, а исправлять это, естественно, Apple уже не будет.
То же самое справедливо для всех ранних версий продуктов Apple. Если вам не понравился Final Cut X, то без боли в сердце вы не сможете пользоваться более ранними версиями просто потому, что на Retina-экране они выглядят ужасно. С Aperture, Garage Band, iMovie, iPhoto, iTunes, QuickTime и прочими фирменными приложениями никаких проблем нет. Собственно, здесь нет никаких причин для использования более ранних версий. Да и возможности поставить их, по большому счету, нет, вы сразу получите ноутбук со свежайшими версиями.
С продуктами Adobe картина чуть получше. Почти все продукты из комплекта Creative Suite 6 обновились и выглядят хорошо. Правда, обновления для каждого из них нужно ставить отдельно. Photoshop CS6 выглядит превосходно, а значит, можно повременить с переходом на CC с ежемесячной оплатой и еще какое-то время пользоваться позапрошлогодними продуктами. Ирония в том, что наименее оптимизированным продуктом стал Acrobat.
Что не очень нравится?
Непривычным поначалу казалось расположение разъема для наушников. В оригинальном MacBook Pro 13 (в том, который без Retina-дисплея) он располагался на левом торце очень близко к переднему краю, так что стандартного (1,2 метра) провода от наушников хватало, чтобы откинуться на спинку кресла, сидя за столом. В новом MacBook Pro он расположен сильно дальше, и стандартного провода немного не хватает. Впрочем, возможно, это слишком надуманная проблема.
Порты и разъемы на правом торце MacBook Pro 15 Retina
Порты и разъемы на левом торце MacBook Pro 15 Retina
Не очень актуальным в моем случае стало наличие сразу двух портов Thunderbolt. 27-дюймового монитора Apple у меня нет, внешнего жесткого диска с таким разъемом тоже нет. Так что один порт сразу был занят переходником на Ethernet, а второй остается без дела. Лично я бы предпочел еще один USB-порт.
Максимальный угол раскрытия крышки MacBook Pro 15 Retina
По сравнению с обычным MacBook Pro в модели с Retina-дисплеем крышка открывается не так широко. В теории это может создать определенные трудности, если вы привыкли ставить ноутбук на подставку, поднимая экран до уровня глаз, но на практике такие случае единичны.
Крышка ноутбука стала тоньше, а экран больше не имеет воздушной прослойки между матрицей и внешним стеклом. Если дотронуться до него пальцем, он прогибается и «играет» разводами. То есть с практической точки зрения такое решение менее надежно, чем прежнее. Но такой подход позволил сделать ноутбук тоньше и легче, а также увеличить углы обзора и улучшить общие впечатления от работы. Правда, пользоваться им предстоит осторожно — какая-нибудь крошка, попавшая на клавишу, может повредить экран — он вплотную прилегает к клавиатуре.
OS X, Windows и краткое напутствие свитчерам
Если вы до сих пор не перешли на Mac из-за отсутствия необходимых приложений, то в очередной раз напомним, что Windows (от XP до Windows 8) легко и без проблем ставится на любой современный Mac. Можно установить ее на отдельный раздел жесткого диска или настроить виртуально — другая операционная система станет дополнительным рабочим столом в Mac OS. То есть даже ретроградскими приложениями (1С Бухгалтерия, 1С Предприятие, всякие инструменты разработки) вы без проблем сможете пользоваться на макбуке. Я не одинок во мнении, что MacBook — лучший ноутбук для Windows. Удобная клавиатура, лучший в мире тачпад, тонкий и стильный металлический корпус, бесподобный экран — неужели этих аргументов мало?
Windows на Mac с использованием Parallels Desktop
Правда, есть весьма значительный тормозящий фактор. Apple всячески подчеркивает тот факт, что компьютеры Mac становятся все доступнее и доступнее. Но это справедливо лишь для базовых конфигураций. За дополнительные навороты придется доплатить, причем немало. Например, самая доступная модель MacBook Pro 15 Retina обойдется всего в 79 990 рублей — совсем не дорого, по мерками продукции Apple, а максимально возможная конфигурация будет стоить уже 136 649 рублей. Неслабо, правда? Почти в два раза. Впрочем, на мой взгляд, к конфигурированию следует подходить сдеражанно. Если вы не планируете играть в игры, то выбирать модель с дискретной графикой вряд ли стоит, вам за глаза хватит встроенного адаптера Intel Iris Pro. Имеет ли смысл ставить SSD на 1 терабайт? Пожалуй, да. Хотя в моем случае оптимальным выбором был бы 512-гигабайтный накопитель. А вот на памяти в любом случае экономить не стоит — смело берите 16 ГБ и через год-два вы поймете, что всё сделали правильно. Ставить топовый процессор, на мой взгляд, тоже ни к чему, разница в производительности будет заметна лишь в единичных и очень специфических случаях. Базового Core i7 с частотой 2,3 ГГц хватит на пару-тройку лет вперед.
Топовая конфигурация MacBook Pro 15 Retina в официальном магазине Apple
Новый разъем питания MagSafe 2 не ставит крест на использовании старых зарядок. Все они совместимы, нужно лишь купить переходник. Он компактный, легкий и имеет точно такое же магнитное крепление с двух сторон. Я привык иметь под рукой три зарядных устройства: одно в офисе, два дома и одно из них (наиболее компактное, от 13-дюймового MacBook Pro) я беру с собой в поездки вместе с комплектом адаптеров для американских, британских и китайско-автралийских розеток.
Фирменный набор переходников Apple World Travel Adapter Kit — «мастхэв» для любителей путешествий
И напоследок маленький бытовой совет, который позволит избежать путаницы. В том, что все MacBook Pro выглядят одинаково и узнаваемо, есть скрытый подвох. Вы легко можете перепутать свой макбук с чьим-то чужим. На досмотре почти в каждом аэропорту ноутбук нужно доставать из сумки-рюкзака и класть в лоток отдельно. В некоторых аэропортах, например в Лондонском Хитроу, вы на несколько минут теряете свои вещи из виду: ждете, пока специальный человек направит все лотки на ленту сканера, ждете, пока индийские бабушки снимут с себя все серьги и браслеты для прохода через рамку, а потом узнаете, что ваш ноутбук забрал кто-то другой и спешно пытаетесь понять, кто именно это был. Мне однажды пришлось бежать через полтерминала, пытаясь догнать мужчину, прихватившего мой MacBook. Так что совет здесь будет только один — используйте какой-нибудь чехол или стикер, чтобы персонализировать устройство. Это застрахует вас от случайных неожиданностей. Впрочем, аксессуары для макбуков вполне тянут на тему отдельного материала.
Ну и напоследок — небольшая подборка полезных ссылок для тех, кто только-только собирается перейти с Windows на Mac: iCloud: обзор безопасности и конфиденциальности, Сочетания клавиш в OS X и Обзор новых функций OS X Mavericks.
Краткие выводы по дисплею Retina
- Retina дисплей – является разработкой корпорации Apple. На сегодняшний день является лучшим в соотношении цена-качество.
- Картинка на таком дисплее очень чёткая, цвета соответствуют реальности. На таких планшетах очень удобно рисовать.
- Одним из главных плюсов является угол обзора, который позволяет оставаться картинке чёткой и «правильной» относительно цветов, независимо от того, под каким углом смотреть.
- Учитывая преимущества и недостатки, Retina оставляет за собой место ведущего дисплея современности.
Ознакомьтесь с характеристиками встроенного в Mac дисплея Retina и внешнего дисплея Apple.
Плотность пикселей на дисплеях Retina такова, что отдельные пиксели неразличимы для глаза на обычном расстоянии от экрана. Это обеспечивает высочайшую детализацию изображения и значительно улучшает качество просмотра в целом.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Внешние дисплеи Apple, оснащенные дисплеем Retina
Apple Pro Display XDR. Штатное разрешение: 6016 x 3384, 218 пикселей на дюйм. Поддержка одного миллиарда цветов.
Apple Studio Display. Штатное разрешение: 5120 x 2880, 218 пикселей на дюйм. Поддержка одного миллиарда цветов.
Особенности вёрстки под ретина-экраны
Ретинизация изображений — стандарт на рынке веб-разработки. Уже сейчас многие устройства (и не только от Apple) используют экраны с повышенной плотностью пикселей. Поэтому, чтобы вёрстка выглядела хорошо, нужно научиться ретинизировать контент. Давайте разберём, какой тип контента нужно оптимизировать под экраны с высокой плотностью, а какой не нуждается в дополнительной подготовке.
Текст
С текстом ничего не нужно делать, ведь современные шрифты выполнены в векторном формате. Векторный текст сам подстраивается под параметры экрана и одинаково выглядит на всех устройствах. Поэтому все тексты на сайте нужно добавлять не изображениями, а с помощью
, , и других тегов.
Исключение — логотипы: даже если они выглядят как текст, их лучше вставлять изображением. Причина в том, что если по каким-то причинам основной шрифт не загрузится, браузер заменит его на стандартный. В таком случае логотип уже не будет соответствовать фирменному стилю компании. Например, представьте себе лого Coca-Cola, написанное не узнаваемым курсивом, а стандартным Arial.
Так мог бы выглядеть логотип Coca-Cola, если бы шрифт не подгрузился.
Даже в таком, казалось бы, простом случае логотип «Техномарта» лучше сделать картинкой в формате SVG, а не написать простым текстом.
Иконки и декоративные изображения
Лучшее решение для иконок и декоративных элементов — использование формата SVG. SVG — векторный формат графики, и он, как и в случае со шрифтами, отлично выглядит на экранах с разным разрешением и плотностью пикселей и не нуждается в дополнительной оптимизации при вёрстке под ретину. Главное не забывать указывать размеры таких элементов.
Иконки категорий лучше использовать в SVG-формате. А вот главный баннер, кажется, забыли оптимизировать под ретина-экраны.
Есть и другие векторные форматы, например, AI — как на этом изображении. Такое изображение хорошо подойдет для широкоформатной печати в типографии, но не для сайта.
Контентные и фоновые изображения
Для контентных и фоновых изображений обычно используют PNG, JPG, WebP и другие растровые форматы. Почему не SVG? Потому что отрисовывать фотореалистичную графику в векторе — очень трудоемкий и технически сложный процесс.
Вся растровая графика состоит из пикселей, количество которых определяется при создании изображения и остается неизменным. Поэтому при увеличении или уменьшении такой картинки её качество ухудшается: она становится «зернистой». Из-за таких особенностей основной упор при оптимизации вёрстки под ретина-дисплеи делается именно на подготовку и добавление растровой графики: контентных и фоновых изображений.
Графика должна быть подготовлена как минимум для двух вариантов экранов. Один для обычных дисплеев, второй, с увеличенным количеством пикселей — для ретины.
Обычно дизайнеры знают про экраны с повышенной плотностью и сами готовят дополнительные изображения. Так, если вы работаете с Figma, то можете легко выгрузить изображения с индексом @1x для обычных дисплеев и @2x — для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом @3x и выше.
Пример: как экспортировать изображения в Figma.
При ретинизации изображений учитывается плотность пикселей экрана устройства и в зависимости от нее показываются разные изображения. Чтобы браузер понимал, какую из картинок показать пользователю, используют медиазапросы или специальные атрибуты.
Фоновые изображения вставляют с помощью медиавыражения @media(min-resolution: 2dppx) <. >.
Вариант с префиксами:
При добавлении фона обязательно указывайте ширину и свойство background-size . Если есть возможность заменить фон на градиент, то лучше поступить именно так. Он будет выглядеть хорошо на любых экранах.
Еще один способ ретинизации фоновых изображений — использование CSS-функции image-set() . Эта функция позволяет указать несколько вариантов изображения и предоставляет браузеру возможность самостоятельно выбирать, какое из них показать пользователю. Выбор браузера будет зависеть от качества интернет-соединения. Например, при медленном интернете браузер покажет картинку, отмеченную в функции как 1x.
У функции image-set() есть несколько особенностей:
Браузеры на webkit требуют наличия префикса -webkit-image-set()
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url("platypus.jpg" 1x));
Для контентных изображений следует использовать тег и атрибут srcset . Например:
После добавления нескольких вариантов графики полезно проверять, как отображаются изображения на экранах с разной плотностью пикселей. Это можно сделать с помощью инструментов разработчика. Например, в Chrome DevTools на верхней панели можно изменить плотность экрана на DPR: 1.0, 2.0 или 3.0. А во вкладке «Сеть» или Network можно посмотреть, какие картинки загружаются на экранах с разной плотностью. Главное — при изменении DPR не забывайте перезагружать страницу.
Apple external displays that have a Retina display
Apple Pro Display XDR. Native resolution: 6016 x 3384 at 218 pixels per inch. Support for one billion colors.
Apple Studio Display. Native resolution: 5120 x 2880 at 218 pixels per inch. Support for one billion colors.
Как узнать плотность пикселей на дюйм?
С устройствами Apple всё просто. Можно зайти на официальный сайт, выбрать интересующий девайс и нажать на кнопку «Спецификация». Вы попадёте на страницу с подробными техническими характеристиками, в том числе с информацией о диагонали дисплея, разрешении и PPI:
С другими устройствами может быть чуть сложнее: не все производители указывают плотность пикселей на дюйм. Например, некоторые бренды в технических характеристиках описывает только диагональ и разрешение экрана. Поэтому если вам нужно узнать PPI на конкретном девайсе, можете вычислить его сами по формуле:
Компьютеры Mac, оснащенные дисплеем Retina
- Модели MacBook Pro (16 дюймов), представленные в 2021 г. Штатное разрешение: 3456 x 2234, 254 пикселя на дюйм. Поддержка одного миллиарда цветов.
- Модели MacBook Pro (14 дюймов), представленные в 2021 г. Штатное разрешение: 3024 x 1964, 254 пикселя на дюйм. Поддержка одного миллиарда цветов.
- Модели MacBook Pro (16 дюймов), представленные в 2019 г. Штатное разрешение: 3072 x 1920, 226 пикселей на дюйм. Поддержка миллионов цветов.
- Модели MacBook Pro (15 дюймов), выпущенные в 2012 г. или позднее, за исключением MacBook Pro (15 дюймов, середина 2012 г.). Штатное разрешение: 2880 x 1800, 220 пикселей на дюйм. Поддержка миллионов цветов.
- Модели MacBook Pro (13 дюймов), выпущенные в конце 2012 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.
Модели MacBook Air, выпущенные в 2018 г. или позднее. Штатное разрешение: 2560 x 1600, 227 пикселей на дюйм. Поддержка миллионов цветов.
Модели MacBook, выпущенные в 2015 г. или позднее. Штатное разрешение: 2304 x 1440, 226 пикселей на дюйм. Поддержка миллионов цветов.
- Модели iMac (24 дюйма), представленные в 2021 г. Штатное разрешение: 4480 x 2520, 218 пикселей на дюйм. Поддержка одного миллиарда цветов.
- Модели iMac (27 дюймов), выпущенные в 2014 г. или позднее. Штатное разрешение: 5120 x 2880. Модели, выпущенные в 2014 и 2015 гг., поддерживают миллионы цветов, а выпущенные в 2017 г. или позднее — один миллиард цветов.
- Модели iMac (21,5 дюйма), выпущенные в 2015 г. или позднее, за исключением iMac (21,5 дюйма, 2017 г.) и iMac (21,5 дюйма, конец 2015 г.). Штатное разрешение: 4096 x 2304. Модель с дисплеем Retina, выпущенная в 2015 г., поддерживает миллионы цветов, а модели, выпущенные в 2017 г. или позднее — один миллиард цветов.
Все модели iMac Pro. Штатное разрешение: 5120 x 2880. Поддержка одного миллиарда цветов.
If you're also using an external display
If you're using an external display to extend your desktop, you can choose a preferred resolution for each display. To see additional resolutions for the external display, press and hold the Option key while selecting the Scaled button.
If you're using an external display to mirror your built-in display, your Mac optimizes for whichever display is selected in the ”Optimize for” pop-up menu. Allow your Mac to choose the best resolution for that display, or select Scaled and choose a different resolution.
When mirroring your displays, you can optimize for the external display instead of your built-in display.
Что однозначно понравилось?
Прежде всего, дисплей. И дело не столько в увеличенном разрешении, сколько в наличии IPS-матрицы. Прежние MacBook Pro оснащались экранами TN+film, очень добротными и практичными, но все же углы обзора были не самыми лучшими. В случае с Retina они вплотную приближаются к 180 градусам по вертикали и по горизонтали.
Угол обзора экрана MacBook Pro 15 Retina
Отдельное «спасибо» за то, что дисплей не сенсорный. Я по-прежнему уверен, что тачскрин в ноутбуке — вещь совершенно бессмысленная. Большинство ноутбуков с Windows 8 преподносят это как преимущество, но реально пользуются сенсорным экраном очень немногие. Я серьезно. Просто понаблюдайте за тем, как работают за ноутбуками люди в кафе, в офисах, в парках. Никто не тычет пальцем в экран, ведь потом разводы мерзко бликуют на солнце и дисплей нужно протирать. К тому же у ноутбука есть клавиатура и тачпад. Их сенсорный экран не заменит, а в дополнении эти элементы вряд ли нуждаются.
Тачпад (точнее, трекпад) MacBook Pro 15 Retina
Для жестов в MacBook Pro есть тачпад. А вернее, трекпад. «Пятнашка» с Retina-дисплеем не стала исключением. Правда, ничего нового о нем сказать не удастся, поскольку тачпад совершенно не изменился — он такой же большой и удобный, как и во всех прочих моделях MacBook Pro и MacBook Air (кроме 11-дюймовой модели), поддерживает те же жесты и работает столь же безупречно. В моем старом макбуке трекпад работает превосходно после четырех лет ежедневного использования. Правда, мне не нравится то, что в OS X по умолчанию установлена реверсивная прокрутка. Чтобы прокрутить страницу вниз, по тачпаду нужно провести вверх. Мол, перетаскивать нужно не скролл бар, а контент страницы. Объяснение логичное и вроде бы правильное, но мой мозг отказывается это принимать. Поэтому в настройках я сразу вернул всё как раньше, благо такая возможность осталась.
Клавиатура MacBook Pro 15 Retina
Клавиатура также обошлась без изменений. Ход клавиш разве что стал чуть короче, примерно как у MacBook Air, но в остальном ощущения от работы ровно те же. Можно набирать текст вслепую, пользоваться сочетаниями клавиш, и даже сочетать клавиши с тачпадом, действуя одной рукой.
В моем старом макбуке за четыре года очень активного использования (фактически, это пишущая машинка) клавиатура никак не изменилась и работает как новая. Клавиши слегка потерлись, конечно, но это никак не сказалось читаемости символов. Apple использует особую гравировку: фактически каждая буква или символ на клавише — это участок прозрачного пластика, так что стереть буквы с кнопок совершенно невозможно. Правда, если вы купите ноутбук в США или в Китае и сделаете гравировку кустарным способом, то, конечно, через пару лет вам придется повторять процедуру. Впрочем, не исключено, что сейчас можно нанести кириллицу таким же образом, как это делает Apple при производстве.
Левый динамик MacBook Pro 15 Retina
Немного лучше стал и звук — громче и объемнее. Полагаю, здесь дело в увеличенных динамиках, а также в том, что они расположены по бокам, а не под клавиатурой. В небольшой комнате можно даже слушать музыку или смотреть фильм. Впрочем, я в 90% случаев использую наушники — это давняя привычка.
Весь фирменный софт Apple превосходно оптимизирован под Retina, однако речь идет только о последних версиях продуктов. Со сторонним софтом нюансов побольше, но в целом актуальные версии приложений на новых макбуках выглядят прекрасно. Но об этом ниже.
MacBook Pro 15 Retina вверх ногами
Нельзя не отметить и широкий выбор конфигураций. С прошлого года в каждом MacBook Pro по умолчанию стоит 8 гигабайт оперативной памяти, которых хватает для большинства типовых задач. При желании объем можно увеличить до 16 ГБ, с запасом на будущее. И, кстати, я настоятельно рекомендую брать конфигурацию помощнее, поскольку в MacBook Pro с Retina-дисплеем память распаяна на системной плате и самостоятельно заменить модули на более емкие нельзя. Нельзя нарастить и объем SSD — вернее, сделать это можно только при покупке. Максимум, на что можно рассчитывать — это 1 ТБ. 256 гигабайт может не хватить, особенно с учетом того, что видео-контент в невысоком разрешении на таком экране выглядит как-то не очень, и вы не будете нормально воспринимать ничего, кроме HD или Full HD. Ну а средний фильм в таком разрешении занимает гигабайт 12.
MacBook Pro 15 Retina на журнальном столике
И еще один приятный момент — корпус ноутбука стал меньше греться под нагрузкой. Нельзя сказать, что стало совсем хорошо — все-таки алюминий по-прежнему используется для теплоотвода — но во время обработки фотографий в формате RAW я могу спокойно ставить лэптоп на колени. Раньше это было невозможно.
Mac computers that have a Retina display
- 16-inch MacBook Pro models introduced in 2021. Native resolution: 3456 x 2234 at 254 pixels per inch. Support for one billion colors.
- 14-inch MacBook Pro models introduced in 2021. Native resolution: 3024 x 1964 at 254 pixels per inch. Support for one billion colors.
- 16-inch MacBook Pro models introduced in 2019. Native resolution: 3072 x 1920 at 226 pixels per inch. Support for millions of colors.
- 15-inch MacBook Pro models introduced in 2012 or later, except the MacBook Pro (15-inch, Mid 2012). Native resolution: 2880 x 1800 at 220 pixels per inch. Support for millions of colors.
- 13-inch MacBook Pro models introduced in late 2012 or later. Native resolution: 2560 x 1600 at 227 pixels per inch. Support for millions of colors.
MacBook Air models introduced in 2018 or later. Native resolution: 2560 x 1600 at 227 pixels per inch. Support for millions of colors.
MacBook models introduced in 2015 or later. Native resolution: 2304 x 1440 at 226 pixels per inch. Support for millions of colors.
- 24-inch iMac models introduced in 2021. Native resolution: 4480 x 2520 at 218 pixels per inch. Support for one billion colors.
- 27-inch iMac models introduced in 2014 or later. Native resolution: 5120 x 2880. Models introduced in 2014 and 2015 support millions of colors, and models introduced in 2017 or later support one billion colors.
- 21.5-inch iMac models introduced in 2015 or later, except the iMac (21.5-inch, 2017) and iMac (21.5-inch, Late 2015). Native resolution: 4096 x 2304. The Retina model introduced in 2015 supports millions of colors, and models introduced in 2017 or later support one billion colors.
All iMac Pro models. Native resolution: 5120 x 2880. Support for one billion colors.
Использование приложения Boot Camp и Windows с дисплеем Retina
-
поддерживает разрешения до 3840 x 2160.
- Когда компьютер Mac использует ПО поддержки Windows от компании Apple, ОС Windows запускается с максимальным поддерживаемым разрешением, которое составляет 144 точки (пикселя) на дюйм (увеличение 150 %). В результате объекты выглядят мелкими на большом пустом пространстве экрана. Для регулировки этого параметра в Windows можно использовать элемент панели управления Windows «Экран».
Информация о продуктах, произведенных не компанией Apple, или о независимых веб-сайтах, неподконтрольных и не тестируемых компанией Apple, не носит рекомендательного или одобрительного характера. Компания Apple не несет никакой ответственности за выбор, функциональность и использование веб-сайтов или продукции сторонних производителей. Компания Apple также не несет ответственности за точность или достоверность данных, размещенных на веб-сайтах сторонних производителей. Обратитесь к поставщику за дополнительной информацией.
Learn about the Retina display built into your Mac or external Apple display.
The pixel density of Retina displays is so high that your eyes can't detect individual pixels at a normal viewing distance. This gives content incredible detail and dramatically improves your viewing experience.
Читайте также: