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

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

Все необходимые функции для изображений (+Webp).

3 оценки

2 999
−51%
13:26:45
Выгода 1 529 ₽
Ваш отзыв
Установок
70+
Разработчик
Поддержка

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

Пример работы смотрите на нашем демосайте.

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

Функции:

  • Создание адаптивных изображений (изображения в размер устройства пользователя) – это уменьшает размер изображений и увеличивает скорость загрузки сайта, особенно на мобильных устройствах.
  • Конвертация в формат Webp – использование изображений формата .Webp ускоряет скорость загрузки страницы (Требуется механизм обработки изображений GD или Imagick если он скомпилирован с libwebp).
  • Оптимизация изображений - уменьшает размер изображений, сохранив их качество. Изображения меньшие по размеру быстрее загружаются.
  • Создание увеличенных изображений 2x и 3x – это позволяет отображать четкие изображения на экранах повышенной плотности пикселей (ppi).
  • Добавление микроразметки Schema.org (ImageObject) для изображений – это улучшит представление сайта в результатах поиска яндекса и google.
  • Создание изображений с соблюдением соотношения сторон (16:9, 4:3, 1;1) - это улучшит представление сайта в результатах поиска яндекса и google. Подробнее...
  • Добавление атрибутов alt к изображениям - на основе имени изображения, заголовка страницы и ключевых слов страницы. Это улучшить SEO и валидность HTML-кода.
  • Добавление размеров изображений – это ускоряет рендеринг страницы и улучшает метрику CLS сервиса PageSpeed Insights.
  • Добавление метаданных(Creator, Description, Credit Line, CopyrightNotice, Source) для JPEG изображений по стандарту IPTC - Если кто-то возьмет изображения с вашего сайта для Google источником будет ваш сайт.
  • Создание LQIP (заполнители изображений низкого качества) — это позволяет сократить размер изображений во время загрузки около 10 раз и не получить скачка контента при рендеринге страницы. Для работы с LQIP понадобится плагин Lazy load.

Все функции работают независимо друг от друга. К примеру если вам нужно только конвертировать изображения в Webp формат, вы можете включить в настройках плагина опцию "Конвертация в Webp", а остальные опции оставить выключенными. В таком режиме плагин будет работать, как конвертор в Webp. Также и с другими функциями.

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

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

PageSpeed Insights:

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

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

Начало работы:

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

Работа плагина:

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

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

Совместимость с другими плагинами:

Плагин разрабатывался таким образом, чтобы свести к минимуму конфликты с другими плагинами которые взаимодействуют с изображениями.

  • Работа с лайтбоксами (Lightbox): проблем не выявлено.
  • Работа с нашими плагинами Супер кэш, Lazy load, Критический CSS: полная интеграция.
  • Работа с сторонними плагинами, которые обеспечивают отложенную загрузку изображений (lazyload): Необходимо включить в настройках плагина "Интеграция со сторонними Lazyload"

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

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

StartWebSite

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