Використання анімації на сайтах і в блогах — звичайна практика. GIF-файли (або по-простому — гіфки) покращують контент, роблять його цікавішим, а сайт — привабливішим. GIF-анімація легко вбудовується в будь-яке оточення (пости в соцмережах, еmail-розсилки, блогові статті, контент для сайту і т. ін.)
Але багато хто напевно стикалися з проблемою некоректного завантаження гіфок на сайти WordPress. Найчастіше класна анімація, виконана в GIF-форматі, зрештою відображається як звичайна картинка. У цій статті ми розповімо про причини такої ситуації та про те, як її можна виправити.
Photo by Pete Linforth on Pixabay
Підписуйтесь на нас у Facebook, Telegram, Twitter або Instagram, щоб нічого не пропустити!
Зміст статті:
- Чому WordPress не хоче завантажувати GIF-зображення
- Два методи коректного додавання гифок у WordPress
- Чому зображення для WordPress потрібно стискати
- Інструменти для стиснення гіфок
- Безкоштовні сервіси для створення гіфок
- Висновок
Чому WordPress не хоче завантажувати GIF-зображення
Коли ми завантажуємо гіфки в медіатеку сайту, WordPress тричі їх обробляє. Більш того, система за замовчуванням обрізає GIF-зображення, тому воно й перетворюється на звичайну нерухому картинку. Тобто анімація в процесі обробки файлу просто знищується. Також деякі плагіни оптимізації картинок примусово змінюють їх розмір.
У WordPress за замовчуванням встановлено 3 розміри зображень:
- мініатюра (150×150 пікселів);
- середній розмір (600×600 пікселів);
- великий розмір (1024×1024 пікселів).
При зміні теми WordPress початковий розмір зображень медіатеки може змінитися через скидання встановлених налаштувань. До того ж у деяких темах обмежена гнучкість, і це не дозволяє користувачеві змінювати розмір зображень на свій розсуд.
При обробці GIF-зображення WordPress захоплює тільки перший кадр. Саме тому в момент завантаження гіфки в тіло статті на сайті або в пост блогу ми бачимо не анімацію, а статичну картинку. Отже, як можна додати гіфку в WordPress, щоб не втратити рухому картинку? Є два робочих методи.
Два методи коректного додавання гіфок у WordPress
Метод №1: Завантаження у повний розмір
- Відкриваємо сторінку, на якій потрібно розмістити гіфку.
- Якщо це класичний редактор блоків (TinyMCE), вибираємо в меню “Додати медіа”.
- При використанні редактора Gutenberg створюємо новий блок “Зображення”.
- Завантажуємо підготовлену гіфку та натискаємо “Вибрати”.
5. Далі в розділі “Налаштування відображення вкладень” (він знаходиться праворуч) вибираємо “Повний розмір”.
6. WordPress відразу вставляє гіфку в тіло статті або в пост — і ми можемо побачити прев’ю.
Метод №2: Відключення плагінів оптимізації зображень
Деякі плагіни примусово виконують стиснення будь-яких зображень, які завантажуються на сайт. Тобто під час розміщення GIF-файлу його розмір змінюється автоматично.
- Щоб коректно завантажити гіфку на сайт, потрібно відключити плагіни для оптимізації зображень.
- Після деактивації також необхідно очистити кеш.
- Після цього можна завантажувати необхідний GIF-файл. Повинно спрацювати.
У більшості випадків ці методи допомагають. Однак перед завантаженням GIF-зображень на сайт у деяких випадках виконують стиснення цих файлів.
Чому зображення для WordPress потрібно стискати
Розмір зображень — і статичних, й анімованих — безпосередньо впливає на продуктивність сайту та на об’єм трафіку. Інтернет-користувачі не готові довго чекати завантаження “важкої” картинки. Нехай навіть дуже красивої та інформативної.
За статистикою, більшість згодна витрачати на очікування повного завантаження сайту не більше 2-3 секунд. І чим швидше це відбудеться, тим вище ймовірність, що користувач залишиться на сторінці та виконає необхідну вам цільову дію. І згодом повернеться ще не один раз.
Тобто стиснення — це необхідність, зумовлена вимогами SEO. Використання зображень оптимального розміру та з оптимальним обсягом файлу прискорює час завантаження сторінки сайту. Тому якщо GIF-зображення “важить” більше, ніж потрібно, його необхідно перетворити, тобто стиснути.
Інструменти для стиснення гіфок
Є безліч спеціальних програм і сервісів, за допомогою яких можна швидко змінювати розмір зображень будь-якого формату, зокрема й анімованих. Переважна більшість цих інструментів — безкоштовні.
Один з варіантів — редактор EZGIF. Процедура проста:
- Переміщуємо гіфку на сайт сервісу: вибираємо файл на своєму пристрої або вставляємо у відповідне поле URL цієї картинки.
- Натискаємо “Завантажити”.
- По завершенню процесу обробки (стиснення) зберігаємо GIF туди, куди нам потрібно.
Також для стиснення гіфок можна використовувати онлайн-редактори GIF Compressor, ILOVE IMG і будь-які інші подібні інтернет-сервіси.
Безкоштовні сервіси для створення гіфок
Щоб спростити собі завдання, анімацію для WordPress можна створювати самостійно. І відразу робити гіфки потрібного розміру. Найвідоміший і найдоступніший інструмент для виконання таких дій — Canva. Користувачі сервісу можуть зібрати гіфку з фотографій і картинок з елементами анімації.
Спочатку ми обираємо шаблон з потрібними нам розмірами або створюємо свій. А далі додаємо текст, картинки, декоративні елементи та зберігаємо файл. Про те, де можна знайти готові GIF-зображення, ми розповімо в одній з наших наступних статей.
Висновок
Гіфки за кілька секунд повідомляють користувачеві важливу інформацію, привертають увагу, втягують аудиторію. Тому варто використовувати цей вид контенту, зокрема й на сайтах, створених за допомогою WordPress.
Але цей сервіс обрізає гіфки за замовчуванням, перетворюючи їх у звичайні статичні картинки. Завантаження в WordPress анімованих зображень без втрати їх динаміки вимагає певних зусиль, підвищеної уваги. Але головне — бажання.
Бажаємо успіху в роботі з цікавою та корисною gif-анімацією потрібного розміру та об’єму для WordPress!
Залишити коментар