WebP with a GIF fallback in email
The picture element works in email too. Clients that can show WebP get it, the rest get the GIF.
Animated GIFs in email are stuck with 256 colours, and they get big fast.
WebP is better at both, but not every client shows it. The <picture>
element solves that the same way it does on the web
(goodemailcode.com
has the details):
<picture>
<source srcset="animation.webp" type="image/webp">
<source srcset="animation.gif" type="image/gif">
<img src="static.png" alt="What the animation shows">
</picture>The client goes through the sources in order and uses the first one it can
show. A client that does WebP gets the WebP. One that doesn't, like desktop
Outlook, gets the GIF. One that does not understand <picture> at all shows
the <img>, so make that a still image.
Does the email load both?
No. Images in an email are not part of the message; they are URLs fetched
when it is opened, and <picture> behaves as it does in a browser: only the
format that matched is downloaded. The only cost is hosting two files.
When it is worth it
- Flat design, two or three colours, a simple animation: hardly. The GIF is fine.
- Photos, lots of colour, gradients, soft edges: yes. GIF bands gradients and only has on-or-off transparency, while WebP has full colour and a real alpha channel.
- A big file, say over 500 KB: yes, for the size alone. WebP is typically 30 to 70 percent smaller.