Адаптивные изображения PRO

Адаптивные изображения PRO для Shop-Script

Нужные изображения для каждого устройства (+webp).

1 оценка

Ваш отзыв
Установок
< 10
Разработчик
Поддержка

Плагин «Адаптивные изображения 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 изображений по стандарту IPTC (Creator, Description, Credit Line, CopyrightNotice, Source). Если кто-то возьмет изображения с вашего сайта для Google источником будет ваш сайт.
  • Автозапись атрибута alt у тегов img (на основе имени изображения, заголовка страницы и ключевых слов страницы).
  • Создание LQIP (заполнители изображений низкого качества) — это позволяет сократить размер изображений во время загрузки около 10 раз и не получить скачка контента сайта. Для работы с LQIP понадобится плагин Lazy load.

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

  • Не использует тег 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): проблем не выявлено.
  • Работа с нашими плагинами Супер кэш и Lazy load: полная интеграция.
  • Работа с сторонними плагинами, которые обеспечивают отложенную загрузку изображений (lazyload): работа плагина с такими плагинами не гарантируется. Часто такие плагины интегрированы в тему дизайна.
  • Работа с плагином «Изображения WEBP»: проблем не выявлено (требуется PHP 7.1 и выше), но наш плагин выполняет функции этого плагина, а использование двух плагинов это создание лишней нагрузки на сервер.

Техническая поддержка:

  • Техническая поддержка оказывается по адресу: startwebsite@mail.ru
  • Время работы (по московскому времени): 10:00 - 18:00 Пн-Пт в рабочие дни РФ
  • Техническая поддержка включает: консультации по настройке, ответы на вопросы по работе плагина, настройка плагина по вашему заданию
  • Будем рады услышать ваши: пожелания, идеи, замечания по работе плагина

Ещё продукты разработчика

Все продукты этого разработчика