Плагин [Shop-Script] Адаптивные изображения PRO | responsiveimages v2.0.3

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

Функции:​

• Создание адаптивных изображений (изображения в размер устройства пользователя) – это уменьшает размер изображений и увеличивает скорость загрузки сайта, особенно на мобильных устройствах.
• Конвертация в формат 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 дает штраф, что используются слишком большие изображения.

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

В настройках плагина нажать «Активировать плагин», выбрать режим работы, включить необходимые функции — плагин готов к использованию.

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

Плагин использует собственные html-фильтры, по которым происходит поиск изображений и обработка. Работает плагин только с загруженными изображениями, которые находятся на страницах сайта. Создает копии изображений и с ними работает, оригиналы изображений не затрагиваются. При отключении плагина, html-фильтры отключаются и все возвращается в точности, как было, повредить сайт используя этот плагин невозможно.

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

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

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

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

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