Joomla чуйне зображення за допомогою srcset та стиснення

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

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

Чуйні зображення з HTML-серкетом HTML

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

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

Як випливає з назви, набір джерел - це список джерел, а не одне джерело. Кожне джерело асоціюється з шириною браузера, щоб мобільні пристрої завантажували невеликі зображення та користувачі, які отримували доступ до вашої Joomla! блог із настільних комп'ютерів завантажте зображення в повній роздільній здатності. Іншими словами, 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 та стисненню ImageRecycle це не тільки можливо, але це може бути легким, автоматизованим процесом.