Быть модным сайтом с WP Retina 2x Pro

Задумывались ли вы о том, как ваш сайт будет выглядеть на устройствах Apple с Retina Display? Это: iPhone, iPad, MacBook, iMac, — число обладателей которых растет с каждым днем, а соответственно и ваших посетителей с данных девайсов. Уникальный в своем роде плагин WP Retina 2x Pro автоматически заменяет обычные изображения на изображения ультравысокой четкости для показов на Apple. В результате, сайт на таких устройствах выглядит необыкновенно красочно, сочно и при этом четко, подобно векторным картинкам.

Суть работы плагина состоит в следующем. Вы просто загружаете нужную картинку размером в 2 раза больше, к примеру, если в статью идет картинка 800 на 600px, то необходимо загрузить 1600 на 1200px. Далее из этих «лишних» пикселей создается самое высокое из возможных разрешение под технологии IPS, используемых Apple. На обычных устройствах (не Apple) покажется ваше стандартное изображение, указанного в медиафайлах WordPress размера, а на Retina Display покажется это изображение того же размера, но с высокой плотностью пикселей.

Рассмотрим WP Retina 2x Pro более детально

Сразу хочу заметить. Вы можете установить бесплатную версию плагина прямо через админку wordpress. Она также отлично работает, хотя урезана некоторыми полезными функциями. Я же буду рассматривать именно профессиональную версию плагина WP Retina 2x Pro, которая стоит у меня на сайте и которую я могу вам предоставить на очень выгодных условиях. Так как сотрудничаю с разработчиком данного функционала. Об этом я далее расскажу в видео-ролике.

Разберем настройки нашей «машины» Retina 2x

Плагин WP Retina 2x Pro устанавливается стандартно: консоль wordpress — плагины — добавить новый — закачиваете архив zip с компьютера.

После активации слева в админ-панели увидите. Главные настройки находятся в разделе — Retina.

Они состоят из 4 блоков. Показываю на примере, как у меня настроено.

• Disabled Sizes — плагин анализирует все настройки медиафайлов вашей темы (шаблона) и wordpress-овские на предмет возможных размеров изображений. Указывает стандартные (Normal) и рядом те, которые вы должны загрузить для создания Retina Display — то есть, для Apple устройств. Важно, retina изображения всегда создаются с загруженного оригинала, имеющего именно полный размер. Галками вы можете отметить те области, для которых не хотите создавать retina, это обычно миниатюры и мелкие размеры.
• Auto Generate — автоматически создает сетчатки изображений (retina) при загрузке оригиналов.
• Method — это методы доставки изображений для устройств Retina Display. Всего их 5. Все описывать не буду, на сайте разработчика вы можете их более подробно изучить — https://meowapps.com/wp-retina-2x/retina-methods/. Я использую рекомендуемый PictureFill — все отлично работает. Суть его такова, когда пользователь заходит на сайт с обычного устройства — ему покажется стандартное изображение, ссылка которого всегда в теге src, зайдет с Apple — плагин сразу это определяет, на ходу переписывает html-код изображения и заменяет тег src на srcset, в итоге пользователь видит сгенерированную картинку ультравысокого качества.
• Full Size Retina — некоторые на сайте используют только полноразмерные изображения — оригиналы без деления на размеры, как обычно в медиафайлах вордпресс. Также, это чаще всего — логотипы, какие-то иконки и т.д. А плагин не может создать apple retina из воздуха, ему нужны свободные пиксели. И если здесь отметить галкой, то для таких полных картинок вы можете загрузить соответствующие большего размера по технологии drag-and-drop (перетаскивание мышью).
• Retina Quality — процент сжатия оригиналов изображений jpg. Самое оптимальное — 90.

Всегда, при генерировании медиафайла retina, в его ссылку добавляется @2x в самом конце перед расширением.

Обычная ссылка — домен/wp-content/uploads/2014/01/Katalog-partnyorskih-programm-admitad-Google-Chrome-300×149.jpg

Retina ссылка — домен/wp-content/uploads/2014/01/Katalog-partnyorskih-programm-admitad-Google-Chrome-300×149@2x.jpg

Здесь, из наиболее важных, я уделю внимание 3 функциям:

