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

    Чтобы создать эффект движения нужно повторить слегка измененную картинку с достаточно высокой скоростью. Например в кино эта скорость составляет 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 и следить за развитием остальных форматов.

    .io

    42,00

    Компания

    Поделиться публикацией

    Похожие публикации

    Комментарии 12
      +1
      >ImageMagic
      На самом деле ImageMagick
        0
        спасибо!
        +2
        А где главное из названия поста? Где сравнение?
          –2
          https://i.onthe.io/compare_formats?r=abc1f16165e61d231b2ccd730fe5f01a

          З.Ы. Парсер дурак, не хавает ссылку
          0
          GIF показывает только 256 цветов. Это можно исправить при помощи анимации. Мы создаем две картинки с разным набором цветов. Демонстрируем их с задержкой 0. В итоге получаем 256 + 256 = 512 цветов.
          Задержки «ноль» не существует в GIF, всё равно пауза будет. Вот как это выглядит в браузере.
            0
            Формально существует, это на практике браузеры и просмотрщики давно ставят минимальную задержку, чтобы их нельзя было подвесить бесконечной анимацией с нулевой задержкой.
              0
              То, чего нигде нет, по определению не существует.
                0
                Как минимум Firefox показывает такие гифки из кэша моментально.
            0
            Кстати, вы ещё про MNG забыли.
              0
              Интересно было бы узнать про gifv тоже imgur.com/blog/2014/10/09/introducing-gifv хотя он еще и не стандартизирован.
                +1
                Формат? Это ведь webm/mp4. Видео. Пойдите по ссылке i.imgur.com/A61SaA1.gifv и посмотрите исходники страницы.
                0
                GIF формат
                Это такая распространённая калька с английского (неиспользование дефиса) или я всё же чего-то недопонимаю в пунктуации русского языка?

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое