Video to GIF guide
Best GIF Settings for Websites: FPS, Width and File Size
Best GIF Settings for Websites: FPS, Width and File Size
The best GIF settings depend on what you are trying to show. A tiny reaction GIF has different requirements from a software walkthrough with text. Your goal is to preserve the important visual information while avoiding unnecessary download weight.
Start with duration
Trim the clip to the shortest segment that communicates the action. Every extra second adds more frames and often increases file size significantly.
Choose a width
Try 320 pixels for compact reactions and 480 pixels for basic product demonstrations. Use a larger width only when viewers need to read interface labels or small details. The ideal size depends on your page layout and source material.
Set the frame rate
8 FPS is a reasonable first test for slow interface actions. Try 10–12 FPS for smoother movement. Higher FPS creates more frames, which can increase file size.
Understand GIF colour limitations
GIF supports a maximum palette of 256 colours per frame. Gradients, photographs and subtle shadows may show visible banding. For longer or high-quality motion, an MP4 or WebM video is often a better web format.
Try a simple workflow
Open the video to GIF converter, upload a short MP4 or WebM file, trim to three seconds, select 320 pixels and 8 FPS, then preview. Increase quality settings only if needed. Download and test the GIF in its actual page layout.
Accessibility and page experience
Avoid flashing or distracting animation. Give users sufficient context in nearby text and consider reduced-motion preferences. Do not rely on the GIF alone to convey essential instructions.
FAQ
Is 30 FPS better for GIFs?
Not always. A lower frame rate often gives a much smaller file for simple demonstrations.
Can GIF replace video everywhere?
No. Use video for audio, long clips, and high-fidelity motion.
How can I make a GIF smaller?
Trim duration first, then reduce width and FPS.
More guides are available in the blog.