На рынке смартфонов, ноутбуков и PC доля устройств с разрешением экранов в 2К, 4К и 5К неуклонно растет и с каждым годом такой продукции становится все больше и больше. Соответственно, развитие цифровой графики, видео, веб-дизайна, анимации тоже не стоит на месте и должно быть им под стать, чтобы на больших разрешениях качественно и красиво всё выглядело. Например, тот же сервис YouTube уже имеет поддержку видео в 2К и 4К, Apple ведет с 2014 года продажи iMac с дисплеями Retina 4К/5К.

Для веб-дизайнеров и разработчиков такое развитие технологий означает, что приходит время вести не просто оптимизацию сайта и делать его адаптивным, но и уделять большое значение графике, чтобы она безукоризненно отображалась при большом разрешении. Чтобы разобраться в "накатывающем" на человечество прогрессе, мы в этом материале рассмотрим особенности больших разрешений дисплеев Retina и пользу Photoshop для веб-дизайнера в этом вопросе. Дело в том, что экраны Retina устанавливаются и на iPad/iPhone/iMac/MacBook и прочие устройства Apple, а поскольку доля пользователей этой техникой растет в мире, то и сайты должны уже иметь поддержку данной технологии.

Технологии больших разрешений

В чем состоит разница между 4K, 5K, Retina? Все сводится к пикселям и многие знают это почти наизусть. Но напомним.

  • HD имеет разрешение 720 px.
  • Full HD  – 1920 px по горизонтали.
  • QHD или 2К – 2048 px по горизонтали и 1080 по вертикали.
  • Quarter High Definition (не путать с предыдущим) – четверть  Full HD, 960x540 px, оно преимущественно для мобильных устройств.
  • Ultra HD или 4К обладает разрешением 3840 X 2160 px (для потребительской техники, мониторов, например) и 4096 x 2160 px – для цифровых кинотеатров.
  • Retina 4K имеет разрешение 4096 х 2304 px.
  • Retina 5K у Apple iMac обладает разрешением 5120 x 2880.

Apple, представляя новую собственную технологию Retina, рассказала и уверила всех, что человеческий глаз способен воспринимать гораздо большее количество пикселей, поэтому, если матрица стандартного экрана в 15 дюймов и разрешении1440x 900 состоит из пикселей того же количества (1440x900), то на Retina-экранах разрешение при 15 дюймах равно 2880 x 1800 (ровно в два раза). То есть, весь смысл технологии Retina – увеличение количества пикселей на кадр.

Никто не спорит, качество картинки при таком количестве пикселей невероятно высоко и изображение выглядит, как в глянцевых журналах или на фотографиях. Если же сайты имеют векторную графику, то, разумеется, тоже все отлично смотрится. Но ведь почти всегда веб-дизайн использует растровую графику и тут уже начинаются проблемы с отображением. И неважно, iMac у заказчика/посетителя или iPhone/iPad. Проблема касается самой технологии Retina.

А выглядит она так: если у нас есть изображение 600 x 400 px, то на Retina-экране качество заметно ухудшится, будет размытым, нечетким и пр., ибо само разрешение должно быть большим в два раза (для 2К) или четыре раза (для 4К), с большим  количеством пикселей. Исходная картинка самостоятельно увеличивается в процентах и происходит искажение.

  

Да, разумеется, можно сразу создавать только файлы большого разрешения и через код CSS/HTML прописать, как отображать каждую картинку (img src="logo.png" height="150" width="150").

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

Удобное решение проблем с графикой для всех одновременно – иметь несколько изображений для проекта, дабы каждый пользователь видел то, что для него предназначено. Принято, что разрешения экранов Retina обозначаются @2x, @3x, @4х, а увеличение осуществляется в процентах – 100, 200 и так далее.

Использование SVG

Все изображения можно сохранять в формате масштабируемой векторной графики или SVG. Это весьма удобный и необычный формат. Он хранит данные изображения не в пикселях, как растровые форматы, а в текстовом XML, где описывается геометрия картинки и представляет собой векторный формат. Он удобен, поскольку изображения легко масштабируются и сохраняют свое качество. Photoshop не может с ним работать, но существуют скрипты и расширения для экспорта в данный формат.

Но SVG не поддерживает работу с фотографиями или артами. Для этих целей все равно придется создавать растровые файлы с разным разрешением. Зато SVG удобен для логотипов, иконок, графиков, диаграмм. Альтернативой ему может стать PNG, впрочем, на сегодняшний момент практически все браузеры поддерживают данный формат.

CSS

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

Скрипт

Можно использовать скрипт Retina.js. Весьма удобная вещь. Как только пользователь открывает страницу сайта, скрипт автоматически проверяет какое разрешение у экрана и какова матрица пикселей. Затем, в случае наличия Retina, он ищет на сервере необходимые файлы изображений и заменяет их на более качественные. Условие таково: изображения для Retina-устройств должны иметь в названиях приписку @2x, @3х, @4х.

