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

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

Можливо, ваш блог Joomla! використовує високоякісні зображення, і ви просто не можете — або не хочете — від них позбутися. Це не привід для занепокоєння. За допомогою плагіна Droppics від Joomla! ви можете застосовувати не просто загальну оптимізацію для зображень, а й обслуговувати різні файли залежно від пристроїв користувачів.

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

Якщо ви коли-небудь працювали з HTML, ви знаєте, що зображення визначаються атрибутом source — src . Джерело зображення — це місце, звідки браузери завантажують зображення для відображення користувачам Joomla!. Проблема використання одного й того ж джерела для певного зображення полягає в тому, що завжди буде завантажуватися один і той самий файл, незалежно від його розміру.

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

Як випливає з назви, набір джерел – це список джерел, а не окреме джерело. Кожне джерело пов’язане з шириною браузера, щоб мобільні пристрої завантажували невеликі зображення, а користувачі, які відвідують ваш блог Joomla! з настільних комп’ютерів, завантажували зображення з повною роздільною здатністю. Іншими словами, набір джерел зображень перетворює зображення на адаптивні зображення.

Результатом використання наборів вихідних кодів є не лише швидше завантаження, але й покращені показники 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це не тільки можливо, але й може бути простим та автоматизованим процесом.