Поиск по сайту:

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

Введение

Наряду с GIF, это один из самых распространенных форматов изображений, который циркулирует с 1990-х годов. В отличие от JPG и PNG, GIF-файлы могут содержать несколько кадров анимации, а скромный «анимированный GIF» является вездесущим строительным блоком Интернета.

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

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

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

Предпосылки

В этом руководстве приведены инструкции по установке для сервера Ubuntu 22.04. Вы можете настроить это, следуя нашему руководству по начальной настройке сервера с Ubuntu 22.04.

Вам также потребуется установить менеджер пакетов Homebrew, чтобы установить один из инструментов, описанных в этом руководстве.

Шаг 1 — Установка ffmpeg, Gifski и Gifsicle

В этом уроке вам понадобятся три инструмента, чтобы следовать примерам. Первый: Gifsicle для оптимизации и дальнейшего управления вашими GIF-файлами. Эти инструменты доступны на большинстве платформ.

И ffmpeg, и gifsicle доступны в стандартных репозиториях Ubuntu и могут быть установлены с помощью менеджера пакетов apt. Начните с обновления исходников пакетов с помощью apt update:

  1. sudo apt update

Затем установите пакеты ffmpeg и gifsicle с помощью apt install:

  1. sudo apt install ffmpeg gifsicle

Последний инструмент, gifski, доступен через Homebrew. Установите его с помощью brew install (это займет несколько минут, так как Homebrew установит другие зависимости):

  1. brew install gifski

Теперь у вас есть все необходимые инструменты, установленные на вашем компьютере. Далее вы начнете с получения образца видео для создания GIF.

Шаг 2 — Загрузка и просмотр образца видео

Вы можете сделать GIF из любого существующего видеоклипа. Если у вас еще нет того, который вы хотите использовать, вы можете использовать наше видео «Введение в платформу приложений от DigitalOcean» в качестве отправной точки.

Вы можете загрузить копию этого видео из любого места на наших серверах, используя curl:

  1. curl -O https://deved-images.nyc3.digitaloceanspaces.com/gif-cli/app-platform.webm

curl — это инструмент командной строки для выполнения всех видов веб-запросов. Использование флага -O с URL-адресом указывает curl загрузить удаленный файл и сохранить его локально с тем же именем.

Теперь, когда у вас есть локальная копия видео, вы можете проверить некоторые его метаданные. Это будет актуально при попытке создать качественный GIF. Когда вы ранее устанавливали ffmpeg, он также поставлялся с командой под названием ffprobe, которую можно использовать для проверки разрешения, частоты кадров и другой информации в медиафайлах. Проверьте эти сведения, запустив ffprobe на загруженном видео app-platform.webm:

  1. ffprobe app-platform.webm



Output
…
Input #0, matroska,webm, from 'app-platform.webm':
  Metadata:
    ENCODER         : Lavf59.27.100
  Duration: 00:01:59.04, start: -0.007000, bitrate: 1362 kb/s
  Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 1920x1080, SAR 1:1 DAR 16:9, 25 fps, 25 tbr, 1k tbn (default)
    Metadata:
      DURATION        : 00:01:59.000000000
  Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Metadata:
      DURATION        : 00:01:59.041000000

В выходных данных перечислены все потоки, содержащиеся в файле (обычно один видео- и хотя бы один аудиопоток), а также частота дискретизации, кодеки и другие свойства потоков. Из выделенной информации в выводе вы узнаете, что это видео закодировано с разрешением 1080p и воспроизводится со скоростью 25 кадров в секунду. Это также длится почти две минуты, о чем вы, возможно, узнали, просмотрев его на YouTube, и, вероятно, слишком долго для одного GIF!

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

Шаг 3 — Вырезать клип из видео

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

Воспроизводить видео в терминальной оболочке не очень удобно, поэтому можно смотреть вместе с видео на YouTube, чтобы найти идеальное место для вырезания. В этом уроке вы будете резать с 00:00:09 до 00:00:12, что создаст довольно плавную анимацию:

Вы можете сделать это, передав видео app-platform.webm в ffmpeg:

  1. ffmpeg -ss 00:00:09 -to 00:00:12 -i app-platform.webm -c copy clip.webm

Эта команда разбита на:

  • -ss 00:00:09 -to 00:00:12 так ffmpeg понимает временные коды. В этом случае переход от начального положения к конечному положению в клипе. Вы также можете обрезать на основе продолжительности или долей секунды.
  • -i app-platform.webm — это путь к входному файлу, которому предшествует -i.
  • -c copy — это место, где вы обычно указываете выходной аудио- или видеокодек для ffmpeg. Использование copy вместо кодека вообще пропускает перекодирование видео, что может быть намного быстрее и избежать потери качества, если вам не нужно ориентироваться на другой выходной формат. Поскольку позже вы все равно преобразуете этот клип в GIF, сохранение исходного формата ввода вполне приемлемо и экономит время.
  • clip.webm – это путь к выходному файлу.

При этом создается новое трехсекундное видео с именем clip.webm. Вы можете убедиться, что он существует, и проверить его размер, используя ls -lh:

  1. ls -lh clip.webm



Output
-rw-r--r-- 1 sammy sammy 600K Nov 16 14:27 clip.webm

Получается, что три секунды видео имеют размер всего 600К. Это будет хорошей точкой сравнения при создании GIF на следующем шаге.

