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

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

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

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

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

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

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

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

Обслуживание масштабированных изображений в Joomla! с Дроппиками

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

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

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

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

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

Но подождите, это еще не все. В загадке все еще есть недостающий кусочек.

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

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

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

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

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