Как вставить гифку на сайт html

Как добавить анимацию на сайт и не облажаться

Представьте, что вы делаете сайт. Придумали крутую визуальную идею, проработали пользовательские сценарии, создали самый понятный интерфейс на свете и написали интересный текст. Но иногда всего этого недостаточно, чтобы удержать внимание пользователей. Можно использовать анимацию. Всплывающие элементы, плавные переходы и подвижные иллюстрации оживляют сайт, создают интерактив, улучшают пользовательский опыт.

Методы и ограничения

Добавлять анимацию на сайт сложно. Чтобы она заработала так, как вы задумали, придётся учесть множество нюансов — ограничения старых браузеров, особенности устройств, вспышки на солнце.

Запустите рекламу и получите 100% кешбэк

Расскажите о своем бизнесе с помощью МегаФон Таргет. Находите своих клиентов по десяткам характеристик, отправляйте SMS, MMS, сообщения в Viber и получите кешбэк на следующее продвижение. Попробовать →

Реклама. ПАО «МегаФон». ИНН 7812014560.

⁠Видео. Много весит, и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
Набор последовательно переключающихся картинок, они же секвенции. Грубо говоря, это видео без сжатия кадров, которое так же много весит и замедляет работу браузера.
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

Как добавить анимацию на сайт - недостатки видеоформатов

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

Чтобы воплощать на сайтах все наши задумки, требовался новый инструмент, который снимет ограничения. О нём мы расскажем подробнее.

Библиотека Lottie

В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.

С Lottie мы смогли добавлять на сайты сложные анимации и не думать об их размерах.

На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.

Преимущества

Как добавить анимацию на сайт - разбираемся в библиотеке Lottie

Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.

В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остаётся только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов», инструментов для плавного движения анимации. Пришлось всё делать вручную, и это заняло довольно много времени.

Вывод

С Lottie можно не беспокоиться о сложности анимации. Главное заранее убедиться, что она будет одинаково хорошо работать на всех устройствах, и правильно выбрать формат. Если анимаций много, лучше остановиться на canvas.

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

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Он понравился целевой аудитории — после редизайна посещаемость выросла за четыре месяца на 35%.

За дизайн сайта мы получили награды: почётный диплом Awwwards, четыре отметки от CSS и серебро в номинации на конкурсе Рейтинг Рунета 2019.

Мы могли сделать простой сайт, который бы выполнял свои функции. Но с анимацией он понравился и запомнился пользователям больше.

Пробуйте и не сдавайтесь, решайте сложные задачи — и у вас получится необычный и яркий сайт.

Микровзаимодействия в веб-дизайне: ликбез и реальные примеры
Как создавался первый российский документальный анимационный сериал для бренда
Продуктовый дизайн, который убивает продукт: о запрещённых приёмах
Дизайн-решения, которые утратили смысл
Дизайнер vs Проектировщик. Нужно ли дизайнеру прототипирование?
DIЧ.LIVE — дайджест о веб-дизайне, который идёт в прямом эфире

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

Можно ли сделать анимированный фон?

Мультипликация это достаточно сильный прием, способный оживить любой документ, поэтому не удивительно, что огромную популярность приобрела технология Flash, которая добавляет на веб-страницы мультики, к тому же интерактивные. Графический формат GIF также поддерживает простейшую анимацию путем последовательной смены кадров. Так что используя изображение в этом формате допустимо анимировать не только отдельные картинки, но также фон веб-страницы или определенного элемента.

Вначале потребуется создать анимированную картинку в формате GIF, для чего можно воспользоваться программой Adobe Photoshop или другой подходящей для этой цели. Также существуют библиотеки готовых анимированных файлов, которые можно применять в качестве фоновой картинки. Далее изображение добавляется в качестве фона с помощью стилевого свойства background , как показано в примере 1.

Пример 1. Анимированный фон веб-страницы

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Анимированный фон   Содержимое веб-страницы

В данном примере файл light.gif устанавливается в качестве фоновой картинки в правом нижнем углу веб-страницы. Также задается черный цвет фона.

Учтите, что любая анимация привлекает к себе внимание, поэтому использовать ее следует весьма осмотрительно, чтобы не утомлять читателей и не отвлекать их от основного содержания сайта.

Как добавить анимацию на сайт и не облажаться

Анимации в вебе — это сложно. Ограничения старых браузеров накладываются на слабые пользовательские устройства, плохой интернет и вспышки на солнце. При разработке нужно учитывать миллиард нюансов, для того чтобы всё заработало именно на устройстве пользователя.

Методы и ограничения

Показать анимацию на экране пользователя можно несколькими методами.

Видео. Много весит и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
Набор последовательно переключающихся картинок, они же — секвенции. Грубо говоря, это видео без сжатия кадров, которое также много весит и замедляет работу браузера.
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.

Библиотека Lottie

С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.

Читать:

Как вставить цвет в html

Преимущества

Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.

Недостатки

Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.

Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.

Что получилось

Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.

За дизайн сайта RBK.money мы получили награды:

Tagline Awards 2019Серебро Лучшая B2B-кампания
Рейтинг Рунета 2019Серебро Финансы, инвестиции, банки
CSS Design Awards 2019 Special Kudos / UI Design / UX Design / Innovation
Awwwards 2019 Honorable Mention

Как правильно добавить GIF файл на WordPress сайт

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

Что такое GIF файл

GIF файлы это файлы изображений имеющих блочную структуру. То есть, гифка это масса одиночных фотографий (блоков) не связанных друг с другом. Если программа, показывающая гифку, распознает этот формат, вы увидите следующие друг за другом картинки, образующие анимацию. Если программа не «видит» gif формат, вы увидите первую картинку этого набора.

Особенности GIF файлов

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

Однако серьёзные гифки много весят и постоянная загрузка 1-2 мегабайтных файлов, не принесёт пользы для скорости сайта. Тем более, GIF-файл нельзя сжать.

Решение этой проблемы простое. Используем сторонний сервис для хранения GIF-файлов, а на свой сайт WordPress внедряем гифку по стороннему URL.

Остается малое, выбрать сервис для хранения GIF файлов. Я рекомендую сервис giphy.com. На сервисе очень лёгкая регистрация и очень неплохие условия бесплатного хранения.

Сервис giphy.com

Покажу, как начать работать с сервисом.

Идём на страницу регистрации https://giphy.com/join ;
Регистрация простая, по email с указанием имени и вашего пароля;

Регистрация

Подтверждение регистрации по письму не требуется;
После регистрации входим в личный кабинет по указанному при регистрации имени и паролю;
Далее совсем просто. На кнопке Upload добавляете свою гифку, выбрав источник добавления. Даете файлу теги, возможно привязку к URL.

giphy upload

Всё, после добавления файла можете забрать URL гифки, короткий URL гифки, ссылку для внедрения гифки, как Video HTML5.

забрать URL гифки

Как добавить GIF файл на WordPress

Прямая вставка GIF файла

Если ваша гифка весит не много, можно вставить её напрямую, как простую картинку. Для этого:

В редакторе сообщений или страниц или в виджете «Текст» установите курсор на место вставки файла и нажмите кнопку «Добавить медиафайл»;
Загрузите или перетащите ваш gif-файл в библиотеку;
Задайте его параметры;
Добавьте в статью (страницу, виджет) соответствующей кнопкой.

Вставить GIF файл в сообщение по URL

Если GIF файл объемный у вас могут быть проблемы с его загрузкой на сайте. Также он сильно тормознёт загрузку страницы. Чтобы этого избежать, вставим GIF файл в сообщение по URL. Для этого:

Берём URL гифки из своего кабинета на сайте giphy.com или любом другом хранилище;

Добавляем в статью (страницу, виджет) через способ «Вставить с сайта». Для оптимизации даем гифке альтернативное имя (тег alt).

добавить GIF файл на WordPress

Добавляем в статью

Всё. Гифка на сайте и будет на нём, пока у вас есть свой аккаунт в хранилище giphy.com.

Использовать плагин

Можно совсем упростить задачу добавления GIF файлов. Просто установите плагин. Например, такие:

Giphypress

Это плагин сервиса giphy.com . Он ищет и добавляет гифки хранящиеся на сервере одним кликом. В том числе из вашего кабинета.

Aparg HandyGIF

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

Вывод

GIF файлы безусловно улучшают привлекательность сайта. Однако при прямой вставки файлов в каталог сайта они будут замедлять сайт. Поэтому нужно правильно добавить GIF файл на WordPress сайт через сторонние хранилища по URL. Я показал один из очень неплохих вариантов.

Еще статьи

Редакции WordPress, ревизии и автосохранение
Как правильно добавить GIF файл на WordPress сайт
Как сделать картинку уникальной для WordPress сайта
Форматы записей WordPress
Красиво оформить и оптимизировать страницы рубрик WordPress сайта
Что такое уникальная картинка: как проверить фото на уникальность
Вставить видео с YouTube в WordPress

Один комментарий к “Как правильно добавить GIF файл на WordPress сайт”

Серьгей :

“Как добавить GIF файл на WordPress”. Это не работает . Половина GIF как просто статичная картинка. Прежде чем советовать другим , нужно самому попробовать поставить GIF на сайт. А не переписывать с других сайтов.

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие посты

Чем отличаются контекстная и таргетированная реклама
Реклама в Facebook: facebook pixel
Промокоды: Маркетинговый инструмент продвижения товаров и услуг
Как проверить страховой полис на автомобиль
Правда про виртуальный номер другой страны
Что такое корпоративный сайт
Как выбрать сервер для игры

Новости WP

Wordfence: Уязвимость плагина WPGateway активно эксплуатируется
Новая функция WordPress 5.5: автоматическое обновление плагинов и тем
Атака на Elementor Pro

Как добавить анимацию на сайт и не облажаться

Методы и ограничения

Запустите рекламу и получите 100% кешбэк

Библиотека Lottie

Преимущества

Недостатки

Вывод

Что получилось

Можно ли сделать анимированный фон?

Как добавить анимацию на сайт и не облажаться

Как правильно добавить GIF файл на WordPress сайт

Что такое GIF файл

Особенности GIF файлов

Сервис giphy.com

Как добавить GIF файл на WordPress

Прямая вставка GIF файла

Вставить GIF файл в сообщение по URL

Использовать плагин

Giphypress

Aparg HandyGIF

Вывод

Еще статьи

Похожие посты:

Один комментарий к “Как правильно добавить GIF файл на WordPress сайт”

Добавить комментарий

Свежие посты

Новости WP

Реклама

Популярное

Похожие записи