From 8c34d810af95fae0ef846f54370a8c88bfab7123 Mon Sep 17 00:00:00 2001 From: "netop://ウィビ" Date: Sat, 11 Apr 2026 14:24:49 -0700 Subject: initial commit --- remarks/WR-011.txt | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 remarks/WR-011.txt (limited to 'remarks/WR-011.txt') diff --git a/remarks/WR-011.txt b/remarks/WR-011.txt new file mode 100644 index 0000000..7c727b0 --- /dev/null +++ b/remarks/WR-011.txt @@ -0,0 +1,54 @@ + + + + + + + +Document: WR-011 P. Webb + 2025.03.27 + + Pixel-perfect ffmpeg gifs + +Body + + I recently decided to take a page from elle's[1] book and create some + 88x31 banners for my homepage. I wanted them animated and to + incorporate Megaman Battle Network sprites. My initial ffmpeg + attempts were blurry af so I played around with arguments until I + figured out the winning incantations. + + For the first[2] two[3] banners I used this incantation: + + ```sh + ffmpeg -framerate 4 -pattern_type glob -i "*.png" -filter_complex "[0:v] split [a][b];[a] palettegen=reserve_transparent=on:transparency_color=ffffff [p];[b][p] paletteuse" pixel_art.gif + ``` + + There were only four frames so it made sense to my the FPS the same. + For the third[4] banner however, there were initially 44 frames of + the jack-in animation from MMBN6 but I removed some frames for a + better loop (36 frames in the end). + + ```sh + ffmpeg -framerate 12 -pattern_type glob -i "*.png" -filter_complex "[0:v] split [a][b];[a] palettegen=reserve_transparent=on:transparency_color=ffffff [p];[b][p] paletteuse" pixel_art.gif + ``` + + To my eyes, an FPS of 12 looks good enough. + + Now I gotta figure out where to put other peoples banners on + my homepage… + + Oh fun fact, AVIF is terrible for pixel-perfect animations, GIF + remains king. + + Thanks to Hank[5] I learned that putting + `image-rendering: pixelated;` on your pixel images via CSS make them + look crisp. + +References + + [1] + [2] + [3] + [4] + [5] -- cgit v1.2.3