How to Create Lightweight GIFs for Your SaaS Landing Page
A GIF on a landing page has one job: show a single step looping, without making the page wait. A GIF of the whole demo will be large, soft, and slow. Cut it down to the moment that has to move.
DoDemo exports GIF from the same project as the MP4. The free plan includes a DoDemo watermark on that export. Pro removes it.
Use a GIF for one beat, and an MP4 for the story
A homepage hero that explains the product should be an MP4. Video compresses a longer take far better than a GIF, and it can carry captions and audio.
A GIF belongs next to a sentence. "Click the total, and the zoom follows." The loop is that click and the zoom, then it repeats. If the viewer needs the beginning, the middle, and the ending, you wanted a video.
Record the step, then throw away everything around it
Record the task in DoDemo the way you would for a short demo. Window or area capture keeps the desktop out. Hide the recorder.
In the editor, the GIF's timeline should be the click and the result only. Cut the login, the loading, and the moment you hunted for the menu. A loop of three to six seconds is usually enough for one UI change. Longer loops are where file size blows up, because a GIF stores frames instead of a modern video stream.
Keep one zoom, the one that makes the control readable. Extra zooms in a tiny loop feel like the picture is shaking. Smooth the cursor so the pointer does not flicker between frames.
Crop to the panel that changes. A GIF of a 1920-pixel desktop, scaled down by the browser, is both heavy and blurry. The frame should already be the size you intend to show.
Export, then look at the file before you embed it
Export GIF from the editor. Open the file on the page, on a phone-sized window, and on a normal connection if you can. If the page jumps or the image arrives late, the GIF is still doing too much. Shorten it or crop it again. Do not "fix" a heavy GIF by uploading a heavier one and hoping the CDN saves you.
Put the MP4 of the full task further down the page, or behind a play button. The GIF is the proof next to the claim. The video is the story.
Free exports include the watermark. If the GIF sits in the hero and the watermark fights the UI, that is the moment to remove it with Pro. The recording and the editor are the same either way.
A simple test
Show the GIF to someone who has not seen the product. Ask which control moved. If they can point at it, the loop is doing its job. If they ask what they are looking at, you exported a tour. Cut back to one step and export again.
The timed version of the full recording is in a SaaS demo in 30 minutes. Download DoDemo when you are ready to record the step.