StreamLive ProAnimated GIF, APNG and WebP overlays in a live stream
Add an animated GIF, APNG or WebP to a live stream in the browser studio: it plays with transparency, loops by default, and sits on an overlay channel above every camera.
An animated GIF, APNG or animated WebP added to the browser studio plays on air as a moving clip, not as a still of its first frame. Its transparency is kept, it loops by default, and you can put it on one of the eight overlay channels so it stays above every camera. Add it like any picture: Add input, then Media file, or drop the file on the inputs strip.
Before you start
- The browser studio. Open Live stream and choose Browser Studio, or use Podcast. Every plan, including the trial.
- A supported file. The studio takes GIF, APNG (an animated PNG) and animated WebP as moving pictures, plus PNG, JPG, WebP and SVG as stills. Other files are refused with a message that lists the formats.
- Chrome, Edge or Firefox for full control. These browsers decode the animation frame by frame, so the studio controls the loop and the timing. In Safari the picture still moves, but the browser plays it as the file says (see below).
- Transparency in the file. A GIF pixel is either fully transparent or fully solid, so soft edges such as shadows look jagged. APNG and animated WebP keep soft edges, which makes them the better choice for an animated logo or sticker.
Steps
- Add the file. Open Add input in the bar under the picture and press Media file, or drag the file onto the inputs strip. It gets its own tile.
- Check the tile. The tile shows the animation as it plays, over a checkerboard where the file is transparent.
- Set the loop. The Loop button sits on the tile next to Sound. It is on (filled green) by default for an animated picture. Click it to turn it off: the clip then plays once and holds its last frame.
- Size and place it on Preview. Drag it on the Preview monitor, or select it and use Alt+arrow keys to move and Alt+= or Alt+- to resize. For exact numbers, open the gear on the tile and use the Position tab.
- Put it on air. Click an overlay number (1 to 8) on the tile to keep it above every camera, or use Take or Cut to make it the main picture. Overlay channels: Overlay channels 1 to 8 and their keys (F1 to F8).
- Take it off. Click the same overlay number again, Shift+click for an instant cut, or All off to clear every channel.
Loop on, loop off
| Loop | What viewers see |
|---|---|
| On (default for animated pictures) | The animation runs again and again while it is on air |
| Off | It plays once and stops on its last frame. When it goes on air again it starts from the top |
Loop off suits a one-time animation, for example a "subscribe" sticker that pops in and settles. Loop on suits a moving logo or a small badge that stays on screen.
Safari
Safari versions without the browser's image decoder play the animation themselves. The picture still moves on air, but the loop follows the file: a GIF saved to play three times stops after three. The Loop button's tooltip says so on that browser. For a controlled loop, run the studio in Chrome or Edge.
Numbered pictures become one clip
Add 10 or more numbered pictures together (for example frame_0001.png, frame_0002.png and so on) and the studio makes them one input, an image sequence that plays at 30 frames per second. Loop is off by default for a sequence. This is a handy way to bring in an animation exported from a design tool as single frames with transparency.
What can go wrong
| What you see | Likely cause | Fix |
|---|---|---|
| Only the first frame shows | The file is a plain GIF, PNG or WebP with one frame, or a WebP saved without animation | Export it again as an animated file |
| A white or black box around it | The file has no transparency | Export with a transparent background; for a black box, the luma key can help: Remove a black background from a logo with the luma key |
| Jagged edges | GIF has no partial transparency | Use APNG or animated WebP |
| It stops after a few rounds in Safari | Safari follows the loop count in the file | Use Chrome or Edge, or save the file to loop forever |
| The animation ran once and froze | Loop is off | Turn Loop on, or take it off air and on again to replay |
| The file is refused | Not a format the studio accepts | Convert it to GIF, APNG, WebP or a WebM video |
GIF, WebP or video
For a long or large animation, a WebM video with transparency is lighter than a big GIF. Very large animations are decoded while they play instead of being kept in memory, which is fine for overlays but uses more of the computer. A moving logo as a video: Add a logo and overlays to your live stream. A video file as part of the show: Play a video file during a live stream. Still pictures and slides: Show an image on screen during a live stream.
Frequently asked questions
Can I use an animated GIF as an overlay in a live stream?
Yes. Add it in the browser studio and click an overlay number on its tile. It plays with its transparency above every camera.
Does the GIF loop on air?
Yes, by default. Turn Loop off on the tile and it plays once and stops on its last frame.
Why does my GIF look jagged around the edges?
GIF supports only fully transparent or fully solid pixels. Use an animated WebP or APNG for soft edges.
Does it work in Safari?
The animation moves, but Safari plays it as the file says, so the loop count in the file decides. Chrome and Edge give full control.
Do viewers on every network see the animation?
Yes. The studio draws it into the picture it sends, so every network and the recording show it.
Keep reading
Echo cancellation removes your speakers from your microphone; noise suppression removes background sound. What each does, its limits, and the StreamLive Pro settings.
What is ISO recording? Each camera in its own fileISO recording saves every camera to its own file, next to the switched program. Why editors want it, what it costs in disk space, and where StreamLive Pro offers it.
What is a lower third? Name titles in video, explainedA lower third is the name and title shown at the bottom of the screen when someone speaks. What it contains, how long to show it, Hebrew pitfalls, and how to add one.
Where is my live stream recording?Where is my live stream recording? Check Past streams and Storage, keep the video within about two hours, and learn why some broadcasts have none.
Want to try it? 7-day trial, no credit card.
Start free