Tutorials

How to use animated GIFs without breaking your slide, inbox or page

Animated GIFs are great when they fit, and most problems start before anyone clicks “Insert”. A 9 MB loop that looked fine on your desktop stalls a sales deck. A signature GIF turns into a frozen first frame for half your contacts. A hero loop on a homepage pushes load time past what visitors will wait for.

The tutorials above show the exact clicks: how to add a GIF to PowerPoint, how to insert a GIF into Google Slides, how to build an animated email signature and how to add animation to a website. This page comes one step earlier. It helps you decide how to use animated GIFs, or whether video or code would work better, before you open those guides.

We call it the 3-question check: where will it play, which format suits that place, and how heavy can your GIF be? Answer them in that order and the right tutorial follows.

Question 1: Where will your GIF play?

The destination matters more than the GIF, because every destination has its own player with its own limits. You don’t control that player. You only control what you add to it.

Four destinations cover most requests:

1. A presentation (PowerPoint or Google Slides). The GIF plays inside the app on your screen or a projector. You decide when it appears, and your audience sees it once or twice.
2. An email or marketing campaign. The email opens in whatever client the recipient uses. Some clients animate a GIF, some show only the first frame, and some block images until readers allow them.
3. An email signature. Like an email, multiplied: the image travels with every message you send, so a heavy or distracting GIF costs you every day.
4. A website or blog. The animated image runs in a browser, competes with everything else for bandwidth, and has to work on a phone with a weak connection.

If you want all four, plan four exports. One file rarely fits every place.

Question 2: What is the best format for each place?

GIF is the format everyone knows, and GIFs can be used almost anywhere an image works. But they are old technology. Each frame is a picture with at most 256 colors, so gradients band, photos look grainy, and size grows fast with every frame and pixel.

Here is how the options compare when you add motion to each destination:

On websites the gap is large. In a worked example on Google’s web.dev, a 3.7 MB GIF shrank to a 551 KB MP4 and a 341 KB WebM with the same content. That is about 85% and 91% less to download. A <video> tag with autoplay, loop, muted and playsinline looks like a GIF to visitors.

Code is the third way. Simple motion like a loading spinner, a pulsing button or a text effect can be pure CSS: a few lines that stay sharp at any size. Lottie files (vector animation stored as JSON) suit icons, but they need a player script and someone to export them.

So use GIFs where they are the only thing that plays (email, signatures, many chat apps), and video or code when you have a choice. Our guide to adding animation to a website puts the GIF, video and CSS options side by side with code you can copy into your page.

Question 3: How heavy can your GIF be?

Size is where good GIFs go wrong. Weight depends on pixel dimensions, number of frames and how much changes between frames. Cut any one and your GIF shrinks.

These rules of thumb come from practice, not from a standard:

• Slides: a few MB per GIF is fine for a local deck. Keep your presentation light enough to email, and export long clips as MP4.
• Emails: aim for under 1 MB per GIF, ideally a few hundred KB. The first frame should carry the message alone, since that is what some Outlook versions on Windows show.
• Signatures: tens of KB up to roughly 200 KB, at the width you display (often 300 to 400 pixels). A 1080-pixel GIF scaled down in HTML still downloads at full size.
• Websites: anything above about 1 MB should be a video. Set width and height so the layout doesn’t jump, and lazy-load what sits below the fold.

Quick wins when you need a smaller GIF: crop to the moving part, halve the frame rate, and cut the loop to the 2 to 6 seconds that carry the idea. A plain background compresses far better than texture.

How to use GIFs with accessibility in mind

Motion can make a point faster than text. It can also make content hard to use. Some people get dizzy from large movement, flashing can trigger seizures, and screen reader users never see the image.

Keep these points when using animated content:

• Alt text. Describe what the GIF shows and why (“Snowflakes falling over a winter sale banner”), not “animated GIF”.
• No flashing. WCAG sets the limit at three flashes per second. Strobe effects have no place in a signature or newsletter.
• A way to stop it. On websites, motion that starts by itself and runs longer than five seconds needs a pause control under WCAG. A video element gives you one; a GIF does not.
• Reduced motion. Operating systems have a “reduce motion” setting, and CSS can read it with the prefers-reduced-motion media query. Show those visitors a still image or a soft fade.
• Loop count. A loop that plays three times and stops is calmer than an endless one.

Where to get GIFs, or create your own GIF

You can search GIPHY or stock libraries, but licensing for their business use is often unclear, and they are rarely sized for your destination. Two simpler routes:

• Our gallery. The free animations gallery has 40 animations in 6 themes (Halloween, Christmas, snow, New Year fireworks, Valentine’s Day and barcode). Each comes as MP4 and GIF, so you can use the GIF in the email and the MP4 in slides or on the web.
• Our browser tools. With the GIF Maker you can create your own GIF from images you select. The Slideshow Maker and Photo Animation tool export MP4, WebM or GIF, and the Banner Maker adds HTML5. All tools run in your browser: no upload, no account, free. A Text Animation Generator and a CSS Loader Generator are joining them for CSS effects.

For email in detail, the animated email signature guide covers Gmail, Outlook and Apple Mail, including the first-frame issue.

Your checklist before you add a GIF anywhere

Run through this once per destination. It takes two minutes.

• [ ] I know where the GIF will play: slide, email, signature or website.
• [ ] The format matches: GIF for email and signatures, GIF or MP4 for slides, video or CSS for the web.
• [ ] It is exported at display size, not scaled down afterwards.
• [ ] Size fits: about 200 KB for signatures, under 1 MB for email, video instead of GIF above 1 MB on the web.
• [ ] The first frame works as a still image.
• [ ] The loop is short and flashes no more than three times per second.
• [ ] Alt text says what the GIF shows.
• [ ] On websites, visitors can pause it, and reduced motion is respected.
• [ ] I tested it where it will live: slideshow mode, a test email to Gmail and Outlook, a phone browser.

Then pick your tutorial from the cards at the top of this page.