Blog
Twitter
Log in
0:00
34364185213
Abdul Jamjoom
Edited on 11/1/22
Created on November 1, 2022 at 2:41 pm
Edited on November 1, 2022 at 5:35 pm
·
threads-blog
threads-blog
Improve GIF quality with ffmpeg

Watch narration
0:00
0:00

Let's skip straight to the result before diving into the details

The left side is old, right is new.
:sparkles
s/o to this post on the pkh blog that offers great insights into this process!

0:00
Pro-tip: replace gifs w/ muted looping videos if you can
Replace animated GIFs with video for faster page loads
Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only to find out that GIF was really a video? There's a good reason for that. Animated GIFs can be downright huge! By converting large GIFs to videos, you can save big on users' bandwidth.
web.dev
·
Copy link
Improving GIF performance on Pinterest
Tianyu Lang & Nick DeChant| Pinterest engineers, Video & Image Platform
medium.com
·
Copy link
Replace animated GIFs with video for faster page loads
Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only to find out that GIF was really a video? There's a good reason for that. Animated GIFs can be downright huge! By converting large GIFs to videos, you can save big on users' bandwidth.
web.dev
·
Copy link
Improving GIF performance on Pinterest
Tianyu Lang & Nick DeChant| Pinterest engineers, Video & Image Platform
medium.com
·
Copy link
0:00

So, how did we create GIFs?

We relied on defaults:
  • Generic color pallet
  • Ordered bayer dithering (cross-hatch pattern)
  • Scale to 480
    • ffmpeg -i <input_video>.mp4 -t 5 -vf fps=15,scale=480:-1 ./generated_gif.gif
    0:00

    [GIF internals] Color Pallet

  • GIFs support 256 colors
  • The standard/default color pallet covers a range of all colors, so it's able to convert any video into a decent GIF
    • 
    0:00

    [GIF internals] Dithering

    Approximate colors not available in your pallet by diffusing colored pixels from your pallet
    
    0:00

    How do we create GIFs now with improved quality?

  • palettegen → generate a single palette for a whole video stream and save it as a PNG (process frames and generate a histogram of colors)
  • stats_mode=diff (focus on the moving object)
  • paletteuse → use the generated pallet to approximate and paint the GIF frames
  • floyd_steinberg dithering
    • 
    0:00

    Code for generating HQ GIFs

    ./<file_name>.sh <video_file_name>.mp4
    #!/bin/bash
    filename=$(basename -- "$1")palette_png="./palette_png.png"
    ffmpeg -t 5 -i "$1"  -vf "$filters_new,palettegen=stats_mode=diff" -y $palette_pngffmpeg -t 5 -i "$1" -i $palette_png -lavfi "$filters_new [x]; [x][1:v] paletteuse=dither=floyd_steinberg" -y "./generated_GIF.gif"
    0:00

    References

    FFmpeg Filters Documentation
    ffmpeg.org
    ·
    Copy link
    High quality GIF with FFmpeg
    blog.pkh.me
    ·
    Copy link
    FFmpeg Filters Documentation
    ffmpeg.org
    ·
    Copy link
    High quality GIF with FFmpeg
    blog.pkh.me
    ·
    Copy link
    0:00

    Have questions or suggestions?

    Shoot me a note at abdul@threads.com or DM me on Twitter @abduljamjoom
    ©2022 Threads, Inc.
    BlogTwitterLog in
    Made with 💜 in SF, NYC, TOR, DEN, SEA, AA