Plugin Адаптивные изображения PRO (responsiveimages) [Shop-Script] 2.1.4

Адаптивные изображения PRO (responsiveimages) [Shop-Script]
Нужные изображения для каждого устройства (+webp).



Плагин «Адаптивные изображения PRO» создает массивы адаптивных изображений на основе оригинального изображения, подходящие под размеры устройств посетителей сайта. И также имеет множество функций для работы с изображениями, которые помогут в увеличении скорости и SEO продвижении сайта.



Этот плагин относится к серии наших плагинов «SPEED» если вы хотите ускорить свой сайт, обратите внимание на другие плагины этой же серии: Супер кэш, Lazy load.

Функции:

• Добавление микроразметки Schema.org для изображений и перечисление созданных изображений внутри ее.
• Создание дубликатов изображений в соотношении сторон: 16x9, 4x3, 1x1 (рекомендация Google для SEO продвижения изображений).
• Создание изображений увеличенной плотности пикселей (2x, 3x), чтобы на всех устройствах были изображения хорошего качества.)
• Работа с Webp, конвертация в формат и изменения размеров изображений (необходимо, чтобы библиотека GD (>=2.0) или Imagick (>=6.5.7) была скомпилирована с поддержкой WebP, для работы с входящими webp изображениями потребуется версия PHP 7.1.0 и выше).
• Сжатие изображений.
• Добавление метаданных для JPEG изображений по стандарту
  You do not have permission to view link please Log in or Register
  (Creator, Description, Credit Line, CopyrightNotice, Source). Если кто-то возьмет изображения с вашего сайта для Google источником будет ваш сайт.
• Автозапись атрибута alt у тегов img (на основе имени изображения, заголовка страницы и ключевых слов страницы).
• Создание LQIP (заполнители изображений низкого качества) — это позволяет сократить размер изображений во время загрузки около 10 раз и не получить скачка контента сайта. Для работы с LQIP понадобится плагин
  You do not have permission to view link please Log in or Register
  .

Особенности:

• Не использует тег picture и поэтому размер узлов DOM не увеличивается.
• Авто определение поддержки браузером Webp если поддерживается подключается Webp, иначе старые форматы.
• Не работает в браузерах IE.
• Работает только в приложении «Магазин».
• Вес JS-скрипта всего 4кб.
• Работает в фоновом режиме по технологии AJAX.
• Работает с форматами изображений: png, jpg/jpeg, gif, webp.
• Создание изображений происходит после посещения страницы сайта пользователем.
• Если изображения имеют атрибут «srcset», то плагин воспринимает эти изображения, как адаптивные и не взаимодействует с ними.

PageSpeed Insights:

• Улучшение метрики «Настройте подходящий размер изображений».
• Улучшение метрики «Используйте современные форматы изображений».
• Улучшение метрики «Для изображений не заданы явным образом атрибуты width и height».
• Улучшение метрики «Настройте эффективную кодировку изображений».

Есть особенность при анализе мобильной версии с метрикой «Настройте подходящий размер изображений». PageSpeed Insights использует эмуляцию устройства с retina дисплеем, а браузер из атрибута «srcset» для retina дисплеев подставляет наибольшее по размеру изображения и из-за этого PageSpeed Insights дает штраф, что используются слишком большие изображения.

Начало работы:
В настройках плагина нажать «Активировать плагин» — плагин готов к использованию.

Работа плагина:
Алгоритм работы плагина состоит из двух этапов

• Первое посещении страницы сайта — создание изображений при совпадение контрольной точки с шириной экрана (до тех пор, пока не будут созданные изображение для всех контрольных точек).
• Второе посещение страницы сайта — добавление изображений в разметку.

Чтобы проверить работу плагина посетите любую страницу приложения «Магазин» с шириной экрана равной любой из контрольных точек. Затем обновите страницу. Наведите курсор на любое изображение (формата: png, jpg, gif, webp). Нажмите правой кнопкой мыши, появится контекстное меню, в котором вам нужно выбрать пункт исследовать элемент/просмотреть код. Тег img должен иметь атрибуты: «srcset» с путями до изображений и «sizes» с размерами изображений. Если так, плагин работает корректно.

Совместимость с другими плагинами:
Плагин разрабатывался таким образом, чтобы свести к минимуму конфликты с другими плагинами которые взаимодействуют с изображениями, но все же плагин добавляет атрибуты «srcset» и «sizes» и из-за этого могут возникнуть проблемы с некоторыми плагинами.

• Работа с лайтбоксами (Lightbox): проблем не выявлено.
• Работа с плагинами
  You do not have permission to view link please Log in or Register
  и
  You do not have permission to view link please Log in or Register
  : полная интеграция.
• Работа с сторонними плагинами, которые обеспечивают отложенную загрузку изображений (lazyload): работа плагина с такими плагина не гарантируется. Часто такие плагины интегрированы в тему дизайна.