git commit -m “Quest for the ultimate GIF, part 1”
Maybe I could make a better one?
If you blog at all, you probably reach for a video-to-GIF converter now and then. I use them a lot myself, but I never found one I was really happy with.
Sites like ezgif fall short on color and image quality. The GIF maker in Naver Blog (Naver is Korea’s biggest portal) has nice colors, but it limits you to 3 seconds and the image quality is really poor.
Why is that? And so began my short journey into GIFs.
The limits of GIF
First off, it turns out the GIF format just “has bad color to begin with.” Heh.
💡 Note: What is a GIF file? GIF file structure and LZW compression (in Korean) - a short overview of GIF
That’s because GIF has a technical constraint: it can only display up to 256 colors.
You’re taking 24-bit video with hundreds of thousands of colors and squeezing it into an 8-bit image with only 256. A lot of color gets lost along the way, so it’s no surprise a GIF looks muddier than the original.
The 256-color limit
24-bit true color video: 16,777,216 colors
↓ (conversion)
8-bit GIF: only 256 colors available
This huge loss of color is the fundamental reason GIFs look muddier than the original.
Naver Blog’s secret
By the way, GIFs made with Naver Blog have pretty nice colors, and there’s a good chance they use some GIF technique to correct the tones. That’s your hint! I’ll explain this technique in more detail around part 3.
That’s where my guessing about GIF colors ended for now. So how do you make a smoother GIF?
Cloning ezgif
To learn more about smooth-motion GIFs, I tried building a clone of ezgif (just its GIF conversion feature).
If you’ve used it, you know it takes a while to generate and the quality is a bit disappointing. 😢
What I found out about ezgif
From what I could tell, ezgif is a server-side service and appears to use FFmpeg.
Why do I think so? Because the description at the bottom of the ezgif site includes lines like these:
“Frame rate (fps)… smoother animation… increasing perceived quality but greatly increases the file size.”
“If you want to change the dimensions of the GIF or crop out only part of the video, you can use our resize and crop tools…”
That’s exactly how things usually work with FFmpeg’s palettegen, paletteuse, and scale filter chain.
Aha! So it converts with FFmpeg!
But wait, what’s FFmpeg? 🤔
Next up, I dig into FFmpeg. In the next post, I’ll go through how to use FFmpeg directly to make high-quality GIFs, step by step!
Next: 2. How to Turn Videos into High-Quality GIFs with FFmpeg - what I actually did, from installing FFmpeg to generating a palette and converting color spaces.
💬 Comments
Questions or feedback are always welcome. (Sign in with GitHub to comment.)