• Disable Responsive — отключает retina и показываются только стандартные медиафайлы.
• Custom CDN Domain — если у вас к сайту подключена система доставки контента (в нашем случае относится к медиафайлам), то указываете ее адрес и изображения будут поставляться на Apple устройства с кэша серверов системы.
• Debug — довольно интересная функция. При включении, ваш сайт будет себя вести как с Apple экрана. Это именно для отладки файлов retina, чтобы вы смогли убедиться, что плагин работает корректно и для retina display показываются именно созданные сетчатые картинки.

А здесь, вот эти 2 функции, с которыми можно поиграться:

• Keep IMG SRC — когда показывается картинка retina по вышеописанному методу PictureFill, то тег src заменяется на src-set. И может так выйти, что поисковые системы посчитают retina изображение за отличное (другое) от стандартного в плане SEO (тег ALT, описание файла и все такое). Но это спорный вопрос и как бы малозначимый (больше применимо к раскрутке картинок в поисковиках). Дак вот, если отметить галкой, то на retina display будут обе картинки загружаться — стандарт и сгенерированная. А покажется именно retina и наследует все SEO от стандарта . Единственный минус, понадобится на доли секунды больше для загрузки, но ведь почти все мы используем кэш. Так что, никаких проблем!
• Lazy Retina —  а вот эта штука дополняет вышеописанную для более быстрой загрузки. Иначе говоря, ленивая загрузка retina картинки. Последняя загрузится только тогда, когда пользователь будет уже приближаться к ней мышью на экране.

Поэтому, обычно эти 2 функции всегда вместе отмечаются галками. Я пока не отмечал, так как еще не все картинки сделал под Apple и пока играюсь с методами плагина…

На этом скриншоте объяснять нечего, просто можете скрывать различные части меню настроек плагина.

Создание Apple Retina изображений

Переходим к самому интересному. Основные настройки мы разобрали. При установке WP Retina 2x Pro у вас будет еще одно окно в консоле — медиафайлы.

Нажимаем Retina и попадаем в панель инструментов.

A

Issues — Проблемы. Перед вами сразу покажутся «проблемы» — картинки, для которых не создана retina (сетчатка) или для которых ее можно создать. Эти проблемы нужно решать в первую очередь. А если, что вам советую, вверху нажать F — Bulk Generate, то сразу начнется создание сетчатых файлов для всех доступных размеров. Все созданные размеры сеток, при необходимости, вы можете удалить одним кликом — Bulk Delete.

B

В этом столбце перед вами будут 3 цвета квадратиков:

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

Желтый квадратик говорит о том, что для этих областей уже готова сетка, просто нажмите Generate в столбце C и она будет сгенерирована.

Синий квадрат — все окей! Картинка Retina создана, так как хватило размеров для определенной области сайта. В идеале, все квадратики должны быть синими, но здесь зависит от ваших желаний, где конкретно показывать сетку.

C

Как уже объяснял, нажатие Generate — создает сетку, Ignore — убирает медиафайл из столбца и из проблем полностью, Details — показывает детально информацию о изображении, работает и создалась ли ссылка retina и др.

D

Сюда перетаскиваем нужного размера картинки для создания нашей сетки. Перетаскивание мышью методом drag-and-drop с любого места компьютера.

E

Столбец для загрузки изображений и создания retina конкретно для полноразмерных файлов, о чем рассмотрено (скриншот 1).

F

Генерация всех подходящих по размеру для retina display медиафайлов или же их всех удаление.

G

Вверху указывается информация, какой необходим размер загружаемых файлов, чтобы создались картинки retina для всех областей сайта (синие квадратики). И указан размер конфигурации PHP.

Как проверить работу WP Retina 2x Pro

Не у всех есть устройство Apple (Retina Display), чтобы посмотреть отображение сайта с созданными сетчатыми картинками. В таком случае у нас есть один способ для проверки. Отмечаем в основных настройках WP Retina функцию Debug (скриншот 2) и смотрим retina изображения сайта через код, так как теперь сайт будет вести себя как с экрана Apple.

Как приобрести плагин на выгодных условиях

Посмотрите это короткое видео, где я объяснил подробно, как получить WP Retina 2x Pro.

На этом все, спасибо за внимание!