Как и все нормальные люди, я люблю GIFки. Они хороши в использовании там, где необходимо продемонстрировать функционал. И единственной сложностью в их использовании для меня была их «тяжесть». Например приведённый выше файл составляет чудовищные 11,4 мегабайт. После добавления подобных анимационных файлов, веб-страница становится недопустимо тяжёлой и при открытии начинает не хило тормозить, объясняется это тем, что каждый кадр в GIF хранится как GIF-изображение, в котором используется алгоритм сжатия без потерь. Это означает, что во время сжатия никакая информация не теряется в изображении, что, естественно, приводит к увеличению размера файла.
Для решения проблемы производительности GIF в web, есть пара вещей, которые мы можем сделать.
1. Использовать HTML5 Видео
Удивительно, но факт — алгоритм сжатия lossless, используемый в GIF, настолько не оптимален, что видео-форматы, такие как MP4 или WebM, будут обеспечивать меньший размер файла, чем GIF-изображения. Из-за этого одно из решений проблемы производительности GIF заключается в том, чтобы вообще не использовать GIF-файлы и заменить их автовоспроизводимым циклированным видео HTML5.
Применяя определенные атрибуты к элементу , мы можем моделировать поведение GIF, используя меньший размер файла. Нужные нам атрибуты:
- autoplay — автовоспроизведение без необходимости нажатия «play»
- loop — петля(после окончания начинает воспроизведение с начала)
- muted — хотя в GIF отсутствует звуковая дорожка, этот атрибут необходим для iOS Safari для автовоспроизведения видео
- playsinline — как и предшествующий атрибут, этот необходим для iOS Safari, чтобы видео не перемещалось в полноэкранный режим
- poster — указывает изображение, которое будет отображаться во время загрузки видео
Итак, воспользовавшись приведенными атрибутами пропишем код вставки GIF анимации из введения к этой статье:
Это сделает наше видео размером всего лишь 1 мегабайт :scream: :scream: !
Для конвертации 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%, качество можете увидеть ниже:
Источник на английском https://bitsofco.de/: Optimising GIFs for the Web
Вместо послесловия:
Используя эти два несложных метода и варьируя их в зависимости от необходимости и возможностей ресурса, вы сможете добиться сокращения веса веб-страниц, тем самым делая их более привлекательными и наглядными для пользователей, в то же время легко и красиво отображаемыми на мобильных платформах.