Примечание. Если вы работаете на локальном компьютере, вы можете использовать инструмент с графическим интерфейсом с открытым исходным кодом под названием Lossless Cut для выполнения той же операции. Lossless Cut особенно полезен, поскольку он запускает те же команды ffmpeg для быстрого извлечения клипов из видео на основе временных кодов без необходимости повторного кодирования видео. В отличие от самостоятельного запуска ffmpeg в командной строке, Lossless Cut включает встроенный видеоплеер и интерфейс навигации.

Шаг 4 — Преобразование видео в GIF

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

У вас есть несколько вариантов создания GIF в командной строке. Вы можете сделать это с помощью самого ffmpeg, но синтаксис может быть очень сложным для изменения или понимания:

  1. ffmpeg -filter_complex "[0:v] fps=12,scale=w=540:h=-1,split [a][b];[a] palettegen [p];[b][p] paletteuse" -i clip.webm ffmpeg-sample.gif

Обратите внимание, что в этом примере вы сократили разрешение и частоту кадров клипа примерно вдвое, до 12 кадров в секунду и разрешения 540p. Обычно это хорошая отправная точка для GIF. Поскольку GIF-файлы обрабатываются как изображения, они загружаются полностью при загрузке веб-страницы, и, в отличие от видео, они не имеют концепции постепенной потоковой передачи с более низким разрешением. Использование CDN может помочь оптимизировать доставку любых статических ресурсов сайта, подобных этим, но вы все равно должны стараться избегать показа огромных изображений без особой причины. Поэтому вам всегда следует избегать увеличения размера GIF-файлов, чем это необходимо; до 3M обычно является хорошей практикой для изображений. Вы можете проверить размер файла вашего нового GIF, используя ls -lh:

  1. ls -lh ffmpeg-sample.gif



Output
-rw-r--r-- 1 sammy sammy 2.0M Nov 16 14:28 ffmpeg-sample.gif

Таким образом вы создали 2M GIF. Хотя это хорошо, вы можете получить еще лучший результат, используя менее сложный синтаксис с gifski. Попробуйте эту команду gifski:

  1. gifski --fps 12 --width 540 -o gifski-sample.gif clip.webm

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

  1. ls -lh gifski-sample.gif



Output
-rw-r--r-- 1 sammy sammy 1.3M Nov 16 14:33 gifski-sample.gif

Это только 1,3M, значительное улучшение на том же уровне качества. На этом этапе у вас может возникнуть соблазн попробовать сделать версию GIF с полной частотой кадров и полным разрешением. Вот точка сравнения:

  1. gifski --fps 25 --width 1080 -o gifski-high.gif clip.webm

Проверьте размер этого последнего тестового файла:

  1. ls -lh gifski-high.gif



Output
-rw-r--r-- 1 sammy sammy 6.9M Nov 16 14:37 gifski-high.gif

6,9M определенно слишком много, учитывая, что исходный видеоклип был всего 0,6M! Помните, что GIF не особенно эффективны по сравнению с современными видеокодеками. Вам нужно пойти на некоторые незначительные жертвы при кодировании их до разумного размера файла. На последнем этапе этого руководства вы дополнительно оптимизируете свои GIF-файлы.

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

Шаг 5 — Оптимизация, проверка и просмотр GIF

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

Начните с запуска стандартной команды оптимизации gifsicle:

  1. gifsicle -O3 --lossy=80 --colors 256 gifski-sample.gif -o optimized.gif

В этой команде вы указали параметр -O3 для наиболее агрессивной оптимизации, --lossy 80, чтобы допустить потерю качества изображения до 20% от исходного ввода, и --colors 256, чтобы использовать максимум 256 цветов в выходном изображении. Это позволит получить изображение более высокого качества, чем вы можете ожидать, почти без видимой потери качества изображения, потому что GIF-файлы не используют современное межкадровое сжатие видео, как это делают видеокодеки, и не используют методы сжатия изображений в стиле JPEG с помощью по умолчанию. Кроме того, в этом контексте 256 цветов относятся к любой палитре из 256 цветов, основанной на том, что уже есть в вашем GIF, а не к ограниченной палитре только из наиболее распространенных 256 цветов, поскольку в противном случае вы могли бы ассоциироваться с небольшими цветовыми палитрами. В целом сжатие GIF не очень ощутимо.

Как и в предыдущем шаге, проверьте размер optimized.gif:

  1. ls -lh optimized.gif



Output
-rw-r--r-- 1 sammy sammy 935K Nov 16 14:44 optimized.gif

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

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

  1. gifsicle --explode optimized.gif

Это создает несколько файлов с именами optimized.gif.000, optimized.gif.001 и т. д. для каждого отдельного изображения:

  1. ls -lh optimized*



Output
-rw-r--r-- 1 sammy sammy 935K Nov 16 14:46 optimized.gif
-rw-r--r-- 1 sammy sammy  20K Nov 16 14:54 optimized.gif.000
-rw-r--r-- 1 sammy sammy  17K Nov 16 14:54 optimized.gif.001
-rw-r--r-- 1 sammy sammy  22K Nov 16 14:54 optimized.gif.002
-rw-r--r-- 1 sammy sammy  22K Nov 16 14:54 optimized.gif.003
…

Вы также можете повернуть GIF, используя параметры --rotate-90 или --rotate-180:

  1. gifsicle --rotate-90 optimized.gif -o rotated.gif

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

Заключение

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

Далее вы можете узнать, как создать API обработки мультимедиа в Node.js.