Логотип retina что это
Адаптация изображений сайта под Ретина-дисплеи
Рассказываю, как быстро оптимизировать изображения сайта под качественное отображение на дисплеях Ретина, используемых на новых Макбуках, Аймаках, Айфонах, Айпадах и т.д. Как обычно, перед этим немного теории и моих практических советов.
Начнем с определения:
Rétina (от лат. retina — сетчатка) — общее маркетинговое название ЖК-дисплеев, используемых в устройствах Apple и отличающихся настолько высокой плотностью пикселей, что человеческий глаз не способен заметить, что изображение состоит из них.
Пожалуй, на этом теоретическую часть закончим. Кому интересно устройство Ретина-дисплеев, могут без особого труда найти более глубокие сведения на специализированных ресурсах.
Итак, вы наверняка замечали, что на Ретине часть графики большинства сайтов расплывается. Правильнее сказать, выглядит не очень четко по-сравнению с другими элементами интерфейса. Что бывает заметно даже невооруженным взглядом. Не сложно понять — плывет растровая графика. С вектором все в порядке, он отлично масштабируется на любом разрешении и с любой плотностью пикселей. Существуют ряд способов борьбы с этой проблемой, разработаны целые библиотеки, с помощью которых вы можете полностью адаптировать свой сайт под Ретину. Но сегодня речь пойдет немного о другом.
На мой взгляд, адаптация растра — это не совсем разумный подход. Я считаю, что уже давно пришло время избавляться от него в интерфейсе и полностью переводить его элементы в векторную графику. Например, в SVG. Кроме того, с помощью новых стилей CSS3 можно избавиться от растровой мазни в градиентах, тенях на кнопках и других элементах интерфейса. Некогда популярные на рубеже столетий растровые иконки тоже уже давно умерли и используются разве что отсталыми любителями. На смену им пришел все тот же векторный SVG и столь любимые веб-разработчиками библиотеки шрифтовых иконок. Вы удивитесь, но интерфейс практически любого сайта можно без особых хлопот избавить от растра. Тем самым навсегда избавив его от проблем с отображением на дисплеях высокой четкости.
Если вам не удалось избавиться от растра полностью, не расстраивайтесь! Пара-тройка растровых изображений в интерфейсе сайта — это не беда и вовсе не проблема. Я вам расскажу как просто и грамотно с помощью нескольких строк CSS адаптировать ваше растровое изображение для корректного отображения на Retina-дисплее.
Не вдаваясь в подробности ситуации, возьмем простой пример. У вашего сайта графически-сложный логотип, который невозможно или затруднительно конвертировать в векторный формат. Давайте опустим логичные вопросы: как так получилось, что нет векторного логотипа и что это за такой логотип, который невозможно отобразить в векторе. Наша задача сделать отображение логотипа на Ретине четким, избавившись от мыла.
Нам нужно лишь дописать медиа-запрос, чтобы для дисплеев у которых соотношение физических и CSS-пикселей больше 1.5, загружалась наша новая картинка logo2x.png
Делается это очень просто:
Не забудьте задать размеры бэкграунда такие же как у исходного изображения. В нашем случае 300х100 px.
Понятно, что данный способ целесообразно использовать для небольшого количества конкретных изображений. Если вы хотите иметь поддержку Ретины в том числе и в контенте — используйте другие способы. О них мы поговорим в другой раз.
Делаю сайты на Вордпресс с 2008 года. Не просто сайты, а уникальные инструменты для решения сложных бизнес‑задач с оптимизацией и поддержкой.
Что нужно знать о вёрстке под ретину
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Что такое ретина-дисплеи?
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге. Изображения стали более чёткими и плавными. Появились полутона и исчезла «зернистость» картинок.
Сейчас экраны с повышенной плотностью пикселей выпускают, пожалуй, все крупные бренды. Их нельзя называть ретиной — это название принадлежит исключительно компании Apple. Но принцип отображения аналогичен.
Слева изображение для ретина-экрана, справа — для стандартного дисплея.
Как узнать плотность пикселей на дюйм?
С устройствами Apple всё просто. Можно зайти на официальный сайт, выбрать интересующий девайс и нажать на кнопку «Спецификация». Вы попадёте на страницу с подробными техническими характеристиками, в том числе с информацией о диагонали дисплея, разрешении и PPI:
С другими устройствами может быть чуть сложнее: не все производители указывают плотность пикселей на дюйм. Например, некоторые бренды в технических характеристиках описывает только диагональ и разрешение экрана. Поэтому если вам нужно узнать PPI на конкретном девайсе, можете вычислить его сами по формуле:
Если не хочется считать вручную, можно воспользоваться любым онлайн-калькулятором. Например, такие сервисы есть на сайте 7pads.com, myresolutionis.ru или prostudio.ru. Они показывают одинаковые результаты, поэтому можете выбрать любой.
Результаты подсчёта: слева myresolutionis.ru, справа — prostudio.ru
Особенности вёрстки под ретина-экраны
Ретинизация изображений — стандарт на рынке веб-разработки. Уже сейчас многие устройства (и не только от Apple) используют экраны с повышенной плотностью пикселей. Поэтому, чтобы вёрстка выглядела хорошо, нужно научиться ретинизировать контент. Давайте разберём, какой тип контента нужно оптимизировать под экраны с высокой плотностью, а какой не нуждается в дополнительной подготовке.
Текст
С текстом ничего не нужно делать, ведь современные шрифты выполнены в векторном формате. Векторный текст сам подстраивается под параметры экрана и одинаково выглядит на всех устройствах. Поэтому все тексты на сайте нужно добавлять не изображениями, а с помощью
, и других тегов.
Исключение — логотипы: даже если они выглядят как текст, их лучше вставлять изображением. Причина в том, что если по каким-то причинам основной шрифт не загрузится, браузер заменит его на стандартный. В таком случае логотип уже не будет соответствовать фирменному стилю компании. Например, представьте себе лого Coca-Cola, написанное не узнаваемым курсивом, а стандартным Arial.
Так мог бы выглядеть логотип Coca-Cola, если бы шрифт не подгрузился.
Даже в таком, казалось бы, простом случае логотип «Техномарта» лучше сделать картинкой в формате SVG, а не написать простым текстом.
Иконки и декоративные изображения
Лучшее решение для иконок и декоративных элементов — использование формата SVG. SVG — векторный формат графики, и он, как и в случае со шрифтами, отлично выглядит на экранах с разным разрешением и плотностью пикселей и не нуждается в дополнительной оптимизации при вёрстке под ретину. Главное не забывать указывать размеры таких элементов.
Иконки категорий лучше использовать в SVG-формате. А вот главный баннер, кажется, забыли оптимизировать под ретина-экраны.
Есть и другие векторные форматы, например, AI — как на этом изображении. Такое изображение хорошо подойдет для широкоформатной печати в типографии, но не для сайта.
Контентные и фоновые изображения
Для контентных и фоновых изображений обычно используют PNG, JPG, WebP и другие растровые форматы. Почему не SVG? Потому что отрисовывать фотореалистичную графику в векторе — очень трудоемкий и технически сложный процесс.
Вся растровая графика состоит из пикселей, количество которых определяется при создании изображения и остается неизменным. Поэтому при увеличении или уменьшении такой картинки её качество ухудшается: она становится «зернистой». Из-за таких особенностей основной упор при оптимизации вёрстки под ретина-дисплеи делается именно на подготовку и добавление растровой графики: контентных и фоновых изображений.
Графика должна быть подготовлена как минимум для двух вариантов экранов. Один для обычных дисплеев, второй, с увеличенным количеством пикселей — для ретины.
Обычно дизайнеры знают про экраны с повышенной плотностью и сами готовят дополнительные изображения. Так, если вы работаете с Figma, то можете легко выгрузить изображения с индексом @1x для обычных дисплеев и @2x — для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом @3x и выше.
Пример: как экспортировать изображения в Figma.
При ретинизации изображений учитывается плотность пикселей экрана устройства и в зависимости от нее показываются разные изображения. Чтобы браузер понимал, какую из картинок показать пользователю, используют медиазапросы или специальные атрибуты.
Фоновые изображения вставляют с помощью медиавыражения @media(min-resolution: 2dppx) <. >.
Вариант с префиксами:
У функции image-set() есть несколько особенностей:
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url(«platypus.png» 1x));
Пока что не во всех браузерах есть полная поддержка этой функции. Поэтому перед использованием проверьте, поддерживают ли её нужные вам браузеры с помощью сервиса Caniuse.com.
Для контентных изображений следует использовать тег
После добавления нескольких вариантов графики полезно проверять, как отображаются изображения на экранах с разной плотностью пикселей. Это можно сделать с помощью инструментов разработчика. Например, в Chrome DevTools на верхней панели можно изменить плотность экрана на DPR: 1.0, 2.0 или 3.0. А во вкладке «Сеть» или Network можно посмотреть, какие картинки загружаются на экранах с разной плотностью. Главное — при изменении DPR не забывайте перезагружать страницу.
Подведём итоги
Используйте тексты и градиенты — их не нужно дополнительно оптимизировать.
Используйте изображения минимум в двух форматах: для обычных экранов и для ретины.
По возможности отдавайте приоритет SVG.
При добавлении контентных изображений используйте тег
Для фоновых картинок применяйте медиавыражение @media(min-resolution: 2dppx) <. >или используйте CSS-функцию image-set.
Не забывайте проверять, как выглядит вёрстка на экранах с различной плотностью пикселей.
Если вы хотите более подробно погрузиться в ретиновую графику и научиться готовить вёрстку для ретина-экранов, попробуйте наш профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация».
Другие наши статьи о вёрстке
Оптимизация сайтов под Retina-экраны
Сравнительно недавно на рынок активно стали входить дисплеи с увеличенной плотностью пикселей – это Retina дисплеи (на Apple девайсах) и их аналоги других производителей.
* Далее, да простят нас конкуренты Apple, чтобы не писать длинных фраз, все экраны с высокой плотностью пикселей объединим названием Retina.
Для веб-разработчиков это новая головная боль. Так почему же? Попробуем разобраться. Большая плотность пикселей означает, что количество физических пикселей больше, чем виртуальных.
Физические пиксели — самые мелкие элементы любого дисплея, каждый из которых имеет свою яркость и цвет.
Плотность пикселей — это количество физических пикселей на единицу площади (обычно пикселей на дюйм).
CSS-пиксели — некоторая браузерная величина, используемая для точного отображения контента и независящая от экрана.
Соотношение между физическими пикселями и виртуальными
Для лучшего понимания сразу представим это соотношение графически:
Т.е. блок, например, шириной 300x700px на Retina дисплеях будет размером уже 600x1400px. Аналогично любая растровая картинка будет масштабироваться и при этом терять качество:
Очевидная разница в качестве. Одна и та же картинка на стандартном дисплеи (слева) и на Retina-дисплеи (справа).
Оптимизация графики под Retina
В общем-то сначала стоит понять, нужно ли это нам вообще? Доля Retina дисплеев хоть и неуклонно растет, но пока остается небольшой. Преимущественно это мобильные девайсы – планшеты. Так, например, для сайта фирмы, занимающейся продажей стальных дверей скорее всего это не понадобится, т.к. большинство заходов будет со стационарных компьютеров, где основная доля экранов стандартные. Другое дело, если говорить о сайтах, связанных с мобильными устройствами или интернет-магазинах. Там доля трафика с мобильных устройств значительно выше и заходов с устройств с Retina тоже больше.
Итак, мы решили, что нам необходимо оптимизировать графику под Retina. Как это сделать? Очевидно, что надо выдать картинку с требуемым разрешением. Есть несколько способов, рассмотрим их.
HTML и CSS масштабирование
Пожалуй, самый простой способ – это заранее подготовить картинки большего размера (требуемый размер, умноженный на 2). Так, например, чтобы показать лого размером 250x100px, надо загрузить картинку размером 500x200px и уменьшить его, используя CSS-свойства или HTML-атрибуты.
Можно просто задать атрибуты width и height для картинки:
То же самое можно получить, используя jQuery библиотеку:
Для изображений на фоне можно воспользоваться CSS-свойство background-size для нужного блока. Тут стоит учесть, что данное свойство не поддерживается в IE8 и ниже. Для поддержки IE есть фиксы, но они не всегда помогают.
Все три метода можно комбинировать в данном способе.
JavaScript
Аналогичный результат можно получить, воспользовавшись window.devicePixelRatio
На основе этого метода создан плагин Retina.js, который умеет делать все то же самое, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, не имеющих retina-копий.
Серверный метод
Метод заключается в том, чтобы часть работы переложить на сервер. Т.к. сервер не знает, какое разрешение у монитора пользователя, ему надо помочь с помощью небольшого скрипта, которым, если значение dppx (точек на пиксель) больше 1.5, мы установим cookies.
SVG-графика
Тут стоит учесть, что SVG формат не поддерживается в IE8 и ниже. Для поддержки IE требуется подготовка заменяющих PNG-изображений. Реализуется это при помощи плагина Modernizr.
Как создать Retina-оптимизированные изображения, которые не замедляют работу WordPress
В этой статье я расскажу, как создать в WordPress изображения высокого разрешения для Retina-устройств. Я покажу, как сделать из этой фотографии…
При этом вы будете уверены в том, что предоставляется максимально оптимизированный файл.
Руководство для WordPress по Retina-изображениям
Экран устройства состоит из тысяч маленьких квадратов, называемых пикселями. В файле любого изображения есть инструкции для каждого пикселя экрана, указывающие, какого цвета он должен быть.
Разрешение изображения влияет на качество его отображения на устройстве пользователя.
При этом показатель DPI (количество точек на дюйм) не влияет на то, как изображение отображается на сайте. Посмотрит на эти изображения, которые были сохранены с разными DPI:
72 DPI, весит 149 КБ
150 DPI, весит 149 КБ
300 DPI, весит 149 КБ
Изображения выглядят одинаково. А также имеют равный размер файла, потому что применяют одинаковые инструкции и количества пикселей.
Ваш экран не обращает внимания на DPI в отличие от принтера. DPI сообщает принтеру, как плотно размещать пиксели при печати изображения на бумаге.
Изображения, распечатанные на одном листе бумаги
Разрешение указывает, насколько плотно вы хотите отображать данные изображения. Если изображение размером 100 на 100 пикселей, то у меня есть данные на 10 тыс. пикселей.
Разрешение не меняет объем данных в изображении.
PPI — это количества пикселей, которые экран может отображать на дюйм. Retina- экраны имеют в два раза больше пикселей по вертикали и горизонтали. Поэтому пространство, которое раньше занимало один пиксель, теперь содержит четыре пикселя.
Теперь у нас недостаточно данных, чтобы задать инструкции всем этим новым пикселям. Вот почему обычные изображения на Retina- экранах выглядят размытыми.
Retina-экраны пытаются распределить данные по всей поверхности. Для пустых пикселей они пытаются использовать данные из пикселей, расположенных вокруг них. Чтобы это исправить, нужно предоставить WordPress более плотные изображения.
Шаг 1: Создать изображения с удвоенными размерами в пикселях
Чтобы создавать в WordPress Retina-изображения с достаточным количеством данных для каждого пикселя, необходимо удвоить размеры в пикселях для каждого загружаемого изображения.
Если есть большое фото шириной 1600 пикселей и высотой 400 пикселей, вам нужно создать изображение шириной 3200 пикселей и высотой 800 пикселей. Если ширина страницы 800 пикселей, то изображения для записей, опубликованных в блоге должны, иметь ширину 1600 пикселей и т. д.
Нужно удвоить размеры в пикселях для максимально возможного размера, в котором изображение будет отображаться. Не следует создавать изображения с удвоенными размерами для каждого адаптивного размера.
Вы можете сохранить изображения, указав в имени @2x перед расширением файла. Но это не обязательно, так как приведенный ниже плагин сделает это за вас.
Как оптимизировать загруженные изображения под Retina-экраны?
Создание Retina-оптимизированного сайта может занять много времени, если у вас большое количество контента. Нельзя просто загрузить изображение и увеличить его в Photoshop, иначе вы получите размытые копии.
Шаг 2: Предоставьте изображения для Retina- устройств
Есть много разных способов сделать это. Я собираюсь показать вам два из них.
Вариант 1. Вручную изменить атрибут srcset в WordPress
В атрибуте srcset нужно указать изображение для устройств, не поддерживающих Retina. А также версию изображения для Retina-устройств.
Но проблема заключается в том, что вы не предоставляете браузеру изображения для небольших пользовательских устройств. Другими словами, приведенный выше код не создает адаптивные изображения.
дает нам больше возможностей:
В результате браузеры, которые не поддерживают элемент HTML5
Но самая важная часть
Чтобы предоставить браузеру различные варианты адаптивного изображения, нужно вставить в элемент
Много кода? Тогда используйте специализированный плагин.
Вариант 2: Установить и настроить плагин WordPress Retina 2x
WP Retina 2x — бесплатный плагин из репозитория WordPress. Его бесплатной версии будет достаточно для задач, реализуемых в рамках этого руководства.
Плагин WordPress Retina 2x
На примере с изображением жука, видно, что размер файла Retina- изображения в два раза больше обычного. Если у вас много изображений, это резко замедлит сайт.
Плагин Smush поможет оптимизировать изображения, а плагин Smush Pro подарит дополнительное преимущество.
Smush Pro CDN может автоматически конвертировать изображения в файлы WebP, которые намного меньше, чем файлы в форматах JPEG и PNG. Сервис также изменяет размер изображения.
Как настроить плагин для создания изображений для Retina-дисплеев
Рассмотрим некоторые настройки плагина WordPress Retina 2x.
Базовые настройки
«Отключенные размеры» позволяют избежать преобразования определенных размеров изображений в Retina для экономии места на диске.
«Качество Retina» позволяет установить качество сжатия для JPEG.
PictureFill
PictureFill – рекомендуется для обслуживания Retina-изображений в WordPress. Он использует полифилл JavaScript для загрузки изображений или переписывает HTML-код для использования атрибута srcset.
Адаптивные изображения
Retina.js
Этот метод полностью основан на JavaScript. HTML-код загружает и обычное изображение. Если будет обнаружена поддержка Retina, он также загружает Retina-изображение.
Перезапись HTML
Метод « Перезапись HTML» при обнаружении Retina- устройства изменяет атрибуты src. Но могут возникнуть проблемы при совместном использовании с некоторыми плагинами кэширования.
Retina – Image
Расширенные настройки
В разделе « Расширенные настройки» активируй те параметр « Автогенерацию», чтобы при загрузке изображений автоматически создавалась Retina-версия.
Автогенерация является важным параметром
Шаг 3: Загрузите Retina-изображения в WordPress и используйте их на своем сайте
После того как вы создали Retina-изображения и настроили плагин, пришло время загрузить их на сайт.
Ширина изображения составляет 1200 пикселей. Но мне нужно использовать версию шириной в 600 пикселей, чтобы получить качество Retina.
Например, если есть иконка сайта icon.png 200 на 200 пикселей, вам нужно создать ее версию размером 400 на 400 пикселей, переименовать в icon@2x.png и загрузить через FTP или SFTP в ту же папку, где находится файл icon.png.
Возможные проблемы с WP Retina 2x
Smush CDN входит в состав Smush Pro
С помощью плагина Smush Pro изображения легко конвертировать в более эффективный формат файлов
Вы также можете включить автоматическое изменение размера изображений. Для этого активируйте параметр «Включить автоматическое изменение размера изображений» в настройках Smush Pro CDN.
Установите переключатель «Включить автоматическое изменение размера изображений», чтобы ускорить работу WordPress.
Это все
Использование Smush Pro CDN и плагина WP Retina 2x является лучшим способом обслуживания большинства Retina-изображений в WordPress. При этом другие посетители не почувствуют изменений в производительности.
Пожалуйста, оставляйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, дизлайки, лайки, подписки, отклики!
Пожалуйста, опубликуйте ваши отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!