Pull to refresh
0
Rating

Сравнение анимации GIF, WebP, APNG, BPG

.io corporate blog Image processing *
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.

image

Как создается анимация


Соседние кадры не должны сильно отличаться. Когда мы снимаем на видеокамеру, то это получается само собой, а вот если рисовать в редакторе, то можно об этом забыть, и Мальвина будет ходить, как Буратино.

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

image

И тут есть одна проблема. Размер одной секунды анимации с 24 кадрами будет весить в 24 раза больше статической картинки. Чтобы исправить ситуацию, применяют сжатие изображения.

Пример абстрактного алгоритма сжатия

Итак, есть файл. В нем только два цвета – черный и синий. Тогда цвет можно закодировать одним битом. Размер по горизонтали — 20, по вертикали — 1. Всего он занимает 20х1х1 = 20 бит.

image

В строке первые семь точек имеют первый цвет, затем шесть точек — второй, и оставшиеся в строке точки опять окрашены в первый цвет. Записать можно так: повторить цвет 1 — 7 раз, цвет 2 – 6 раз, цвет 1 – 7 раз (1х7 2х6 1х7).

Выгода кажется не очевидной, но если растянуть файл-строку в 1000 раз до 20 килобит, то запись увеличится совсем незначительно: 1х7000 2х6000 1х7000. С увеличением размера исходного файла выгода от сжатия будет только расти.

Сжатие применяется для каждого кадра анимации. Если в секунде 24 кадра, то оно сработает 24 раза. Без этого файлы анимации были бы очень большими.

Форматы с возможностью анимации


GIF формат

Это очень старый формат. Его показывают все браузеры. У него есть прозрачный слой, т.е. под картинкой будет виден фон, на котором она лежит. Для анимации сохраняет серию полноценных картинок. Это минус. Файл с 24 кадрами будет в 24 раза больше исходного статичного. Частично можно исправить тем, что некоторые кадры могут содержать прозрачный слой плюс изменения предыдущего кадра.

GIF показывает только 256 цветов. Это можно исправить при помощи анимации. Мы создаем две картинки с разным набором цветов. Демонстрируем их с задержкой 0. В итоге получаем 256 + 256 = 512 цветов.

Формат хорошо сжимает изображение без потерь. Для маленьких картинок это важно.

APNG формат

Этот формат (Animated PNG) является расширением распространенного формата PNG. Однако разработчики последнего не включили это расширение в спецификацию. Получилось, что немногие программы могут его правильно отображать. Большинство браузеров покажет первый кадр статичной картинкой, а про анимацию забудет.

image

Маловероятно, что формат будет широко использоваться. Тем более, что появились новые мощные конкуренты.

WEBP формат

Этот формат появился в 2010 году. Разработчик, компания Google, позиционирует его как замену GIF и других форматов. WEBP имеет все возможности GIF, но только в улучшенном варианте:

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

Формат поддерживается еще не везде. Например, Android умеет работать с ним, начиная с версии 4.0. браузеры Chrome – с версии 9, Opera – с версии 11.10. Другие браузеры пока формат не поддерживают (июнь 2015). Следить за его развитием можно здесь (список браузеров с поддержкой WEBP) и здесь (домашняя страница проекта).

BPG формат

BPG — самый новый. Он был предложен в конце 2014 года. Формат позиционируется как замена JPEG со значительными улучшениями. Сжатие изображения будет эффективнее, чем у предка. Появится поддержка анимации (JPEG не умеет этого делать). Но формат только начинает свое развитие, рекомендовать его для использования еще нельзя, а вот следить за ним можно.

Работа с GIF, APNG и WEBP в CLI


Есть два замечательных пакета ImageMagick и GraphicsMagic. С помощью ImageМagic создается анимация из *.gif картинок:

сonvert -delay 150 -loop 10 *.gif animated.gif

Команда convert подхватывает все файлы *.gif в директории, сортирует их по алфавиту и последовательно вставляет в новый файл animated.gif.

Проверка (запустится маленький графический контейнер с мультиком):

animate animated.gif

Конвертация мультика в APNG формат:

convert animated.gif animated.apng

Если использовать GraphicsMagic, то команды такие:

gm convert -delay 150 -loop 100 *.gif animated.webp
gm animate animated.webp

На этот раз выходной формат WEBP. Аналогично обрабатывается и BPG.

Также возможно вытащить анимацию в GIF из видеофайлов. Например, с использованием пакета libav-tools импортируется видео из MP4:

avconv -i inputfile.mp4 -pix_fmt rgb24 output.gif

Посмотреть разницу между анимацией GIF, WebP и APNG в разных форматах можно тут. А вот пример.

Конспект


  1. Четыре формата поддерживают анимацию: GIF, APNG, WEBP и BPG.
  2. Генерировать гифки можно с помощью ImageMagick и GraphicsMagick.
  3. Пока лучше хранить анимацию в GIF и следить за развитием остальных форматов.
Tags:
Hubs:
Total votes 21: ↑14 and ↓7 +7
Views 52K
Comments 12
Comments Comments 12

Posts

Information

Website
onthe.io
Registered
Employees
11–30 employees