Адаптивное отображение изображений в Joomla с использованием атрибутов srcset и сжатия

Оптимизация? Есть. Lazy loading ? Ещё раз есть. И всё же ваш сайт на Joomla! выглядит неуклюже, загружается слишком долго на мобильных устройствах и при медленном соединении. Не отчаивайтесь — здесь на помощь приходит структура HTML; точнее, наборы источников изображений, или srcset .

Возможно, в вашем блоге на Joomla! используются высококачественные изображения, и вы просто не можете — или не хотите — от них отказаться. Это не повод для беспокойства. С помощью плагина Droppics для Joomla! вы можете не просто оптимизировать изображения, но и показывать разные файлы в зависимости от устройств пользователей.

Адаптивные изображения с HTML-тегом srcset

Если вы когда-либо работали с HTML, вы знаете, что изображения определяются атрибутом `source` — `src` . `source` — это место, откуда браузеры загружают изображения для отображения пользователям Joomla! Проблема использования единого источника для конкретного изображения заключается в том, что всегда будет загружаться один и тот же файл, независимо от его размера.

Например, если у вас есть баннер вверху статьи, одно и то же изображение будет загружаться на всех устройствах. Браузеры загружают изображение, а затем масштабируют его, иногда значительно, особенно на мобильных устройствах. В современных браузерах можно определить не просто источник изображений, а набор источников — набор источников srcset .

Как следует из названия, набор источников представляет собой список источников, а не один источник. Каждому источнику соответствует ширина окна браузера, так что мобильные устройства загружают изображения небольшого размера, а пользователи, заходящие на ваш блог Joomla! с компьютеров, загружают изображения в полном разрешении. Другими словами, image srcset преобразует изображения в адаптивные.

Использование наборов исходных файлов приводит не только к ускорению загрузки страниц, но и к улучшению SEO-показателей. Всё это достигается за счёт наличия копий одного и того же изображения с разным разрешением, которые всегда доступны пользователям, когда это необходимо. Подробнее об srcset и обо всём остальном, связанном с наборами исходных файлов, здесь , но если вы с нетерпением ждёте начала их использования в своём блоге на Joomla!, продолжайте читать.

Отображение масштабированных изображений в Joomla! с помощью Droppics

Возможно, вы знаете Droppics просто как расширение для управления галереей Joomla!, но за его работой скрывается много нюансов, о которых вы можете не знать. Например: Droppics теперь использует набор источников для загрузки нужных изображений для ваших пользователей. Если вы не знаете об этой функции, возможно, вы её и не используете.

Чтобы использовать атрибут srcset в вашем блоге Joomla!, сначала необходимо активировать его через конфигурацию Droppics. Перейдите на «Основные параметры » в настройках Droppics и выберите адаптивные изображения из первых доступных вариантов. Сохраните изменения, чтобы зафиксировать новые настройки.

Как адаптивных изображений , включение этой настройки позволяет Droppics создавать две новые миниатюры для каждого изображения Joomla! Эти миниатюры представляют собой сами адаптивные изображения, которые отображаются в зависимости от устройства, используемого для доступа к вашему блогу Joomla!.

Когда вы создаёте пост и вставляете изображение из Droppics, расширение автоматически устанавливает атрибут srcset . Не верите? Проверьте HTML-код на фронтенде, и вы найдёте множество источников для разных размеров экрана устройств.

Общая оптимизация, как и lazy loading, — это, конечно, хорошо, но иногда их возможности ограничены. В некоторых случаях использование современной HTML-техники, заключающейся в предоставлении наборов источников изображений вместо отдельных источников, может стать ключом к преодолению проблемы медленной загрузки.

Но подождите, это еще не все. В этой головоломке все еще не хватает одного элемента.

Сжатие изображений srcset в Joomla!

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

ImageRecycle также доступен в Joomla!, и вы можете легко интегрировать его с Droppics. Более того, вы можете настроить его на автоматическое сжатие изображений из исходного набора Joomla! сразу после их генерации. Вы можете сэкономить до 80% при сжатии с потерями (оптимальное сжатие) и до 20% при сжатии без потерь (оригинальное сжатие). Подробнее о различиях можно прочитать здесь .

Вы можете настроить ImageRecycle на автоматическое сжатие изображений, перейдя в настройки расширения в Joomla! Там, на «Дополнительно» , включите опцию «Оптимизировать медиафайлы при сохранении ». В качестве альтернативы, вы можете вручную выбрать изображения для оптимизации через интерфейс ImageRecycle ImageRecycle

Время загрузки — многогранная проблема. Необходимо одновременно минимизировать размер файлов, сохраняя при этом качество и экономя место на диске. Благодаря волшебному набору исходных файлов Droppics и сжатию ImageRecycle, это не только возможно, но и легко автоматизируется.