Сравнение анимации GIF, WebP, APNG, BPG
Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 24 кадра в секунду. Чем она выше, тем движение выглядит плавнее.
Как создается анимация
Соседние кадры не должны сильно отличаться. Когда мы снимаем на видеокамеру, то это получается само собой, а вот если рисовать в редакторе, то можно об этом забыть, и Мальвина будет ходить, как Буратино.
Этот принцип используется в анимированных графических файлах. Они содержат не одно изображение, а серию картинок-кадров. Каждый кадр знает, сколько миллисекунд он должен отображаться.
И тут есть одна проблема. Размер одной секунды анимации с 24 кадрами будет весить в 24 раза больше статической картинки. Чтобы исправить ситуацию, применяют сжатие изображения.
Пример абстрактного алгоритма сжатия
Итак, есть файл. В нем только два цвета — черный и синий. Тогда цвет можно закодировать одним битом. Размер по горизонтали — 20, по вертикали — 1. Всего он занимает 20×1х1 = 20 бит.
В строке первые семь точек имеют первый цвет, затем шесть точек — второй, и оставшиеся в строке точки опять окрашены в первый цвет. Записать можно так: повторить цвет 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. Однако разработчики последнего не включили это расширение в спецификацию. Получилось, что немногие программы могут его правильно отображать. Большинство браузеров покажет первый кадр статичной картинкой, а про анимацию забудет.
Маловероятно, что формат будет широко использоваться. Тем более, что появились новые мощные конкуренты.
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
Есть два замечательных пакета ImageMagic и 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 в разных форматах можно тут. А вот пример.
Конспект
- Четыре формата поддерживают анимацию: GIF, APNG, WEBP и BPG.
- Генерировать гифки можно с помощью ImageMagick и GraphicsMagick.
- Пока лучше хранить анимацию в GIF и следить за развитием остальных форматов.
