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

Проблема не у файлі. Річ у тім, як влаштована медіатека: система створює мініатюру, середній та великий розміри, а для GIF бере лише перший кадр. На виході, статика замість руху. Виправляється за пару хвилин, без плагінів і правлення коду.

Нижче два робочі способи повернути анімацію на місце. Плюс інструменти для стиснення GIF перед завантаженням і перевірені джерела готових анімованих файлів.

💡 Швидкий огляд:

• Під час вставлення GIF оберіть «Повний розмір» у налаштуваннях вкладення, WordPress не створить мініатюри та збереже всі кадри.
• Вимкніть плагіни оптимізації зображень на час завантаження, вони примусово стискають файл і вбивають анімацію.
• Стискайте GIF до завантаження через EZGIF або GIF Compressor, розмір файлу зменшиться без втрати якості.

Чому WordPress «ламає» GIF-анімацію

WordPress заточений під обробку статичних зображень. Під час кожного завантаження в медіатеку система автоматично створює три копії: мініатюру (thumbnail, за замовчуванням 150×150 px), середній розмір (medium, до 768 px завширшки) та великий (large, до 2560 px). Ці значення задані в налаштуваннях медіафайлів і діють для всіх типів зображень. Для JPEG і PNG це зручно, ви отримуєте адаптивні версії під різні пристрої.

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

Плагіни оптимізації, ShortPixel, Imagify, Smush, погіршують картину. Вони стискають усе підряд і не розрізняють статику й анімацію. Алгоритми ті самі, що й для JPEG. Результат той самий: перший кадр замість руху.

Хороша новина: механізм обробки обходиться без functions.php і додаткових плагінів.

1. Завантажуйте GIF у повному розмірі

Найшвидший спосіб, вказати WordPress не створювати зменшені копії для конкретного файлу. Два кліки під час вставлення зображення в пост.

Відкрийте редактор поста чи сторінки. У блочному редакторі Gutenberg створіть блок «Зображення» та завантажте GIF через кнопку «Завантажити». У класичному редакторі натисніть «Додати медіафайл» і перетягніть файл у вікно завантаження.

Одразу після завантаження подивіться на праву панель налаштувань. У блоці «Налаштування вкладення» (Attachment Display Settings) знайдіть випадний список із розмірами. За замовчуванням там стоїть Medium або Large. Оберіть «Повний розмір» (Full Size).

Лише після цього натискайте «Вставити в пост». WordPress пропустить створення мініатюр і вставить оригінал з усіма кадрами анімації. У редакторі Gutenberg ви одразу побачите прев’ю, GIF програватиметься прямо в адмінці.

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

2. Вимкніть плагіни оптимізації на час завантаження

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

Рішення просте: перед завантаженням GIF тимчасово деактивуйте плагіни оптимізації. Перейдіть у Плагіни → Встановлені, знайдіть ShortPixel, Imagify, Smush, EWWW Image Optimizer і натисніть «Деактивувати» для кожного. Завантажте GIF повним розміром (спосіб 1). Потім активуйте плагіни назад.

Після деактивації очистіть кеш, і серверний, і браузерний. Плагіни кешування (WP Rocket, W3 Total Cache, LiteSpeed Cache) можуть зберігати стару версію сторінки з битою картинкою.

Важливий нюанс. Деякі плагіни оптимізації стискають зображення фоновим процесом, не в момент завантаження, а за хвилину-дві. Якщо GIF перестав анімуватися не одразу, а згодом, перевірте налаштування плагіна. Майже у всіх є опція «Виключити GIF з обробки» або «Пропускати анімовані зображення». Увімкніть її, і не доведеться вимикати плагін повністю щоразу.

Суміжна проблема, помилка HTTP під час завантаження зображення. Якщо після завантаження з’являється повідомлення про помилку, а не статика, рішення є в окремому матеріалі: як виправити помилку HTTP у WordPress.

Як стиснути GIF перед завантаженням у WordPress

Нестиснутий GIF може важити 5, 10, а то й 20 мегабайт. Завантажити такий файл на сайт, означає гарантовано сповільнити завантаження сторінки на мобільних пристроях. Core Web Vitals реагують на важкі зображення падінням показника LCP (Largest Contentful Paint).

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

EZGIF, комбайн для роботи з GIF. Крім стиснення, вміє обрізати, кадрувати, змінювати швидкість анімації та конвертувати GIF у WebP і MP4. Завантажуєте файл або вставляєте пряме посилання, обираєте метод стиснення (Lossy GIF дає максимальне зменшення) і завантажуєте результат. Працює прямо в браузері, без реєстрації.

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

