Использование анимации на сайтах и в блогах — обычная практика. 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!
Оставить комментарий