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

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

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

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

Якщо ви коли-небудь стикалися з HTML, ви знаєте, що зображення визначаються атрибутом джерела — src . Джерело зображення — це місце, звідки браузери завантажують зображення для відображення на вашому 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 .

Час завантаження — це багатогранна проблема. Вам потрібно одночасно мінімізувати розміри файлів, зберігаючи якість і заощаджуючи простір для зберігання. З чарівним набором джерел Droppics і стисненням ImageRecycleце не тільки можливо, але й може бути легким, автоматизованим процесом.