Resource icon

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

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

7iRiSOI.png


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

3aTedWS.jpg


Этот плагин относится к серии наших плагинов «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 изображений по стандарту (Creator, Description, Credit Line, CopyrightNotice, Source). Если кто-то возьмет изображения с вашего сайта для Google источником будет ваш сайт.
  • Автозапись атрибута alt у тегов img (на основе имени изображения, заголовка страницы и ключевых слов страницы).
  • Создание LQIP (заполнители изображений низкого качества) — это позволяет сократить размер изображений во время загрузки около 10 раз и не получить скачка контента сайта. Для работы с LQIP понадобится плагин .
Особенности:
  • Не использует тег 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): проблем не выявлено.
  • Работа с плагинами и : полная интеграция.
  • Работа с сторонними плагинами, которые обеспечивают отложенную загрузку изображений (lazyload): работа плагина с такими плагина не гарантируется. Часто такие плагины интегрированы в тему дизайна.
Author
sergey
Downloads
2
Views
132
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from sergey

Back
Top