Animated WebP for Email — smaller than GIF, smoother than PNG
Create eye-catching animated images for your email campaigns that load fast and stay under size limits. All processing happens locally in your browser.
Create Email-Safe AnimationWhy marketers reach for animation in email
A single looping product shot or an animated “new arrival” badge can lift click-through rates without adding a word of copy. The problem has never been whether animation works in email — it’s the file size and the rendering. For fifteen years the only portable way to animate an inbox was the GIF, and GIFs are expensive: capped at 256 colors, dithered into banding, and routinely 1–3 MB for a few seconds of footage. On a mobile data connection that’s the difference between an email that paints instantly and one that shows a broken-image placeholder while the reader scrolls past.
Animated WebP solves the size half of that equation. It uses the same modern compression as still WebP, supports full 24-bit color plus an alpha channel, and on a typical marketing clip lands roughly 25–35% smaller than the equivalent GIF at visibly better quality. The catch is the rendering half: email clients are far more conservative than browsers, so animated WebP is a progressive enhancement, not a drop-in GIF replacement. Get the fallback right and you get the best of both — a crisp, lightweight animation where it’s supported, and a clean static frame everywhere else.
GIF vs animated WebP, in practice
GIF Problems
- ✕Large file sizes (often 1–3 MB)
- ✕Limited to 256 colors, visible banding
- ✕Choppy animation, no real alpha
WebP Solution
- ~25–35% smaller than the same GIF
- Full 24-bit color + alpha transparency
- Smoother motion at lower bitrates
Which email clients render animated WebP
Support splits along rendering-engine lines. Clients built on WebKit or Blink tend to animate WebP correctly: Apple Mail on macOS and iOS, and most webmail viewed in a modern browser tab, including Gmail and Yahoo on the web. The notable holdouts are the Outlook desktop apps on Windows, which render mail through Word and will show either a broken image or, at best, the first frame. Older Android Gmail app builds are inconsistent too.
Because there is no universal answer, the safe assumption is that a meaningful slice of your list will not see the animation. That is fine — as long as the first frame of your WebP is a complete, on-brand still that carries the message on its own. Design the animation so frame one already says what you need it to, and non-supporting clients simply get a static image instead of a moving one. For a client-by-client matrix and a copy-paste MJML fallback block, see our deep-dive guide: Animated WebP in Email: Which Clients Render It.
Recommended email settings
These values keep most campaign animations comfortably under half a megabyte while staying legible in a narrow email column. They’re a starting point — nudge quality up for gradients, or width down if you’re targeting a tight size budget.
8
FPS
50%
Quality
320px
Max Width
<500KB
Target Size
Why 8 FPS?Inbox animation reads as an accent, not video. Eight frames a second is enough to convey motion — a wave, a shimmer, a product turning — while keeping the frame count, and therefore the byte count, low. Pushing past 12 FPS rarely improves how it looks in a 320-pixel column but balloons the file.
Why 320 px wide?That’s the effective render width of a single-column mobile email. Exporting larger just ships pixels the client will downscale anyway. The 50% quality setting is deliberately aggressive; heavy compression is far less noticeable on a small, looping image than on a hero photo.
Always ship a fallback first frame
Outlook desktop and some older mobile clients won’t animate WebP. Make frame one a self-contained still, and never put critical copy or a CTA only inside the motion.
Email animation FAQ
- How do I add an animated WebP to a Mailchimp, Klaviyo, or HubSpot campaign?
- Drop an image content block into your template and upload the .webp file the same way you would a JPG or GIF. The ESP hosts the file on its own CDN and inserts a plain <img> tag, so no special embed code is needed. The animation plays wherever the client supports it, and the first frame shows everywhere else. Always set descriptive alt text, since some inboxes block images by default.
- Why does my animation show up as a static image in Outlook?
- Desktop Outlook on Windows renders email with Microsoft Word’s HTML engine, which has no support for WebP or for animation of any kind. It freezes the file on its first frame, so recipients see a still image rather than motion. This is expected behaviour, not a bug in your file. Design frame one to communicate the core message on its own so Outlook readers still get the point without the animation.
- What’s the maximum file size for an animated WebP in email?
- There’s no format-imposed limit, but two practical ceilings matter. Gmail clips messages whose HTML exceeds roughly 102KB — that’s markup weight, not image weight, so a hosted image doesn’t count against it. For the image itself, aim for under 500KB to 1MB so it loads before a reader scrolls past, especially on mobile data where large files stall or get skipped entirely.
- Should I use a GIF fallback or a static image fallback for email?
- Use a static first frame. Email clients strip <picture> elements and srcset, so reliable format-swapping between WebP and a fallback simply doesn’t work the way it does on the web. A single animated WebP degrades on its own: supporting clients animate it, others show frame one. Adding a separate GIF only doubles your weight and complexity without buying broader coverage, so keep it to one well-designed file.
- Does animated WebP work in Apple Mail and the Gmail app?
- Apple Mail on macOS and iOS animates WebP because it renders through WebKit, which supports the format fully. Gmail in a desktop browser also animates it. The Gmail mobile apps are less consistent — recent Android and iOS builds generally work, but older Android versions sometimes show only the first frame. Because mobile is where most opens happen, send yourself a test and check on a real phone before launching.
- Will an animated WebP increase my email’s spam score?
- No. Spam filters don’t judge image file formats, so WebP is treated exactly like a JPG or GIF. What actually moves your score is the image-to-text ratio, the reputation of the domains you link to, your sending history, and authentication like SPF and DKIM. Keep a healthy balance of real text alongside the animation, write meaningful alt text, and avoid an email that is one giant image.
Ready to create?
Use the Email Safe preset for optimal results — it applies these settings automatically.
Start Converting — Free