Как повысить производительность сайта при использовании GIF

В статье даны советы по оптимизации GIF-изображений.

Автор: Чапман Ливер (Chapman Lever), директор по маркетингу в Rigor, США. Отвечает за продвижение идеи важности веб-производительности. Юзабилити-евангелист. Работает с интернет-организациями по всему миру.

Формат GIF (англ. Graphics Interchange Format) был разработан в 1987 году. За 30 лет он практически не изменился. Благодаря своей простоте, а также поддержке во многих сервисах, он по-прежнему широко используется – несмотря на рост JPEG и PNG.

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

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

Зачем нужно оптимизировать GIF

Когда речь заходит о дизайне веб-страниц, важная роль отводится их производительности. Хотя GIF отлично справляются с привлечением внимания пользователей, они не предназначены для анимации (несмотря на их широкое использование в этом формате). Анимированные GIF увеличивают размер страницы и скорость её загрузки, что приводит к ухудшению UX.

Как улучшить производительность сайта при использовании GIF

В этом разделе мы рассмотрим несколько способов, которые позволяют повысить производительность сайта с GIF-изображениями.

Два метода сжатия изображений

Одним из основных методов оптимизации GIF-изображений является их сжатие. Чаще всего для выполнения этой задачи используется два способа:

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

Оптимизация статичных GIF путём конвертации в PNG

Самый простой способ улучшить производительность сайта – это использовать PNG вместо GIF. Хотя эти форматы очень похожи, размер PNG-файла после сжатия будет на 5-25% меньше, чем у аналогичного GIF-файла.

Для сжатия GIF без потери качества используется алгоритм LZW, созданный в 70-х годах прошлого века. Современные технологии сжатия являются более производительными, чем LZW. При оптимизации PNG как раз используются новые алгоритмы.

Для преобразования GIF в PNG можно использовать любой онлайн-конвертер с поддержкой этой функции.

Оптимизация анимированных GIF

Анимированные GIF могут представлять собой огромные файлы, требующие длительной загрузки. К примеру, анимация, которая длится лишь несколько секунд, может весить несколько мегабайт. Чтобы улучшить производительность сайта, используйте следующие техники:

  • Оптимизация с потерей качества
  • Конвертация анимированных GIF в HTML5-видео

Оптимизация с потерей качества

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

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

Так как анимированные GIF представляют собой серию отдельных GIF, техники сжатия с потерей качества можно использовать, чтобы сократить размер общего файла за счёт уменьшения каждого из входящих в него файлов. Справиться с этой задачей поможет сервис Gifsicle.

Конвертация анимированных GIF в HTML5-видео

Хотя размер GIF можно уменьшить с помощью сжатия, полученный файл может быть по-прежнему слишком большим. Формат GIF никогда не предназначался для хранения видео. То, что мы сейчас рассматриваем как анимацию, это результат попытки уменьшить издержки на хранение и передачу нескольких изображений с одними и теми же метаданными. На сегодняшний день есть ещё один вариант, который позволяет значительно уменьшить размер GIF-файла (до 95%) – конвертация его в HTML5.

HTML5-видео – это термин, которым обозначается способность браузера проигрывать видеоконтент, используя тег <video>. При этом отпадает необходимость в использовании внешних плагинов.

После появления HTML5 в 2009 году в отрасли велись активные дебаты по поводу того, как такие видео будут храниться и кодироваться. Сегодня же общепринятым стандартом является H.264-кодированное видео, которое хранится в MP4-контейнере. В свою очередь MP4-файлы имеют значительно меньший размер:

Есть множество способов конвертировать анимированные GIF в MP4. В их числе – инструменты ffmpeg и Cloud Convert. Используя последний, вы сможете видеть, насколько уменьшится размер файла после конвертации.

Рассмотрим конвертацию на примере. Ниже показано исходное анимированное GIF-изображение:

 

 

 

 

MP4-видео, созданное из GIF:

[video width="300" height="176" mp4="" loop="true" autoplay="true" preload="auto"][/video]

Размер оригинала составлял 100 KB. В результате конвертации был получен файл, размером 23 KB (на 75% меньше исходного):

Заключение

GIF – старейший формат изображений, который по-прежнему популярен, благодаря его простоте, широкой поддержке и возможности использования в качестве анимации. Несмотря на положительные стороны, гифки обычно представляют собой файлы большого размера. Их использование приводит к увеличению размера веб-страницы и замедлению скорости её загрузки. В итоге ухудшается опыт взаимодействия пользователей с сайтом. Чтобы улучшить производительность ресурса, статические GIF нужно оптимизировать, а вместо анимированных – использовать более современные форматы, такие как HTML5/MP4-видео.

preview 10 советов по использованию Chrome DevTools для SEO-аудита

10 советов по использованию Chrome DevTools для SEO-аудита

Как использовать инструменты разработчика в браузере Google Chrome для выявления и устранения проблем в области SEO
preview Вероятностное SEO или У каждого оптимизатора свой рабочий бубен

Вероятностное SEO или У каждого оптимизатора свой рабочий бубен

Этой статьей я хочу ответить на многочисленные вопросы о том, какие же ссылки продолжают работать, где их брать, в каком количестве и сколько они стоят
preview Скорость реакции – один из ключевых факторов в SEO

Скорость реакции – один из ключевых факторов в SEO

Любая идея, которая появилась у вас в голове, сегодня уже есть в голове у вашего конкурента. Весь вопрос состоит в том, кто более гибко и в короткие сроки реализует эту идею...
preview Непопулярные возможности SEO для бизнеса

Непопулярные возможности SEO для бизнеса

Ни для кого не секрет, что большинство коммерческих ресурсов продвигается по товарным запросам, по транзакционным, по запросам, связанным с услугами...
preview Что такое not provided и как в нем посчитать долю брендового трафика

Что такое not provided и как в нем посчитать долю брендового трафика

На сегодняшний день схема продвижения сайтов по трафику является наиболее востребованной у владельцев ecommerce и контентных проектов, хотя бы по причине прозрачности расчетов...
preview User Intent: как привлекать целевой трафик на сайт в 2017 году

User Intent: как привлекать целевой трафик на сайт в 2017 году

SEO в чистом виде давно не работает. Важно комбинировать его с другими элементами продвижения бренда, один из которых ― CRO (conversion rate optimization...