What the GIFvideo → gif, the way creatives need it
gif in webflow

On a Webflow page, a GIF is the motion that ships as an image

Webflow has a video component for the hero and a hosted embed for anything with sound. The GIF is for the four-second product loop in a feature card, and Webflow's image rules decide whether it gets there.

By the What the GIF team · Published

Drop a video, get a GIF free · frame-perfect · nothing leaves your browser Open the converter →

Put a product loop on a Webflow page as a GIF

What the GIF does the whole thing locally, right in your browser: nothing here ever leaves your machine.

  1. Record the interaction. Capture the control with your OS recorder, or point Record a Tab at the staging tab. One clean pass, a beat of rest each end.
  2. Drop the take into the converter. Drag the recording into What the GIF. Decoding, trimming, and encoding run inside the tab; the raw take never goes up anywhere.
  3. Cut and crop to the control. Trim to the two to four seconds around the interaction, then lock a 1:1, 4:5, or 16:9 crop over the component so the card shows the control, not the window.
  4. Size it to the slot. Export at the width the column renders (double it only if you'll tick HiDPI), hold the frame rate at 10 or 12 with a 64 or 128 color palette, add Medium Extra Compression, and read the estimate. Under 4 MB is the gate; 1 to 2 MB is the target.
  5. Upload and place. Press J, drop the GIF in the Assets panel, and drag it onto the canvas. Add alt text. Leave loading on Lazy below the fold, so the loop starts roughly when the reader arrives, not mid-cycle.
  6. Route the hero elsewhere. If the motion is full-bleed or runs past five seconds, switch Output Format to MP4 in the same editor and use Webflow's Background video instead.

Three doors for motion, and only one of them is an image

Lottie and Rive are vector animation, not footage. For footage, Webflow's Add panel has three doors, and they barely overlap. The Video element wants a URL from YouTube, Vimeo, or another host and can't play a file you uploaded. Background video takes your file, silent and under roughly 30 MB, as the backdrop for a section. The GIF comes in through the Image element, so it goes wherever an image goes: a feature card, a Collection item, a rich text post.

That placement is the whole case. A hover state in a three-column grid has no video component that fits it. An image fits, and if the image loops, the column shows the interaction instead of describing it. No poster frame, no player chrome. The catch: Webflow's image rules were written for photographs.

4 MB is a gate at the door, not a budget for the page

The Assets panel refuses any image over 4 MB as of this writing, and a GIF is an image. A 4.2 MB loop doesn't get compressed, it gets an error. That's the gate. The budget is smaller, for a reason buried in the responsive image docs: Webflow slices an uploaded JPG, PNG, or WebP into as many as seven variants, down to 500 px wide, and hands the phone the small one. GIFs aren't on that list. The phone downloads the desktop file.

So a 3.5 MB loop costs 3.5 MB at every breakpoint, and a six-card feature grid carries 21 MB. Lazy loading, on by default for new images, spares the cards below the fold until someone scrolls; the hero row loads regardless. Plan on 1 to 2 MB per loop.

Export at the width the column draws, spend the leftover on frames

A three-column card on a 1,200 px container renders around 350 to 380 px wide. Export there. Webflow's HiDPI checkbox draws an image at half its pixel width for retina sharpness, but a 760 px export carries four times the pixels. Decide on purpose, then:

On a UI loop the chrome around the control never moves, and the always-on optimizer writes only the patch of each frame that differs from the last, so an interface GIF lands far under a photographic one of the same length. The under-2 MB recipe works the same dials harder.

The hero should be a video. Say so before the client asks.

Full-bleed, photographic, above the fold, longer than five seconds: not a GIF. H.264 spends bytes on what changed between frames; GIF spends them on the frames, and at 1,400 px wide that arithmetic loses inside two seconds. Background video takes a silent file under roughly 30 MB, transcodes it to MP4 and WebM, loops it, and adds a play/pause button by default.

That button matters. WCAG 2.2.2 says motion that starts on its own and runs past five seconds needs a way to pause, stop, or hide it. Webflow's background video ships the control and sits out for visitors with reduced motion on. A GIF has no switch. It plays for everyone, forever. So keep GIF loops to two to four seconds, away from running text, and give the long take to the component built for it.

Same editor either way: trim and crop once, flip Output Format to MP4 with the bitrate dial for the hero, export a GIF for the grid. Narration means YouTube or Vimeo and the Video element. Pacing a demo longer than a loop is the product demo guide's job.

The Assets panel is public by design. The cutting room shouldn't be.

Webflow's docs say it plainly: files in the Assets panel are publicly accessible and may be indexed once they sit on a live page. Fine for the four-second loop you're launching. The wrong fate for the forty-second raw take behind it, the one that pans across a pricing page you haven't announced, which is exactly what an upload-first converter receives.

This converter does the cut in your tab. Your browser decodes the recording, your CPU trims, crops, and encodes it, and the finished GIF hits your Downloads folder. The first server to see a pixel is Webflow's CDN, and it sees only the finished cut, when you choose to upload it. Staging site? Record a Tab grabs it via the browser's share dialog, desktop only, real time. Webflow's own interactions have no export button either; the HTML5 animation route covers recording them.

Then press J, drop it in the Assets panel, drag it onto the canvas, and write the alt text.

Cut the loop, then clear the gate

Trim the take to the interaction, size it for the column, and watch the estimate settle under 4 MB. The raw recording stays on your machine; only the loop goes to Webflow.

Open the converter

Keep going

Product Demo GIFsproduct demo gif
GIFs in Figmagif in figma
GIFs in Figma Slidesgif in figma slides
Tutorial & How-To GIFshow to make a tutorial gif
HTML5 Animation to GIFhtml5 animation to gif
GIF Under 2MBgif under 2mb

Questions, answered

Why does Webflow reject my animated GIF when I upload it?
Almost certainly size. Webflow caps image uploads at 4 MB as of this writing and treats a GIF as an image, so a 4.1 MB loop fails outright, never compressed. Trim, export narrower, drop the frame rate, and watch the estimate until it sits under the cap.
Does Webflow make responsive variants of a GIF the way it does for PNGs?
No. Responsive variants, the srcset sizes down to 500 px, are generated for inline JPG, PNG, and WebP only. A GIF goes to every device at its uploaded size, so export it at the width its slot renders; Webflow won't shrink it for phones.
GIF or background video for a Webflow hero section?
Background video, almost always. It takes a silent file under roughly 30 MB, transcodes it to MP4 and WebM, loops, and ships a play/pause button and honors reduced-motion settings. A GIF at hero width blows through 4 MB in seconds and can't be paused.
Can I put an animated GIF inside a Webflow CMS blog post?
Yes. Insert it as an image in the rich text field and it loops there like any other image. Rich text images get no responsive variants either, so size it for the column before inserting.
Will the GIF still loop on phones where background video won't?
Usually. Webflow notes that background videos may not autoplay on touch devices in low power or data saver mode. Those rules govern video; a GIF is an image and never asks permission to play, so in practice it keeps looping, one honest argument for a small GIF over a tiny video in a mobile-heavy grid.
Is the staging recording uploaded anywhere before it reaches Webflow?
Not by this tool. Every step, decode to encode, happens inside your browser tab, so the raw take lives on your disk, full stop, until you upload the finished GIF yourself. Since Webflow treats uploaded assets as public, that loop is the only version that should ever leave the machine.