Як завантажувати GIF-файли у WordPress

Використання анімації на сайтах і в блогах – звичайна практика. GIF-файлі (або по-простому - гіфки) покращують контент, роблять його цікавішим, а сайт — привабливішим. GIF-анімація легко вбудовується в будь-яке оточення (пости в соцмережах, еmail-розсилки, блогові статті, контент для сайту та ін.)

Але багато хто певно стикалися з проблемою некоректного завантаження гіфок на сайти WordPress. Найчастіше класна анімація, виконана у GIF-форматі, зрештою відображається як звичайна картинка. У цій статті ми розповімо про причини такої ситуації та про те, як її можна виправити.

Підписуйтесь на нас у Facebook, Telegram, Twitter або Instagram, щоб нічого не пропустити!

Зміст статті:

1. Чому WordPress не хоче завантажувати GIF-зображення
2. Два методи коректного додавання гіфок у WordPress
3. Чому зображення для WordPress потрібно стискати
4. Інструменти для стиснення гіфок
5. Безкоштовні сервіси для створення гіфок
6. Висновок

Чому WordPress не хоче завантажувати GIF-зображення

Коли ми завантажуємо гіфки у медіатеку сайту, WordPress тричі їх обробляє. Більш того, система за замовчуванням обрізає GIF-зображення, тому воно і перетворюється на звичайну нерухому картинку. Тобто анімація в процесі обробки файлу просто знищується. Також деякі плагіні оптимізації картинок примусово змінюють їх розмір.

У WordPress за замовчуванням встановлено 3 розміри зображень:

• мініатюра (150x150 пікселів);
• середній розмір (600x600 пікселів);
• великий розмір (1024x1024 пікселів).

При зміні теми WordPress початковий розмір зображень медіатеки може змінитися через скидання встановлених налаштувань. До того ж у деяких темах обмежена гнучкість, і це не дозволяє користувачеві змінювати розмір зображень на свій розсуд.

При обробці GIF-зображення WordPress захоплює лише перший кадр. Саме тому в момент завантаження гіфки в тіло статті на сайті або на пост блогу ми бачимо не анімацію, а статичну картинку. Отже, як можна додати гіфку до WordPress, щоб не втратити рухому картинку? Є два робочі методи. 

Два методи коректного додавання гіфок у WordPress

Метод №1: Завантаження у повний розмір

1. Відкриваємо сторінку, на якій потрібно розмістити гіфку.
2. Якщо це класичний редактор блоків (TinyMCE), вибираємо у меню "Додати медіа".
3. За допомогою редактора Gutenberg створюємо новий блок "Зображення". 

4. Завантажуємо підготовлену гіфку та натискаємо "Вибрати".

5. Далі у розділі "Налаштування відображення вкладень" (він знаходиться справа) вибираємо "Повний розмір". 

6. WordPress одразу вставляє гіфку в тіло статті або в пост — і ми можемо побачити прев'ю.

Метод №2: Відключення плагінів оптимізації зображень

Деякі плагіні примусово виконують стиснення будь-яких зображень, які завантажуються на сайт. Тобто під час розміщення GIF-файлу його розмір змінюється автоматично. 

1. Щоб корректно завантажити гіфку на сайт, потрібно відключити плагіні для оптимізації зображень.
2. Після деактивації також необхідно очистити кеш.  
3. Після цього можна завантажувати потрібний GIF-файл. Повинно спрацювати.

У більшості випадків ці методи допомагають. Однак перед завантаженням GIF-зображень  на сайт у деяких випадках виконують стиснення цих файлів.

Чому зображення для WordPress потрібно стискати 

Розмір зображень — і статичних, і анімованих — безпосередньо впливає на продуктивність сайту та на обсяг трафіку. Інтернет-користувачі не готові довго чекати на завантаження "важкої" картинки. Пусть навіть дуже гарної та інформативної.

За статистикою, більшість здатна витрачати на очікування повного завантаження сайту не більше 2-3 секунд. І чим швидше це відбудеться, тим вища ймовірність, що користувач залишиться на сторінці та виконає потрібну вам цільову дію. І потім повернеться ще не один раз. 

Тобто стиснення – це необхідність, зумовлена ​​вимогами SEO. Використання зображень оптимального розміру та з оптимальним обсягом файлу прискорює годину завантаження сторінки сайту. Тому якщо GIF-зображення "важити" більше, ніж потрібно, його необхідно перетворити, тобто стиснути. 

Інструменти для стиснення гіфок

Є безліч спеціальних програм і сервісів, за допомогою яких можна швидко змінювати розмір зображень будь-якого формату, зокрема і анімованих. Переважна більшість цих інструментів є безкоштовними. 

Один з варіантів – редактор EZGIF. Процедура проста: 

1. Переміщуємо гіфку на сайт сервісу: вибираємо файл на своєму пристрої або вставляємо у відповідне поле URL цієї картинки.
2. Натискаємо "Завантажити".
3. Після завершення процесу обробки (стиснення) зберігаємо GIF туди, куди нам потрібно.

Також для стиснення гіфок можна використовувати онлайн-редактори GIF Compressor, ILOVE IMG та будь-які інші подібні інтернет-сервіси.

Безкоштовні сервіси для створення гіфок 

Щоб спростити собі завдання, анімацію для WordPress можна створювати самостійно. І відразу робити гіфки потрібного розміру. Найвідоміший і найдоступніший інструмент для виконання таких дій – Canva. Користувачі сервісу можуть зібрати гіфку з . 

Спочатку ми обираємо шаблон з потрібними нам розмірами або створюємо свій. А далі додаємо текст, картинки, декоративні елементи та зберігаємо файл. Про те, де можна знайти готові GIF-зображення, ми розповімо в одній з наступних наших статей. 

Висновок 

Гіфки за кілька секунд повідомляють користувачеві важливу інформацію, привертають увагу, втягують аудиторію. Тому варто використовувати цей вид контенту, зокрема на сайтах, створених за допомогою WordPress.

Але цей сервіс обрізає гіфки за замовчуванням, перетворюючи їх у звичайні статичні картинки. Завантаження в WordPress анімованих зображень без втрати їх динаміки вимагає певних зусиль, підвищеної уваги. Але головне бажання.

Бажаємо успіху в роботі з цікавою та корисною gif-анімацією потрібного розміру та об'єму для WordPress!