Например: image@2x.jpg.

Уже в таком варианте, форматы файлов изображений могут быть разными: JPEG, PNG, GIF. Как работать со скриптом описано на страничке проекта и это самый простой сценарий, существующий на просторах интернета.

Иконки и шрифты

Многие надписи и буквы можно заменить иконками, точнее иконочным шрифтом, с помощью правила CSS – @font-face. Им можно заменить надписи e-mail, телефонов, названия полей в формах, заголовки виджетов. Найти их можно на сервисах We love icon fonts, Font awesome, Icomoon. В последнем есть система генерации PNG/SVG или Font и необходимого CSS кода.

 

Иконочный шрифт можно масштабировать, они поддерживаются всеми браузерами и они зачастую удобнее, чем изображения.

Adobe Generator в Photoshop

Разумеется, что создавая макет сайта и адаптируя его для устройств с Retina-дисплеями, возникает вопрос, чем может помочь Photoshop. Ответ: для создания изображений в разных разрешениях. И в самом приложении Adobe уже ввела удобную функцию, которая позволяет сразу задавать расширение файлам изображения и его необходимый размер для Retina-дисплеев.

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

Работает это в Photoshop CC. Во время работы с PSD откройте Файл -> Генерировать -> Набор изображений. У вас ровным счетом ничего не появится, никакого уведомления или окна. Но именно теперь можно задать имя слою и желаемое расширение, а затем увидеть в Проводнике Windows созданную папку с файлом или, в нашем случае, с файлами изображений.

Теги в названиях могут быть:

  • Расширение png – стандартное png32 с прозрачным альфа-каналом.
  • Расширение .png8/.png24/.png32
  • Расширение .jpg – стандарт при качестве сжатия 9
  • Расширение .jpg (1-10) или .jpg (1-100%) – аналогичный выбор качества в цифрах или процентах
  • Расширение .gif
  • N-% или Npx X Npx – указание масштабирования и размера нового изображения.

Например, 200% logo.png – масштабируется исходное изображение на 200% и сохраняется в файл logo.png. Другой варианте: logo.jpg5 – изображение сохраняет с качеством сжатия 5.

Если нужно создать два файла, один для Retina-устройств, другой для обычных, то пишем: 200% logo.png, logo.png

 

Операции Photoshop

Еще один вариант автоматического сохранения в разных разрешениях - это использование Action для Photoshop, который именуется как Retinize It. О нем мы рассказывали уже ранее, но напомним, что работает он аналогичным способом, но дополнительно представляет дизайнеру окно с вариантом сохранения изображения.

 

Сценарий экспорта макета

Когда мастер работает над дизайном, то ему приходится постоянно увеличивать исходный документ до 200% или 400%, чтобы узнать, как оное будет отображаться на Retina-дисплеях. Можно сделать гораздо проще с помощью сценария psd-export-document-retina-png.

Загрузить его можно с GitHub и скопировать в \Adobe\Adobe Photoshop (ваша версия)\Presets\Scripts\

После этого, работая над дизайном макета в разрешении 1х, откройте Файл -> Сценарии -> ExportDocument2xPNG (или 3х). Процесс не слишком мгновенный, но в папке с файлом PSD появится папочка Retina с файлом png. Это будет тот самый макет, с которым вы работаете, со сведенными слоями и увеличенный на 200%. При этом все изображения будут соответствующе оптимизированы, что главное, а не просто увеличены. Что и видно скриншоте. Логотип, например, не исказился, как это было представлено на скриншотах в начале статьи при обычном масштабировании.

 

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

 Заключение

Адаптируя макет сайта для устройств Apple с Retina-дисплеями необходимо, конечно, учитывать специфику технологии. Стоит ли делать оптимизацию по умолчанию? Зависит от заказчика, но – желательно, ибо те же iPhone/iPad имеются у многих. Что же касается дорогостоящих iMac и устройств с 4К и 5К, то редко, но и ими пользуются. С другой стороны, на стандартном 4К разрешении стандартные изображения будут выглядеть неказисто.

Разумеется, остается еще много вопросов о том, как поработать со шрифтами и заменить иконками, что выбрать svg или png и многое другое. Но это уже не для данного материала.

Мы рассмотрели только часть и постарались систематизировать, что же такое Retina 4К/5К, в чем смысл технологии и как под неё «подстроить» веб-дизайн с тем, чтобы сайт одинаково хорошо смотрелся на всех устройствах. И главное, как обработать изображения, как предотвратить искажения. Адаптируете ли вы дизайн сайта для 2К или 5К, но принцип всегда один – свои изображения для каждого разрешения. Для удобства сохранять их удобнее в отдельных папочках на сервере. Это удобно для всех пользователей и корректно по отношению к будущим посетителям. А что касается  большого размера файла, то существуют различные способы дополнительного сжатия.