diff --git a/content/til/how-to-make-transparent-gifs-easier-shareable-by-adding-a-checkerboard-background.md b/content/til/how-to-make-transparent-gifs-easier-shareable-by-adding-a-checkerboard-background.md new file mode 100644 index 0000000..9af3818 --- /dev/null +++ b/content/til/how-to-make-transparent-gifs-easier-shareable-by-adding-a-checkerboard-background.md @@ -0,0 +1,67 @@ +--- +title: "How to make transparent GIFs easier shareable by adding a checkerboard background" +date: 2024-10-15 +tags: +- imagemagick +- gifsicle +- bash +- aseprite +--- + +I'm currently taking part in the ["#hARToween" daily art challenge](https://social.horrorhub.club/@stina_marie/113220760493893634), as I want to +work on my pixelart skills and drawing a 128x128px pixel drawing each day[^1] for a month seemed +like a good idea. You can follow my posts [in this thread](https://chaos.social/@foosel/113233763230193057). + +I'm using [Aseprite](https://aseprite.org/), and recently came across [the "record for aseprite" script for it](https://sprngr.itch.io/aseprite-record) +that allows taking regular snapshots of what I'm currently drawing so a timelapse can be created from +that. And that works nicely, but I had to realize that the timelapse would come with transparency until +I came to the background during my drawing, which looked really weird when sharing the resulting GIF. + +So I looked into adding the usual transparency checkerboard background to the GIF with a quick script, +and of course, [ImageMagick](https://imagemagick.org/) once more to the rescue. Alas, the resulting GIF was quite large and ImageMagick's +optimization options caused glitches in the GIF. So I looked for another option to optimize the GIF and +came across [gifsicle](https://www.lcdf.org/gifsicle/). + +The result is this bash script which will take a GIF and an optional background image to set, +add the background (or a freshly generated checkerboard pattern of the right size) to the GIF, then compress +the GIF: + +``` bash +#!/bin/bash + +GIF=$1 +BG=$2 + +BASE=$(basename "${GIF%.*}") +OUTPUT="$BASE.bg.gif" + +if [ -f "$BG" ]; then + echo "Adding background image $BG to all frames of $GIF..." + magick "$GIF" -coalesce null: "$BG" -compose dstOver -layers composite "$OUTPUT" +else + size=$(gifsicle --sinfo "$GIF" | grep "logical screen" | xargs echo -n | cut -d" " -f 3) + + echo "Generating a $size checkerboard pattern and adding it as background to all frames of $GIF..." + magick "$GIF" -coalesce null: \( -size $size tile:pattern:checkerboard \) -compose dstOver -layers composite "$OUTPUT" +fi + +echo "Optimizing $OUTPUT..." +gifsicle --batch -O3 --lossy=35 "$OUTPUT" + +echo "...done!" +``` + +Example call: + +``` plain +$ gif_bg 14.gif +Generating a 256x256 checkerboard pattern and adding it as background to all frames of 14.gif... +Optimizing 14.bg.gif... +...done! +``` + +I'm quite happy with the result: + +{{< toot "https://chaos.social/@foosel/113306303596486838" >}} + +[^1]: Well, almost, I was at MRMCD and then a bit under the weather after and thus missed some days that I'm now trying to catch up on again. \ No newline at end of file