Обидва сервіси безплатні. Для разового використання цього достатньо. Якщо працюєте з GIF регулярно, придивіться до десктопних аналогів: ImageOptim для macOS або FileOptimizer для Windows.

Де брати анімовані GIF для сайту

Шукати GIF по всьому інтернету не потрібно. Два перевірені джерела, де файли відсортовані за категоріями та готові до вставлення на сайт.

Giphy, найбільша база анімованих зображень. Мільйони GIF розбиті на категорії: від реакцій і мемів до інфографіки й абстрактної анімації. Файли завантажуються напряму або вбудовуються через embed-код. Ліцензія дозволяє використання на сайтах за умови, що ви не перепродаєте самі файли.

Reaction GIFs, каталог анімованих реакцій: оплески, подив, сміх, несхвалення. Зручний, коли потрібно додати емоційний акцент у текст без порушення стилю. Файли завантажуються одним кліком, без реєстрації.

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

Відео: як додати анімований GIF у WordPress

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

⁉️🤔 Часті питання

Чи можна змусити WordPress не створювати мініатюри для GIF автоматично?

Так, через хук wp_handle_upload_prefilter у functions.php дочірньої теми. Хук перехоплює файл до обробки та перевіряє MIME-тип: якщо image/gif, система пропускає створення мініатюр. Але під час оновлення батьківської теми код із functions.php злетить. Тому або працюйте через дочірню тему, або винесіть код у плагін Code Snippets, він переживе будь-які оновлення.

Чому GIF не анімується в мобільній версії сайту?

Найчастіше проблема в адаптивному лінивому завантаженні. Деякі плагіни кешування (WP Rocket, LiteSpeed Cache) замінюють GIF статичним прев’ю на мобільних пристроях, щоб економити трафік. Перевірте налаштування плагіна: знайдіть опцію «Lazy Load for iframes and videos» або «Replace GIF with placeholder» і вимкніть її. Якщо не допомогло, протестуйте GIF через інструменти розробника Chrome в режимі емуляції мобільного пристрою.

Який максимальний розмір GIF допустимий для WordPress?

Формального ліміту немає. WordPress приймає файли до 100-200 МБ, верхня межа залежить від серверних налаштувань PHP (upload_max_filesize, post_max_size). Але з погляду продуктивності тримайте GIF у межах 1-2 МБ. Усе, що важче, відчутно сповільнює завантаження. Для анімації довшої за 5 секунд краще використовувати MP4 через блок «Відео»: він важить у 5-10 разів менше за тієї самої якості.

Чи можна конвертувати GIF у MP4 для WordPress?

Так, і для довгих анімацій це навіть рекомендовано. Сервіс EZGIF конвертує GIF у MP4 за один клік. Потім завантажте MP4 у медіатеку та вставте через блок «Відео» в Gutenberg. Перевага: MP4 використовує міжкадрове стиснення, тому файл тієї самої візуальної якості важить у рази менше. На мобільних пристроях різниця особливо помітна.

Чи відновиться анімація під час повторного завантаження GIF після вимкнення плагінів?

Так, але з нюансом. Якщо завантажуєте файл із тією самою назвою, WordPress створює копію із суфіксом -1, -2 і так далі. Стара статична версія залишається в медіатеці. Рекомендуємо видалити старий файл через Медіафайли → Бібліотека, потім завантажити GIF заново з вимкненими плагінами та вибраним повним розміром. Анімація відновиться повністю.

Що робити, якщо GIF все одно не анімується

Два описані способи, вибір повного розміру та вимкнення плагінів оптимізації, закривають більшість випадків. Але якщо GIF і далі стоїть на місці, пройдіться за коротким чек-листом.

Перевірте сам файл. Завантажте GIF із сайту та відкрийте локально в браузері. Якщо анімації немає й там, проблема у вихідному файлі, а не в WordPress. Таке буває з криво конвертованими GIF з MP4: під час конвертації втрачається прапорець циклу або метадані анімації.

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

Перевірте серверний кеш зображень. Сервіси CDN (Cloudflare, BunnyCDN, StackPath) можуть кешувати стару статичну версію файлу. Після повторного завантаження GIF скиньте кеш CDN у панелі керування сервісу.

Змініть формат. Якщо жоден спосіб не повернув анімацію, конвертуйте GIF у MP4 через конвертер EZGIF і вставте як відео. Для користувача різниці немає, анімація відтворюється, а файл важить менше.