/webp-to-gif

This script allows you to convert *.webp or *.webm images to *.gif (with animation and transparency preserved)

Primary LanguageShellMIT LicenseMIT

WEBP to GIF

EN | RU

1. Description

These scripts allows you to convert *.webp or *.webm images to *.gif (with animation and transparency preserved).

Solution based on:

I suggest you to use Docker container, but you can still install all required packages and execute scripts in your system too (see below).

Some example files was taken from ticket on ffmpeg (when attempt to convert webp images with ANIM and ANMF blocks inside them).

2. Requirements

2.1. Using Docker container

  • Docker and Docker Compose.

2.2. Using raw system

The Docker container was based on Debian, so instructions below will be for Debian too. See ./Dockerfile for more info.

  1. Install required packages:

    sudo apt update && apt install -y \
        gcc make autoconf automake libtool \
        libpng-dev libjpeg-dev libgif-dev libwebp-dev libtiff-dev libsdl2-dev \
        git \
        ffmpeg \
        gifsicle
  2. Clone libwebp repository and add anim_dump support to build configuration:

    git clone https://chromium.googlesource.com/webm/libwebp && \
    cd libwebp && \
    echo "bin_PROGRAMS += anim_dump" >> ./examples/Makefile.am
  3. Configure build files:

    ./autogen.sh && \
    ./configure
  4. Install:

    make && \
    sudo make install && \
    echo "/usr/local/lib" | sudo tee -a /etc/ld.so.conf && \
    sudo ldconfig
  5. Check installation:

    webpinfo -version && \
    anim_dump -version
  6. Remove cloned repository:

    cd .. && \
    rm -rf ./libwebp

3. Usage

For both usages you need to:

  1. Clone the repository:

    git clone https://github.com/Nikolai2038/webp-to-gif.git && \
    cd webp-to-gif
  2. Put your .webp or .webm images inside data folder (you can create subfolders - all will be ignored in GIT, except examples directory)

3.1. Using Docker Container

  1. Pull the image from DockerHub or build it yourself:

    • Pull:

      docker-compose pull
    • Build it yourself (see ./Dockerfile on how it will be built):

      docker-compose build
  2. Start the container in the background (the repository root folder will be mounted):

    docker-compose up --detach
  3. Now you can execute scripts (the paths to images must be relative and be inside repository folder, since they are accessed from the container):

    • Convert specific webp file to gif:

      ./convert_one.sh <file path> [0|1 - enable transparency, default is 1] [0|1|2 - compression level, default is 1]
    • Convert all webp files in a specific directory to gif:

      ./convert_all_in_dir.sh <directory path> [0|1 - enable transparency, default is 1] [0|1|2 - compression level, default is 1]
    • Convert all webp example files (inside ./data/examples) to gif:

      ./test.sh [0|1 - enable transparency, default is 1] [0|1|2 - compression level, default is 1]
    • Remove ALL gif files inside ./data directory (recursively):

      ./clear.sh

    You can also execute raw command, but remember to use scripts inside ./scripts directory. For example:

    docker-compose exec webp-to-gif bash -c './scripts/convert_one.sh ./data/examples/01_girl.webp 0 1'
  4. To stop and remove container, use:

    docker-compose down

3.2. Using raw system

Just use scripts in ./scripts directory, not in repository's root. The arguments are the same.

4. Example

  1. There are several example files in the ./data/examples directory, for example, 01_girl.webp.

  2. Let's generate gif with transparency enabled:

    ./convert_one.sh ./data/examples/01_girl.webp 1 1

    After some execution the ./data/examples/01_girl.gif image will be generated:

    output gif image

  3. Rename 01_girl.gif to 01_girl_transparency.gif so script won't override it later.

  4. Let's run script again, but with transparency disabled now:

    ./convert_one.sh ./data/examples/01_girl.webp 0 1

    New 01_girl.gif image will be generated:

    output gif image

    As we can see, all transparency pixels are now black!

  5. Rename result image to 01_girl_no_transparency.gif.

5. Contribution

Feel free to contribute via pull requests or issues!