Оптимизируем GIF онлайн и не только

Разработка /
Разработка: Блог им. Tatyana: Безопасность: Оптимизируем GIF для Web
Как и все нормальные люди, я люблю GIFки. Они хороши в использовании там, где необходимо продемонстрировать функционал. И единственной сложностью в их использовании для меня была их «тяжесть». Например приведённый выше файл составляет чудовищные 11,4 мегабайт. После добавления подобных анимационных файлов, веб-страница становится недопустимо тяжёлой и при открытии начинает не хило тормозить, объясняется это тем, что каждый кадр в GIF хранится как GIF-изображение, в котором используется алгоритм сжатия без потерь. Это означает, что во время сжатия никакая информация не теряется в изображении, что, естественно, приводит к увеличению размера файла.

Для решения проблемы производительности GIF в web, есть пара вещей, которые мы можем сделать.

1. Использовать HTML5 Видео

Удивительно, но факт — алгоритм сжатия lossless, используемый в GIF, настолько не оптимален, что видео-форматы, такие как MP4 или WebM, будут обеспечивать меньший размер файла, чем GIF-изображения. Из-за этого одно из решений проблемы производительности GIF заключается в том, чтобы вообще не использовать GIF-файлы и заменить их автовоспроизводимым циклированным видео HTML5.
Применяя определенные атрибуты к элементу
<video>
, мы можем моделировать поведение GIF, используя меньший размер файла. Нужные нам атрибуты:
  • autoplay — автовоспроизведение без необходимости нажатия «play»
  • loop — петля(после окончания начинает воспроизведение с начала)
  • muted — хотя в GIF отсутствует звуковая дорожка, этот атрибут необходим для iOS Safari для автовоспроизведения видео
  • playsinline — как и предшествующий атрибут, этот необходим для iOS Safari, чтобы видео не перемещалось в полноэкранный режим
  • poster — указывает изображение, которое будет отображаться во время загрузки видео
Итак, воспользовавшись приведенными атрибутами пропишем код вставки GIF анимации из введения к этой статье:
<video autoplay loop muted playsinline poster="original.jpg">  
    <source type="video/webm" src="original.webm">
    <img src="original.gif" alt="Разработка: Оптимизируем GIF онлайн и не только" />
</video>
Это сделает наше видео размером всего лишь 1 мегабайт !
Для конвертации GIF в WebM, мы можем использовать CloudConvert или если вы пользуетесь Cloudinary, то можете просто исправить расширение файла с .gif на .webm.

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

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

Хотя сам алгоритм формирования GIF файла выполнен без потерь качества, есть способ сжатия с небольшими потерями, но без особого ущерба качеству.

Для этого есть несколько инструментов, одними из которых являются gifsicle и giflossy. Gifsicle — это CLI утилита (Command Line Interface -интерфейс командной строки) для управления файлами изображений GIF, а giflossy — это форк gifsicle, которая предлагает вариант сжатия с потерями качества (--lossy).

Итак для для сжатия нашего «огромного» GIF файла с небольшой потерей качества выполним команду:
gifsicle -03 --lossy=80 -o compressed.gif original.gif

Опция -03 указывает gifsicle выполнить несколько методов оптимизации и найти наиболее подходящий.
Опция --lossy=80 указывает степень сжатия, можете поиграться с этим параметром до получения необходимого вам соотношения размера/качества.
Опция -o compressed.gif — указывает имя исходящего файла. Заканчивается команда указанием пути на оригинальный файл.
Используя приведённую выше команду, мне удалось из 11,4 мегабайтного GIF файла сделать 6 мегабайтный, то-есть произведено сжатия порядка 47%, качество можете увидеть ниже:
Разработка: Оптимизируем GIF онлайн и не только

Источник на английском https://bitsofco.de/: Optimising GIFs for the Web

Вместо послесловия:
Используя эти два несложных метода и варьируя их в зависимости от необходимости и возможностей ресурса, вы сможете добиться сокращения веса веб-страниц, тем самым делая их более привлекательными и наглядными для пользователей, в то же время легко и красиво отображаемыми на мобильных платформах.
0 комментариев
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.