Yeah I can't remember why I did this, but I made notes on doing it. I guess I was converting a short video clip to an APNG (Animated PNG). It's a de facto standard rather than a real standard, so it's a bit of an abomination, but it's generally well supported in browsers.

Anyway here's how you do it, you'll need ffmpeg and ImageMagick installed:

  1. Get the video
  2. Use ffmpeg to convert it to a sequence of PNGs:
    ffmpeg -i source.mkv -ss 00:00:40 frames/image-%03d.png
  3. Use convert to crop the sequence of images as needed, with repage so it forgets the fact that it was part of a bigger frame before. I'm grabbing a 512x512 square from the coordinates (1220,170):
    mogrify -crop 512x512+1220+170 +repage image-*.png
  4. Dither those images, this should reduce the eventual filesize:
    for i in image-*.png ; do convert $i +dither -colors 128 "PNG8:${i}" ; done
  5. Shrink them to a good size, in this case I'm converting from 512x512 to 160x160 so I can use it as a discord sticker or something:
    mogrify -filter Sinc -resize 160x160 image-*.png
  6. Finally, assemble them into an APNG that runs at 30fps (yes that's a duration of "1 over 30" to produce a speed of 30fps, it's poorly documented):
    apngasm output.png image-01.png 1 30

Try not to stab too many people in the eyeballs.

Back To Top