10 полезных советов по использованию GIF-анимации на сайте
Пользователей сложно удивить красивым интерфейсом или нестандартными иллюстрациями. При этом, в интернете много проектов с плохим UI, родом из 2000-х годов.
Сегодня мы поговорим о том, как правильно использовать анимацию на сайте, и какие проблемы она решает.
Зачем нужна анимация?
Динамические элементы появились очень давно. Сначала использовались «пазлы» из маленьких GIF изображений, которые быстро переключались, создавая целостный образ. Позже стала популярной технология Flash. Сейчас анимацию оживляют с помощью CSSи JS.
Для плавной картинки кадры должны обрабатываться за короткое время — до 16 миллисекунд. Мощные графические редакторы решают эту проблему, но они дают советы по качеству работы. В этом вопросе решение остаётся за дизайнером.
В современном интернет-пространстве анимация используется часто. Некоторые проекты базируются исключительно на динамических объектах.
Это позволяет им выделиться и оставить более глубокий след в памяти целевой аудитории.
Задачи, которые решает анимация:
- Оживляет интерфейс. Без неё сайты скучные, однотипные и безликие.
- Улучшает юзабилити. Пользователи «цепляются» за движущиеся объекты и остаются дольше на сайте. Это влияет на поведенческие факторы и user experience.
- Фокусирует на важных деталях. Выделяет корзину, форму заказа или превью статьи в блоге.
- Увеличивает кликабельность. Желание нажать по анимационными кнопкам больше, чем по статическим. Они дразнят необычными эффектами.
- Задаёт путь клиента. Иногда дизайнер закладывает полноценный механизм, который проводит юзера от главной страницы до портфолио или заполнения формы. Что-то вроде «хлебных крошек».
- Облегчает навигацию. При совершении пошаговых действий анимация показывает, куда надо кликнуть для завершения процесса.
- Вызывает эмоции. Помогает рассказать историю, показывает уникальность проекта и вдохновляет на решение задач.
- Выводит рекламу на новый уровень. Статические баннеры проигрывают динамическим по всем показателям. GIF даёт больше информации и демонстрирует призыв к действию.
- Объясняет сложные вещи. Некоторые онлайн-журналы с помощью гифок рассказывают о сложных вещах: устройство Falcon 9, химические реакции, природа физических явлений или процесс создания iPhone.
- Сглаживает перемещения. Часто анимацию используют для создания целостной картины при прокрутке на следующий экран или переходе на другую страницу.
Правильно выбирайте длительность и скорость
Анимированными объектами сложно удивить. Особенно, когда они сделаны плохо и раздражают. Чтобы избежать этого, учитывайте два важных фактора: скорость и длительность.
Оптимальная скорость — от 200 до 500 миллисекунд.
Если снизить цифру до 100 мс, движение станет слишком быстрым и будет сложно понять задумку дизайнера. По длительности единых рекомендаций нет. Для коротких сюжетов лучше не превышать 1-2 секунд. Если речь идёт о баннерах или полноценных историях, всё зависит от посыла.
На смартфонах оптимальная длительность — 0,3 секунды, на планшетах — 0,5 секунды. Изменение цифр диктуется размерами экрана. У планшетов дисплей в несколько раз крупнее, поэтому при смене кадров элементы проходят долгий путь.
Учитывайте, что ролики с большой длительностью «тяжелые», и могут снижать быстродействие. Особенно, если они используются в паре с объёмными эффектами. Из этого плавно вытекает следующий совет.
Учитывайте производительность
Несмотря на большую скорость работы мобильной сети, пользователи не любят, когда содержимое веб-страниц прогружается дольше 3-4 секунд. Если не уделить внимание оптимизации GIF — это повлияет на быстродействие:
- Не используйте гифки для полноценных сюжетов. Оптимальный хронометраж 3-5 секунд.
- Избавьтесь от тяжелых 3D-эффектов. Если проект в графическом редакторе состоит из десятка взрывов, дрожаний и резкой смены кадров — на выходе получится объёмный файл. И аудитории такой подход не понравится.
- Конвертируйте GIF в HTML5-видео. Воспользуйтесь онлайн-сервисами, чтобы преобразовать изображение в ролик без потери качества. Это позволит уменьшить размер до 95% от исходного значения.
Оптимальный хронометраж 3-5 секунд.Запомните, гифки не предусмотрены для хранения больших видеорядов. Чаще всего они длятся 3-4 секунды, зацикливаются и активируются по наведению или клику.
Проверяйте адаптивность
При разработке GIF-анимации дизайнер должен учитывать гаджеты с разными параметрами экрана: от широкоформатных мониторов до телефонов с маленькой диагональю. Если в гифке зашифрован широкий объект, нет смысла сжимать её под небольшие дисплеи. Идеальным вариантом будет разработка отдельного прототипа с учётом особенностей конкретных устройств.
Для тестирования адаптивности подходит специализированный софт: After Effects, Invision и онлайн-сервисы. Ещё есть расширения для браузеров вроде LambdaTest Screenshots, о котором мы рассказывали в подборке дополнений для Google Chrome. Разместите изображение на странице, сделайте скриншоты и посмотрите, как оно выглядит на разных девайсах.
Учитывайте разные платформы
Кроссбраузерность и кроссплатформенность — свойства веб-сайтов подстраиваться под особенности браузеров и операционных систем. Даже обычная гифка может по-разному отображаться в среде Windows, macOS и Android. А если анимация реализована через программный код, отличий ещё больше.
Браузеры Chrome и Safari работают на базе движка Webkit, но за годы развития платформы ушли гораздо дальше изначальных возможностей. Дизайнеру надо тестировать отображение интерфейса на разных операционных системах и устройствах. В этом случае эмуляторы не подходят, они только меняют разрешение экрана и не отображают реальную ситуацию.
Многие дизайнеры при разработке анимации переключаются между девайсами, чтобы обнаружить проблемы и найти решение для идеального отображения. Этот подход работает во всех случаях: от адаптивности до улучшения производительности.
Соблюдайте баланс
При создании дизайна любого интерфейса важно соблюдать гармонию в цветах, структуре и типографике. Анимация — не исключение. Она сработает только если проект сделан со вкусом и чувством баланса.
GIF привлекают внимание, но если перейти черту, вместо приятных впечатлений, пользователь будет раздражен от бесконечных эффектов и трансформаций. Анимация — средство достижения цели. Она мягко подталкивает к выполнению действия и не является центральным объектом. Внедрение динамических объектов должно быть оправдано задачами сайта.
Лучше начать с маленьких анимированных элементов, которые фокусируют внимание на важных частях интерфейса. Пример ниже иллюстрирует спорный вариант реализации.
Интернет-магазин необычный и запоминающийся, но желание купить он не вызывает. Разработчики забыли о гармонии и полностью отдались креативу.
Посмотрите со стороны
Даже самая прорывная идея может закончиться провалом, если зациклиться только на красоте. Анимация должна быть практичной и цепляющей. Специалист, который занимается «оживлением» интерфейса, часто не видит явных проблем. Перед релизом надо показать результат заказчику и целевой аудитории. Разносторонний анализ помогает достичь перфекционизма и попадания в интересы ЦА.
Разработка и сборка GIF в режиме реального времени «замыливает глаз». Соберите работу в файл и покажите его людям. Выслушайте обратную связь и доведите результат до совершенства. Взгляд со стороны помогает обнаружить серьёзные недочёты вроде неверных таймингов. Хорошо выручает и просмотр в замедленном режиме.
Ориентируйтесь на целевую аудиторию
Анимация добавляется в интерфейсы веб-сайтов и приложений с одной целью — привлечь внимание пользователей и направить его в определенном направлении.
Если при создании проекта не проанализировать целевую аудиторию и сделать ставку на креатив, результат сложно спрогнозировать.
Дизайнер должен понимать, на кого он хочет повлиять через динамические объекты. Кто кликает по кнопке корзины, смотрит баннер или видит гифку в постах блога. Анимация сильнее всего действует на молодую аудиторию. Если сайт ориентирован на пожилых людей — сделайте интерактивный механизм, который наглядно покажет, как заполнить форму или оформить заказ. Перформанс для них на последнем месте.
В портфолио мы использовали GIF превью, чтобы потенциальные клиенты понимали, что за каждой работой стоит не просто кропотливый труд дизайнера и верстальщика, а целая история. Мы знакомимся со спецификой ритейлеров, стартапов и людей своего дела, чтобы разработать уникальный сайт, который идеально вписывается в концепцию бренда.
Проводите эксперименты
Веб-дизайнеры редко выпускают в релиз продукт без предварительного тестирования.
Используйте следующие инструменты:
- A/B тестирование;
- чек-лист по UX и UI;
- портрет целевой аудитории;
- фокус-группы.
Если по результатам «анкетирования» пользователи говорят, что эксперимент провалился, переделайте концепт или откажитесь от динамики совсем. В некоторых случаях идеально подходит аскетичность и брутальность. А иногда нестандартные идеи помогают взглянуть на продукт иначе и открыть новые черты.
Используйте правильные эффекты
Правильные эффекты обеспечивают 50% успеха. Специалисты забывают о мелочах в погоне за одобрением заказчика. Поклонники After Effects используют размытие для создания уютной атмосферы внутри сюжета. В интерфейсной анимации, а особенно на смартфонах, лучше от него отказаться.
Сглаживание придаёт объекту естественность. Важно, чтобы он выглядел натурально.
Все детали сюжета должны вписываться в картину реального мира, а не выглядеть искусственными. В некоторых аспектах можно пожертвовать идеальной картинкой ради природности. И не забывайте о плавных переходах.
В примере ниже автор изобразил процесс создания кухни. Помещение начинает формироваться с фундамента и постепенно разрастается до масштабов функционального пространства. Гармония скорости, плавности, длительности — идеальный пример.
Выберите центральный объект
Распространённая ошибка при создании GIF-анимации — размытие фокуса. В центре сюжета должен быть главный объект, вокруг которого сосредоточено движение. Этот подход структурирует контент и грамотно расставляет точки соприкосновения.
Если сделать элементы одинаковыми по значимости, пользователю будет сложно сконцентрироваться и пройти по намеченному пути. Простой пример — на посадочной странице размещены 3 кнопки, которые активируют определённые действия. Лучше сконцентрироваться на главной, которая отправляет юзера на форму заявки или в корзину.
Она должна отличаться по оформлению и спецэффектам.
Советы, описанные в статье, помогут создать качественные и понятные работы. Правильная структура проводит клиента к целевому действию за «руку». При этом не забывайте главное правило: анимация — искусство. Есть рекомендации, но нет чётких рамок.
Если не хотите экспериментировать и нужно быстро реализовать задумку — обратитесь за помощью в IDBI. Мы с легкостью оживим любые статические картинки и выделим ваш бренд среди конкурентов.
7 сайтов для создания GIF анимации онлайн — создание GIF
Наверняка все знают о небольших анимированных картинках, иначе говоря о GIF-ках. Пользователи сайта vk.com особенно знакомы с ними, потому что там есть возможность добавлять их в комментариях. Конечно, есть такой вариант, как брать уже готовые изображения. Но не всегда найдешь то что хочешь, и, поэтому я хочу рассказать о сервисах, которые позволяют создать собственные анимированные изображения.
При этом от вас не требуется каких-либо супернавыков владения компьютером. В полной новости приводится ряд сервисов, поэтому какой-нибудь из них подойдет и вам!
GIF анимации онлайн
Рекомендую посмотреть также:
- Примеры квиз сайтов для вовлечения посетителей
1. Loogix
Чтобы воспользоваться данным сервисом вам необходимо как минимум 3 изображения. Если вам нужна GIF-ка, которая содержит более 3 изображений, тогда вы можете добавить до 10 изображений с помощью ссылки с текстом «Add one more picture». Сервис может создать анимировенное изображение в 5-ти различных скоростях. Также есть возможность добавления эффектов для вашей анимации (например «Размытие»).
- Также этот сервис включает еще две возможности для создания анимаций:
- Создание GIF из роликов Youtube
- Создание обратных анимаций
2. Picasion
Picasion очень похож внешне на сервис Loogix, но немного отличается. Кроме всего, этот сервис предлагает импортировать изображения с сайта Flickr используя специальный тег изображения (для поиска).
- Помимо основного сервиса есть еще три:
- Создание блестящих GIF
- Создание аватарок
- Изменение размера изображения
Нужен продающей лендинг?
Посмотрите наши кейсы для разных ниш
Подробнее
3. Gickr
Как и два предыдущих сервиса Gickr для создания анимации использует от 3 до 10 изображений. Также этот сервис позволяет не только создавать анимации различных размеров, но и с различными скоростями (до 10 секунд). Присутствует возможность импортировать изображения с сайтом Flickr и Picasa.
4. MakeaGIF
Makeagif представляет собой еще более упрощенный сервис для создания анимаций, чем рассмотренные предыдущие. Почти по центру находится большая кнопка с текстом «add pictures», с помощью которой можно загрузить необходимые изображения. Для того чтобы загрузить сразу несколько изображений необходимо удержить клавишу CTRL и выделять нужные.
- Плюс к этому сервису есть еще:
- Создание GIF из роликов Youtube
- GIF-ки с помощью веб-камеры
- Преобразование видео в анимацию GIF
5.
GIFMaker.meЕще один сервис для создания GIF анимаций который поддерживает форматы изображений JPG, PNG и GIF. Всё что нужно для создания анимации сразу видно. Вам лишь нужно загрузить необходимые изображения, а затем, передвигая ползунки, смотреть в окно предпросмотра справа вверху.
6. ImgFlip
Сразу скажу, что при создании анимаций на этом сервисе у вас на GIF-ках будет водяной знак. Чтобы убрать этот знак, нужно иметь аккаунт Pro. А в остальном этот сервис сильно похож на рассмотренные нами выше.
Продающий лендинг под ключ
Посмотрите наши кейсы для разных ниш
Подробнее
7. GIFPal
Кроме основных возможностей по созданию анимаций, этот сервис позволяет добавлять различные эффекты для GIF-ок: яркость, контрастность и насыщенность.
Вывод
В этой статье рассмотрены 7 сервисов с помощью которых можно создать собственные GIF-анимации. У вас есть из чего выбрать 🙂 .
P. S.: после этого месячного перерыва в армии писать статьи как-то необычно.
Слова не так легко подобрать как раньше, но я думаю это скоро пройдет.
Успехов!
С Уважением, Юрий Немец
Как сделать свой собственный GIF и добавить его на свой сайт — Go WordPress
Если вы провели какое-то время в социальных сетях, вы, вероятно, сталкивались с многочисленными GIF-файлами. Эта уникальная форма контента чрезвычайно популярна как среди потребителей, так и среди брендов, и вы можете извлечь выгоду из этой тенденции, создав собственные GIF-файлы для использования на своем веб-сайте.
Вот что вам нужно знать об этих «движущихся изображениях» и о том, как сделать собственный GIF.
Что такое GIF?
GIF означает формат обмена графикой, и технически это формат файла, такой как JPG или PNG. По сути, это изображение, закодированное несколькими кадрами, поэтому оно выглядит как короткий «видеоклип», который воспроизводится на повторе.
GIF можно создавать из любых изображений. Некоторые GIF-файлы представляют собой анимационные мультфильмы, а другие созданы из реальных видеороликов или даже телешоу или фильмов.
Эта гибкость делает GIF-файлы полезным инструментом для самых разных целей, независимо от того, шутите ли вы в социальных сетях или иллюстрируете сообщение в своем блоге.
Стоит ли использовать GIF?
По данным IPG Media Labs, людям нравится использовать GIF по нескольким основным причинам:
- GIF позволяют людям выражать эмоции быстрее и эффективнее, чем с помощью одних только слов.
- GIF-файлы — это простой способ сделать ссылки на поп-культуру.
- GIF-файлы являются ключевой частью более широкой культуры мемов, которая захватила социальные сети.
Многие бренды начали использовать GIF-файлы по тем же причинам, и вам может быть интересно, стоит ли вам их использовать. Чтобы понять это, вам нужно рассмотреть свой бренд и целевую аудиторию.
GIF-файлы наиболее популярны среди молодых поколений, таких как поколение Z и миллениалы, поэтому, если ваш бренд обслуживает эту аудиторию, в вашей стратегии определенно найдется место для GIF-файлов.
Кроме того, если ваш бренд модный и современный, имеет смысл включить GIF-файлы в свой маркетинг.
Это не значит, что бренды, ориентированные на взрослую аудиторию, не могут использовать GIF. Помните: GIF-файлы могут отображать любой тип изображения. Так, например, вы можете найти гифку из телепередачи, которую узнают ваши зрители.
Как сделать GIF
Несмотря на то, что на таких сайтах, как GIPHY и Tenor, есть огромные коллекции GIF, вы также можете довольно легко создавать свои собственные GIF. Есть несколько методов, которые вы можете использовать для создания GIF.
Например, если вы хотите превратить фрагмент видеофайла или видео с YouTube в GIF, GIPHY предлагает бесплатный инструмент для создания GIF, где вы можете захватить клип и добавить текст, наклейки, фильтры или нарисованные от руки пометки. Это может быть полезно, если, например, у вас есть обучающее видео и вы хотите включить короткие визуальные эффекты в запись блога на ту же тему. Этот инструмент также позволяет комбинировать неподвижные изображения для создания GIF в стиле слайд-шоу.
Другой вариант — создавать GIF-файлы с помощью такого приложения, как GIPHY Cam. Эта программа работает аналогично Snapchat, позволяя вам снимать короткие видеоролики с помощью телефона, добавлять фильтры и стикеры, а затем экспортировать их в формат GIF.
Как добавить GIF на свой сайт WordPress.com
Создав свой собственный GIF, вы можете встроить файл в страницу или опубликовать на своем сайте WordPress.com так же, как обычное изображение.
Для начала перейдите на страницу, на которую вы хотите поместить файл. Выберите (+) Вставьте значок «Содержимое » в меню редактирования, затем загрузите GIF-файл в свою медиатеку, либо загрузив его со своего компьютера, либо извлекая его из URL-адреса. Затем все, что осталось сделать, это нажать Вставить , и GIF появится на странице. Это так просто!
Если GIF-файлы для вас в новинку, может показаться сложным добавить их на свой веб-сайт или особенно создать собственный.
Однако добавить их к вашему контенту несложно, и ваш сайт будет выглядеть еще более современным.
Нравится:
Нравится Загрузка…
ОБ АВТОРЕ
Камрин Рабидо
Камрин Рабидо — независимый писатель, специализирующийся на цифровом контенте, посвященном образу жизни, от поп-культуры до технологий умного дома. Камрин участвовала в таких популярных медиа-сайтах, как InStyle, Taste of Home, Martha Stewart, Food52, USA Today, The Spruce и других.
Еще Камрин Рабидо
Позвольте нашим специалистам создать ваш собственный веб-сайт WordPress.com.
Если вам нужна целевая страница или полноценный сайт электронной коммерции, академия онлайн-обучения или интерактивный информационный сайт для вашего бизнеса, мы можем создать его для вас.
Начало работыЛучшие практики SEO при использовании GIF-файлов
От списков BuzzFeed до хлопков в Твиттере, GIF-файлы (сокращение от Graphics Interchange Format) являются частью языка Интернета.
Если вы будете искать изображения в Google или через Giphy, один из крупнейших агрегаторов GIF, вы сможете увидеть огромное разнообразие GIF-файлов, выставленных на всеобщее обозрение.
Анимированный GIF (произносится как «джиф», так и «гиф», и спор о произношении — верный способ начать спор в сети) — это тип медиафайла, который можно вставлять в личные сообщения, а также в общедоступный онлайн-контент.
Быстрый поиск в Google определяет GIF как «формат без потерь для файлов изображений, который поддерживает как анимированные, так и статические изображения», популярность которого возросла в 1980-х годах.
GIF-файлы могут выражать эмоции или сценарии в более динамичном и развлекательном формате.
Стив Уилхайт из CompuServe создал GIF для экономии памяти при отображении изображений.
Команда Уилхайта придумала способ предоставления этих изображений с использованием алгоритма сжатия и ограничения количества цветов.
Алгоритм работал, идентифицируя повторяющиеся шаблоны, и он сделал GIF отличным средством для создания высокопроизводительных фотореалистичных изображений.
Поскольку в файл включено несколько версий изображения, вы можете связать эти изображения вместе, чтобы создать зацикленное видео.
После этого у GIF была легендарная история; Unisys Corp, компания, которой принадлежал алгоритм GIF, начала взимать лицензионные платежи за GIF-файлы в 1995 году, и срок действия патента истек только в 2003 году.
Изображения Google появились в 2001 году, но не получили явную функцию поиска GIF-файлов до 2013 года.
В 2019 году Google добавил в результаты поиска общие GIF-файлы.
Как Google сканирует GIF-файлы?
Похоже, что на данный момент Google читает GIF-файлы так же, как и все остальные изображения, только уделяя больше внимания возможности поиска и обмена ими через Google Images.
Методы оптимизации изображений Google — это способ убедиться, что ваши GIF-файлы сканируются, анализируются и индексируются.
Полезны ли GIF для SEO?
GIF-файлы могут быть полезны для SEO так же, как все хорошо обработанные изображения могут быть полезны для SEO — они могут стимулировать клики и вовлекать людей на страницу.
GIF-файлами можно делиться, а хорошо брендированный, общедоступный GIF-файл может долгое время выживать в экосистеме мемов.
Людям нравятся GIF-файлы, и их использование может разбить длинные статьи и сделать контент более понятным.
Вредны ли GIF для SEO?GIF-файлы не так уж плохи для SEO — если вы правильно их представляете и не позволяете им замедлять работу вашего сайта.
GIF-файлы могут быть плохими для SEO, если вы полагаетесь на них вместо текста или делаете их слишком тяжелыми.
Они также могут быть плохими для доступности — вы должны убедиться, что GIF-файлы соответствуют правилам доступности.
Как исправить ваши GIF-файлы Настройте имена ваших GIF-файлов, используйте уникальные GIF-файлы и, что особенно важно, напишите хороший альтернативный текст — для людей и для SEO.
Вы можете добавить GIF-файлы в карту сайта, чтобы Google точно знал, где они находятся.
Google утверждает, что изображения можно добавлять на карты сайта с помощью тегов изображений.
Используйте описательные имена файлов и замещающий текст и убедитесь, что GIF-файлы работают с окружающим текстом.
Если вы хотите, чтобы ваш GIF хорошо индексировался в Google Images, вам следует оптимизировать размещение GIF — рядом с релевантным текстом и в верхней части страницы.
Ваши GIF-файлы должны быть быстрыми, отзывчивыми и иметь хорошую структуру URL.
Давайте получим метаданные
Google хочет знать, что стоит за этим мультимедийным файлом с правильными тегами alt, описательными именами файлов, соответствующими контекстами изображений, подписями к изображениям и соответствующими ссылками.
Кроме того, рекомендуется следовать рекомендациям Google по работе с изображениями, но это противоречит тому, что пользователи полюбили в GIF-содержимом.
Например, в рекомендациях Google по публикации изображений, включая файлы GIF, не рекомендуется включать текст на изображении, поскольку он не будет проиндексирован. Если он добавляет контекст, этот контекст, вероятно, будет потерян.
Это можно обойти, добавив описательные подписи. Например, описание гифки:[описание гифки, слова в гифке] .
Пользователи полагаются на ограниченные альтернативные описания, а Google полагается на них, имена файлов и окружающие элементы контекста страницы, чтобы узнать, о чем GIF.
Вы можете опередить пакет GIF, сделав эти элементы хорошими .
Ваш альтернативный текст должен сочетаться с вашим контентом с учетом доступности, и Google сможет подобрать и использовать ваши GIF-файлы.
Производительность GIF и Core Web VitalsGIF-файлы могут снизить производительность веб-страниц, на которых они находятся.
Поскольку Google все больше внимания уделяет Core Web Vitals как фактору ранжирования, важно поддерживать скорость страниц.
Существует множество способов повысить производительность.
Как оптимизировать ваши GIF-файлы
Есть несколько методов, которые вы можете использовать для ускорения ваших GIF-файлов.
- Сжатие с потерями.
- Оптимизация без потерь.
Вы можете использовать сайты сжатия изображений или Photoshop, чтобы аккуратно уменьшить размер ваших GIF-файлов и ускорить работу вашей веб-страницы.
Сжатие с потерями — это искусство сделать ваши GIF-файлы хуже так, что люди не заметят, чтобы сделать их быстрее. Качество GIF будет хуже, но ваша веб-страница будет намного быстрее.
Оптимизация без потерь не удаляет пиксели, цвета или информацию. Однако это не так быстро, как файлы, оптимизированные с потерями.
Существуют десятки онлайн-инструментов, которые помогут вам сжать ваши изображения.
Вы также можете преобразовать свой GIF в файл APNG, чтобы сохранить больше цветов для лучшего размера файла.
Использование лучших настроек при сохранении GIF-файлов в Photoshop также позволяет сэкономить скорость сайта.
Вы также можете конвертировать GIF в видео HTML5.
На сайте web.dev есть полное руководство по преобразованию GIF-файлов в видео HTML5.
Вы можете конвертировать GIF-файлы в видео MP4, а затем размещать их в веб-видео; убедитесь, что они зацикливаются, воспроизводятся автоматически и бесшумны (как GIF-файлы).
Использование видео также обеспечивает лучшую доступность — рекомендации WCAG «Пауза, остановка, скрытие» требуют, чтобы пользователи имели определенный уровень контроля над движущимися изображениями.
Это легче сделать с видео, чем с GIF.
Звучит просто, но любители GIF будьте осторожны
Давайте вернемся на минутку к тому, как робот Googlebot сканирует веб-сайт.
Помните, что если на веб-сайте слишком много форм динамического содержимого, сайт может работать намного медленнее, чем сайт без этих форм содержимого.
Другими словами, если сайт состоит из тысяч GIF-файлов, у него может быть медленная загрузка, независимо от того, как они представлены с метаданными или иным образом.
Медленная загрузка страниц может повредить рейтингу сайта в поисковых системах.
Владельцы и операторы веб-сайтов должны найти баланс между конкурирующими интересами пользователей и поисковых систем, чтобы сократить время загрузки страниц и предложить более интересное и динамичное представление содержимого страниц.
Хотя на время загрузки страницы может влиять ряд внутренних факторов, наиболее распространенным решением загадки GIF-контента для разработчиков является уменьшение размера изображений.
Существует несколько способов уменьшить размеры изображений на веб-сайте в зависимости от того, как построен сайт.
Сжатие GZIP
Метод сжатия или сжатия изображений до 70% без ущерба для качества изображения.
Этот метод должен быть реализован вашим веб-хостом на своих серверах. Вы можете использовать этот тест, чтобы узнать, был ли ваш сайт «сжат» вашим веб-хостингом.
Оптимизация изображения
Настольные программы, такие как Photoshop, и веб-программы, такие как Smush.
it, могут помочь уменьшить размер изображения с помощью функции «Сохранить для Интернета».
Качество изображения будет снижаться вместе с изображением, и в результате разработчикам придется найти золотую середину между размером и качеством изображения.
Разработчики, использующие HTML для уменьшения размеров изображений (например, блоги WordPress), на самом деле не создают больше места на сервере.
Напротив, веб-браузер все равно должен будет загрузить исходный размер изображения, прежде чем он перезагрузится и изменит размер изображения до высоты и ширины, которые вы ему назначили.
В любом случае, вы уже оказываете услугу своему сайту и поисковым системам, выбирая формат GIF вместо других форматов изображений большего размера.
Доступные проблемы с GIFДоступность — это актуальная проблема, и она пересекается с SEO: хорошие методы SEO, как правило, способствуют доступности, и наоборот.
Соответствие WCAG важно для обеспечения удобного доступа пользователей к вашему сайту.
В рекомендациях WCAG указано:
«Движение, мигание, прокрутка
Для любой движущейся, мигающей или прокручиваемой информации, которая (1) запускается автоматически, (2) длится более пяти секунд и (3) отображается параллельно с другим контентом, существует механизм, с помощью которого пользователь может приостановить, остановить или скрыть ее, за исключением случаев, когда движение, мигание или прокрутка являются частью деятельности, где это необходимо; и
Автоматическое обновление
Для любой информации об автообновлении, которая (1) запускается автоматически и (2) отображается параллельно с другим контентом, существует механизм, позволяющий пользователю приостанавливать…»
Для GIF-файлов предлагается настроить анимированные GIF-изображения так, чтобы они переставали мигать через определенное количество раз в течение 5 секунд.
Вы можете использовать элементы HTML, такие как
Компания Google начала продвигать форматы изображений нового поколения.
Одним из основных является WebP, который может значительно уменьшить размер изображений при сохранении их качества.
WebP работает как без потерь, так и с потерями.
Приближение к содержанию GIF
При эффективном использовании содержимое GIF может увеличить вовлеченность в конкретную публикацию или фрагмент контента.
GIF-файлы полезны для пользователей и в результате могут увеличить посещаемость вашего сайта.
Все эти факторы работают вместе, чтобы отправить Google косвенное одобрение.
Однако, если вы сошли с ума по GIF, вы должны убедиться, что Google по-прежнему может индексировать ваш контент так же эффективно, как без GIF-контента.
Этого можно добиться, предоставив Google как можно больше информации о содержании.
Вы также должны убедиться, что наличие GIF-файлов на вашем сайте не замедляет время загрузки страницы.