что такое логотип retina
Особенности И Секреты Веб-Дизайна Для Дисплеев Retina И Разрешений 4К И 5К
Адаптируя макет сайта для устройств Apple с Retina-дисплеями, веб-дизайнерам необходимо учитывать специфику технологии. Как подготовить изображения, какие моменты стоит учесть кроме этого? Как сделать веб-дизайн удобным для всех? Мы рассмотрим эти вопросы и не только.
На рынке смартфонов, ноутбуков и PC доля устройств с разрешением экранов в 2К, 4К и 5К неуклонно растет и с каждым годом такой продукции становится все больше и больше. Соответственно, развитие цифровой графики, видео, веб-дизайна, анимации тоже не стоит на месте и должно быть им под стать, чтобы на больших разрешениях качественно и красиво всё выглядело. Например, тот же сервис YouTube уже имеет поддержку видео в 2К и 4К, Apple ведет с 2014 года продажи iMac с дисплеями Retina 4К/5К.
Для веб-дизайнеров и разработчиков такое развитие технологий означает, что приходит время вести не просто оптимизацию сайта и делать его адаптивным, но и уделять большое значение графике, чтобы она безукоризненно отображалась при большом разрешении. Чтобы разобраться в «накатывающем» на человечество прогрессе, мы в этом материале рассмотрим особенности больших разрешений дисплеев Retina и пользу Photoshop для веб-дизайнера в этом вопросе. Дело в том, что экраны Retina устанавливаются и на iPad/iPhone/iMac/MacBook и прочие устройства Apple, а поскольку доля пользователей этой техникой растет в мире, то и сайты должны уже иметь поддержку данной технологии.
Технологии больших разрешений
В чем состоит разница между 4K, 5K, Retina? Все сводится к пикселям и многие знают это почти наизусть. Но напомним.
Apple, представляя новую собственную технологию Retina, рассказала и уверила всех, что человеческий глаз способен воспринимать гораздо большее количество пикселей, поэтому, если матрица стандартного экрана в 15 дюймов и разрешении1440x 900 состоит из пикселей того же количества (1440×900), то на 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. Это удобно, поскольку запросов по http будет меньше, трафик снизится, и обработка отображения на экране станет происходить быстрее.
Скрипт
Уже в таком варианте, форматы файлов изображений могут быть разными: 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-дисплеев.
В результате не потребуется копировать слои, вырезать их, экспортировать и сохранять нужное. Более того, добавив в название файла только коэффициент масштабирования, файл создается автоматически.
Теги в названиях могут быть:
Например, 200% logo.png – масштабируется исходное изображение на 200% и сохраняется в файл logo.png. Другой варианте: logo.jpg5 – изображение сохраняет с качеством сжатия 5.
Если нужно создать два файла, один для Retina-устройств, другой для обычных, то пишем: 200% logo.png, logo.png
Операции Photoshop
Сценарий экспорта макета
Загрузить его можно с GitHub и скопировать в \Adobe\Adobe Photoshop (ваша версия)\Presets\Scripts\
Это удобно, в целом, для того, чтобы видеть, что именно еще вам нужно улучшить для больших разрешений. Затем уже можно выделить нужные слои и сохранить в необходимом размере и формате.
Заключение
Адаптируя макет сайта для устройств Apple с Retina-дисплеями необходимо, конечно, учитывать специфику технологии. Стоит ли делать оптимизацию по умолчанию? Зависит от заказчика, но – желательно, ибо те же iPhone/iPad имеются у многих. Что же касается дорогостоящих iMac и устройств с 4К и 5К, то редко, но и ими пользуются. С другой стороны, на стандартном 4К разрешении стандартные изображения будут выглядеть неказисто.
Разумеется, остается еще много вопросов о том, как поработать со шрифтами и заменить иконками, что выбрать svg или png и многое другое. Но это уже не для данного материала.
Мы рассмотрели только часть и постарались систематизировать, что же такое Retina 4К/5К, в чем смысл технологии и как под неё «подстроить» веб-дизайн с тем, чтобы сайт одинаково хорошо смотрелся на всех устройствах. И главное, как обработать изображения, как предотвратить искажения. Адаптируете ли вы дизайн сайта для 2К или 5К, но принцип всегда один – свои изображения для каждого разрешения. Для удобства сохранять их удобнее в отдельных папочках на сервере. Это удобно для всех пользователей и корректно по отношению к будущим посетителям. А что касается большого размера файла, то существуют различные способы дополнительного сжатия.
Адаптация изображений под Retina-дисплеи
Обновили материал 14.08.2018
Джейсон Родригез, менеджер по продуктам Litmus, рассказал, почему важна адаптация изображений под Retina-дисплеи. Антон Чирков, наш руководитель отдела разработки, изучил текст и поделился своими комментариями.
Емейл-маркетологи всё чаще сталкиваются с проблемой, которую вызвала популярность мобильных устройств. Дело не только в разнообразных размерах экранов мобильных, но и в Retina-дисплеях с высоким разрешением.
«Retina-дисплей» не вполне корректное название. Это маркетинговый термин компании Apple и формально относится только к её продуктам. Однако сейчас его используют для всех экранов с повышенной плотностью пикселей.
Такие дисплеи способны преобразить любое изображение.
Давайте разберёмся, как именно работает Retina и чем она полезна дизайнерам и емейл-маркетологам.
Из истории
Вернёмся в 2010 год. Компания Apple выпустила iPhone 4 с Retina-дисплеем с высоким разрешением (DPI). DPI — это количество пикселей, которое производитель помещает на дюйм экрана. Чем выше DPI, тем более чётко и детально выглядит изображение или текст.
После появления Retina-дисплеев на устройствах компании Apple другие производители внедрили эту новинку себе — на планшетах, ноутбуках и даже настольных компьютерах.
Какое отношение Retina-дисплеи имеют к емейл-маркетингу?
Каждый маркетолог должен показать продукт с лучшей стороны. Несомненно, в емейл-маркетинге главные роли играют следующие понятия: тема письма, частота отправки, контент и дизайн. Это может как привлечь, так и отпугнуть подписчиков. Первое, что бросается в глаза, — дизайн и изображения, и только потом пользователь начинает внимательно читать текст.
Неадаптированные изображения под Retina выглядят расплывчато и нечётко. Это приводит к потере интереса подписчиков.
Адаптация изображений под Retina-экраны, как делать?
На дисплеях с повышенной плотностью пикселей, грубо говоря, в два раза больше пикселей на дюйм, чем на обычных экранах. Поэтому адаптированные изображения должны быть в два раза больше для пропорционального уменьшения в емейлах.
В качестве примера рассмотрим письмо компании Litmus. В хедере емейла находится логотип размером 130×48 px. Изображение выглядит размыто для подписчиков, которые открывают его на устройстве с Retina-дисплеем.
Сохраните картинку в большем размере для повышения чёткости изображения. Здесь размер 260×96 px. В HTML-коде прописываем размеры отображения логотипа в два раза меньше, чем реальные. В итоге получаем 130×48 px.
В результате на дисплеях с повышенной плотностью пикселей выводится красивое и чёткое изображение.
Адаптация изображений, очевидные недостатки
Основной недостаток — увеличение веса картинок и времени загрузки емейла.
Чтобы сократить время загрузки изображений письма, адаптация изображений применяема только для малоцветных изображений, таких как логотипы и иконки.
Для Retina-изображений указывайте размеры в пикселях, а не в процентах. Иначе могут появиться проблемы отображения в почтовых клиентах Оutlook 2007/2010/2013/2016.
После сохранения изображений вы можете использовать специальные программы для дальнейшего сжатия: ImageOptim, JPEGmini, TinyPNG, Compressor.io и Kraken.
Учитывая современные тенденции, все емейл-сообщения должны быть адаптированы под Retina-дисплеи. Заботьтесь о своих подписчиках, чтобы им не пришлось вглядываться в размытые изображения письма.
Включаем поддержку для Retina экранов с помощью бесплатных тем и плагинов WordPress
Уже не новый экран от Apple Retina Display по-прежнему остается актуальной темой для дискуссий веб-разработчиков и дизайнеров. Тем не менее, разработчики и дизайнеры WordPress уже начали создавать темы и плагины, которые поддерживают высокое разрешение Retina Display.
Стоит ли мне переделывать мой сайт, чтобы обеспечить поддержку параметров Retina Display? Таким вопросом до сих пор задается каждый владелец сайта. Если и вас также давно интересует этот вопрос, то возможно сегодня вы найдете ответ после прочтения этой статьи.
Что такое Retina Display?
Retina Display — это запатентованная торговая марка, используемая компанией Apple для HiDPI дисплеев высокого разрешения, которую они успешно применили в своих последних устройствах: iPad, iPhone и MacBook Pro. За счет этой технологии дисплеи обладают намного большей плотностью пикселей, нежели старые устройства (примерно 300 DPI). И за счет этого на экране выводятся более четкие изображения и плавные шрифты.
Тем не менее, стоит отметить, что на сегодняшний день уже существуют устройства, в которых число пикселей значительно выше, и это касается не только устройств от Apple.
С помощью Retina разрешение экрана на Apple MacBook Pro достигает 2880×1800 при 220 пикселях на дюйм. Можно подумать, что на 15-ти дюймовом экране объекты могут выводиться в меньшем масштабе, нежели они есть на самом деле.
Какие нюансы могут возникнуть при использовании Retina?
Многие согласятся, что с теперешним развитием технологий очень важно оптимизировать свои сайты под разные мобильные устройства. К тому же, многие сейчас пользуются не только гаджетами Apple, но и другими устройствами с похожими возможностями. Поэтому адаптация сайтов под их экраны означает идти в ногу со временем и с технологиями. Это уже даже не роскошь, а необходимость.
С другой стороны, владельцам сайтов необходимо обратить внимание на несколько других факторов. Во-первых, использование изображений в более высоком разрешении может потребовать увеличение времени загрузки страницы сайта.
Во-вторых, учитывая то количество девайсов и браузеров, которое сейчас используется, очень проблематично подготовить сайт в соответствии с разрешением экранов каждого из них.
Как добавить поддержку Retina на свой сайт WordPress?
Добавить поддержку Retina к используемой вами теме WordPress очень просто. Для этого достаточно загрузить новое изображение с увеличенным 2x-разрешением и с помощью одного полезного скрипта указать желаемое разрешение – стандартное или же сверхвысокое.
Добавьте скрипт в js директорию вашей темы, а затем поставьте его в очередь на загрузку в файле functions.php. Когда пользователи загружают страницу, скрипт retina.js проверяет, есть ли высокое разрешение изображения со страницы на вашем сервере. Если да, то скрипт сразу же его отобразит.
Добавляя на сайт новое изображение, сохраните файл как logo.png, к примеру. А второе — в два раза большее по размеру как logo@2x.png. Так, скрипт сам определит, какую версию изображения выводить. Подобная схема работает для любого названия файла, просто добавьте после него @2x.
Кроме этого, чтобы сделать все по уму, используйте шрифты-иконки где это возможно, так как они всегда отображаются в большом разрешении, превращая фавиконы с 16х16 в размер 32х32. А фоновые изображения также удваиваются в размере, так как этот скрипт не отличает фоновые изображения от других картинок.
Ниже приведен CSS код для вывода фоновых изображений:
Как адаптировать сайт под Retina с помощью плагинов WordPress?
Разработчики уже успели подготовиться и нашли два основных подхода к внедрению сверхвысокого разрешения графики на WordPress.
Плагин WP Retina 2x
Этот плагин определяет устройство, с которого пользователь зашел на страницу сайта, и если оно поддерживает изображения высокого разрешения, то на вашем сайте отображается соответствующий формат. После установки плагина вы сможете управлять изображениями в дашборде, где отображаются статусы файлов в вашей медиа-библиотеке. Плагин имеет 4 метода для отображения картинок в Retina режиме:
После установки WP Retina 2x в меню админки появится новая вкладка с настройками плагина. Там же находятся две вкладки – для стандартных и продвинутых настроек. На странице основных настроек можно указать, какие размеры изображений не показывать в сверхвысоком разрешении. Будут показаны также и средний, большой, маленький размер изображений, а также другие, добавленные темой, для генерирования миниатюр или слайдеров.
Во вкладке продвинутых настроек можно выбрать метод включения «на стороне сервера» и «на стороне клиента». После установки плагина также добавится вкладка Retina 2x, в которой будет отображаться статус загруженных изображений и наличие версий Retina. Автор Jordy Meow рекомендует использовать параметр плагина “Enable Media Replace”, который разместит кнопку для замены некорректно отображающихся изображений.
Плагин Simple WP Retina
С помощью этого плагина вы легко добавите на свой сайт функциональность, поддерживаемую совместимость с экранами Retina. Он работает на стороне сервера, чтобы определить графику в высоком разрешении и отобразить на экранах устройств посетителей с соответствующим форматом такие изображения. Simple WP Retina простой, не занимает много места и хорошо работает.
Тем не менее у плагина есть несколько ограничений. Он не будет работать корректно, если вы используете любые плагины для кэширования. В нем нет своей панели управления, простого способа для отладки плагина и возможности убедиться, что он действительно правильно определяет и отображает графику в двойном размере на мониторах с высоким разрешением экрана.
Плагин Retina Image Support
Еще один простой плагин, который имеет похожий функционал, как в предыдущем. Он добавит скрипт retina.js, и вам нужно будет загружать изображения с указанием @2x после названия.
Плагин HiDPI Gravatars
Этот плагин будет обновлять граватары вашего сайта до более широких разрешений. Он прост в установке и активации. А чтобы новый аватар смотрелся лучше, при его загрузке используйте размер 128х128 пикселей.
Темы с поддержкой разрешения Retina
На сегодня есть более 70 бесплатных тем WordPress с готовой поддержкой Retina прямо из коробки, а также свыше 3000 премиум Retina-тем на ThemeForest. Мы рассмотрим пять бесплатных популярных тем.
Clean Retina
Простая и удобная тема автоматически адаптирует сайт под разрешения экранов планшетов и мобильных устройств.
Baskerville
Привлекательная и адаптивная тема под экраны с высоким разрешением Baskerville. Она прекрасно отображает записи, видео, картинки и галереи, и в ней очень легко можно поделиться понравившейся записью или ссылкой.
Jkreativ Lite
Jkreativ Lite — это полностью адаптивная тема, совместимая с блогом. Она поддерживается на экранах с высоким разрешением и выглядит превосходно на каждом современном устройстве и при перекрестной совместимости браузеров.
Garfunkel
Стильная и адаптивная тема в стиле Pinterest, соответствующая разрешению retina.
Минималистичная и адаптивная тема для блоггеров, которая поддерживается на экранах с высоким разрешением. Включает в себя галерею, видео формат, формат цитат, прокрутку Jetpack, редактирование стилей и код для мультиязычности сайта. Тема отлично смотрится на экранах смартфонов с разрешением от 3.5 дюймов, а также читабельна на планшетах.
Заключение
Использовать адаптацию сайта под разрешения экрана retina или нет – решать только вам. Но если этого требует тематика, например, портфолио или сайт фотографа, тогда используйте изображения с высоким разрешением не раздумывая. Тем более, как вы сами убедились из сегодняшней статьи, создать их не так уж и сложно с помощью простого плагина или готовой темы.
SITE BLOGGER
создание, продвижение сайтов
Адаптация изображений под Retina-дисплеи
Сегодня мы расскажем о том, как можно адаптировать изображения Вашего сайта под Retina-дисплеи, которые используются на современных устройствах Apple — iMac, iPad, iPhone и др. Напомним, что «Retina» — это общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся высокой плотностью пикселей. Однако, как правило, на Retina-дисплеях часть графики большинства сайтов расплывается, качество изображений падает. Причем «плывет» именно растровая графика, векторная графика отображается и масштабируется без искажений. Существует несколько способов, которые помогают решить эту проблему. В данной статье мы расскажем об одном из них.
Не секрет, что большинство сайтов имеют свой логотип. Давайте представим, что стоит задача сделать отображение логотипа на Retina, избавившись от размытия. Для этого нам понадобится изображение логотипа в 2 раза большее оригинала. К примеру, если у нас логотип «logo.png» имеет размер 200х50px, то для Retina понадобится логотип размером — 400х100px. Делаем такой логотип в графическом редакторе, например, в Photoshop и называем его — logo@2x.png.
Далее открываем в текстовом редакторе файл стилей нашего сайта, как правило, это файл «style.css» и находим место, где задан стиль отображения логотипа. Что-то в таком роде:
Теперь просто нужно в этот файл стилей (чуть ниже) дописать медиа-запрос, чтобы для дисплеев, у которых соотношение физических и CSS-пикселей больше 1.5, загружалась картинка logo2x.png — делается это так:
Не забудьте задать такие же размеры background, что и у исходного изображения — 200х50px. Данный способ целесообразно использовать для небольшого количества изображений. Для отображения логотипа такой способ идеально подходит. А вот для адаптации большего количества изображений на сайте целесообразно использовать другие решения.