Skip to content

Всё для WordPress, веб-разработки — и не только

🎞 Почему GIF в WordPress не анимируется: 2 способа исправления

🎞 Почему GIF в WordPress не анимируется: 2 способа исправления

Загрузили 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 в полном размере

Выбор полного размера GIF в настройках вложения WordPress

Самый быстрый способ, указать WordPress не создавать уменьшенные копии для конкретного файла. Два клика при вставке изображения в пост.

Откройте редактор поста или страницы. В блочном редакторе Gutenberg создайте блок «Изображение» и загрузите GIF через кнопку «Загрузить». В классическом редакторе нажмите «Добавить медиафайл» и перетащите файл в окно загрузки.

Сразу после загрузки посмотрите на правую панель настроек. В блоке «Настройки вложения» (Attachment Display Settings) найдите выпадающий список с размерами. По умолчанию там стоит Medium или Large. Выберите «Полный размер» (Full Size).

Только после этого нажимайте «Вставить в пост». WordPress пропустит создание миниатюр и вставит оригинал со всеми кадрами анимации. В редакторе Gutenberg вы сразу увидите превью, GIF будет проигрываться прямо в админке.

Почему это работает. При выборе полного размера WordPress использует исходный файл без обработки. Система не запускает обрезку, поэтому последовательности кадров ничего не угрожает. GIF остается нетронутым.

2. Отключите плагины оптимизации на время загрузки

Список активных плагинов сжатия изображений в админке WordPress

Плагины сжатия, вторая по частоте причина «сломанных» 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 и вставьте как видео. Для пользователя разницы нет, анимация воспроизводится, а файл весит меньше.