Choose the format for the job
| Format | Useful for | Check before publishing |
|---|---|---|
| WebP still | Video poster, gallery thumbnail, link to a full video | Subject clarity, dimensions, alternative text |
| Short MP4 | Motion preview with video playback controls | File size, sound, playback, reduced-motion experience |
| Animated GIF | A destination that needs an animated image | Limited colours, repeated movement, potentially large file size |
For a portfolio, start with a still poster and let the visitor choose to play the video. A moving preview can be useful when motion explains something a single frame cannot show.
Build a still poster
Use the video thumbnail generator to choose a clear frame. Avoid fades, motion blur and half-completed transitions. Export a WebP at the size the player needs. Check the image at thumbnail size as well as full size.
A poster is separate from the video. Use it in your player's poster setting; it does not replace a playable source or supply captions.
Prepare a short MP4 preview
- Convert a MOV or WebM source to MP4 when necessary.
- Open the video compressor and trim to the shortest sequence that communicates the idea.
- Set dimensions for the player. Reduce frame rate only if the motion still looks appropriate.
- Use Remove audio for a silent preview. Check the exported file rather than relying on a muted player.
- Compare file size and playback before uploading.
Use GIF selectively
The MP4 to GIF tool exports a looping animation at 6 fps with up to 128 colours. It suits simple movement more than detailed photographic footage. Shorten the loop and reduce dimensions if the file becomes large. Compare the MP4 version instead of assuming an animated image is lighter.
Loops repeat immediately at the selected boundary. Pick a start and end that do not create a distracting jump, and avoid rapid flashing.
One source, three measured outputs
We created a short synthetic pan across the same public-domain NASA portrait used in the photo guide. This is controlled sample motion, not footage from a photography assignment. The downloadable source is a silent 320 × 180 H.264 MP4. We selected its first two seconds in the FooPixel preview generator and kept the output at 320 pixels wide.
| Output | Settings | Measured bytes |
|---|---|---|
| WebP poster | Frame at 0 seconds; quality 90 | 9,012 |
| MP4 preview | 2 seconds; 24 fps; CRF 28; veryfast; no audio | 11,826 |
| Looping GIF | 2 seconds; 6 fps; up to 128 colours | 394,364 |
For this scene, the GIF used substantially more bytes despite its lower frame rate. This is not an equal-quality comparison: each format and preset makes different visual tradeoffs, and a still image cannot convey motion. Inspect the downloadable GIF and MP4 before deciding what your page needs. Different source movement, dimensions and settings can produce different results.
Reproduce it: download the 142,007-byte source MP4. In the preview generator, set width 320, start 0 and end 2, then generate MP4 and GIF outputs. For the poster, select the image tab and time 0. The browser produces the WebP; the bundled FFmpeg engine produces MP4 and GIF. These example assets are included with the site and do not expire like visitor uploads.
Measured on 10 September 2026 in Chrome 152 on macOS, using FFmpeg core 0.12.10. See the methodology and source attribution and machine-readable results. Byte counts are observations of this run, not a promise about every browser or file.
Publish and test the actual page
Download your result or choose Host on FooPixel to receive a public URL. Visitor links last 24 hours under the current policy, while free-account uploads last seven days. Hosting limits apply separately from local processing.
Test the page on a phone and with a keyboard. Provide playback controls where appropriate, account for reduced-motion preferences, and make sure essential information is also available without playing the clip. A smaller file helps delivery, but the player, layout and page loading strategy still matter. See MDN’s video element reference for poster, preload and playback controls, and W3C’s guidance on moving content for pause and stop behavior.