Skip to content

Instantly share code, notes, and snippets.

@jackrusher
Last active February 21, 2023 08:14
Show Gist options
  • Star 70 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jackrusher/8c8b9d98796bffc649c2b303383cd791 to your computer and use it in GitHub Desktop.
Save jackrusher/8c8b9d98796bffc649c2b303383cd791 to your computer and use it in GitHub Desktop.

Twitter abuses all media file uploads, each type in its own way. If we want to upload a good looking animation loop from some low-color, high-detail generative art, we have to game their system's mechanisms.

  • don't upload a video file, they will re-encode it into absolute 💩

  • create a GIF, which they will auto-convert into a video file 😱

  • The frames of the GIF will be resized to an even-sized width using an extremely naive algorithm. Your GIF should be an even size (1000, 2000, &c) so the multiple of this size to avoid janky artifacts caused by floating point division.

  • The GIF format is also terrible, so you have to game that too. In particular, if we create a GIF using ffmpeg's defaults we end up with one small divergent color palette per frame. This leads to weird inconsistencies and artifacts between frames and blows up the file size. To avoid this, choose a representative frame from your animation and generate a palette from that:

ffmpeg -i frame-030.png -vf palettegen -y palette.png

And then generate your GIF using that palette:

ffmpeg -framerate 20 -pattern_type glob -i 'frame-*.png' -i palette.png -filter_complex "paletteuse" art.gif

If the GIF looks right, but is slightly too large to upload, you can give gifsicle a try:

gifsicle -O art.gif > art-optimized.gif

... et Voilà! Your beautiful art is as Twitter ready as it can be. Vaya con dios!

@ippsketch
Copy link

Thanks for this! I didn't know about the 508px output. That's great info - I'll try switching my GIFs over to 1016px.

I got really frustrated using ffmpeg and imagemagick (I avoid the command line if at all possible). I found ScreenToGif where you can input pngs then modify individiaul frame delays, add transitions, copy/paste/reverse frames etc. Then it has it's own encoding options or has ffmpeg built in if that's your preference. It's like ezgif, but lives on your desktop, so it runs a lot better for me.

gifisicle also works great for me. I'll go with -O3 --lossy=30 (or more) if I'm really having trouble getting the size down.

@jackrusher
Copy link
Author

@ippsketch I heard back that they've changed the width of the resize, and tests today show that it'll happily encode 1000 pixel wide images. Your difficulties are likely better addressed by using a single palette for every frame. (I don't know if ScreenToGif gives this option.)

@ippsketch
Copy link

Thanks for the update!
I'm not sure what magic ScreenToGif does. I just know that I really like that I can edit individual frames manually and that I typically get smaller and better looking GIFs than when I use ffmpeg with a palette. Maybe @NickeManarin of ScreenToGif can weigh in on what's happening with the palettes behind the scenes or what the palette options.

@NickeManarin
Copy link

Hi, @jackrusher, yes.
ScreenToGif gives that option to use a global palette (works best with FFmpeg).

@psql
Copy link

psql commented May 4, 2021

would be tight to turn this into a lil electron app...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment