The same falling snow, built six different ways. Each one is shown live below, with what it
costs to download, where it works, and how it looks up close, so we can pick the right one for each place
the logo appears.
How these were made
Every demo uses one snow scene: the same flakes, generated from a fixed random seed, each with
its own size, speed, sideways drift, sway and spin (spinning around its own centre). Some fall behind the logo,
some in front. Every motion repeats exactly every 6 seconds, so all of them loop with no visible
jump. The live versions (2 and 3) run at your screen's refresh rate. The baked versions (1, 4, 5 and 6) are
frame-by-frame recordings of version 2: 600 px wide, 25 frames a second,
150 frames.
1
Animated GIF
baked
The classic. A flip-book of 150 pictures in one file, each limited to 256 colours.
Good
Works literally everywhere: every browser, every email client, Slack, PowerPoint.
The only animated format most email clients play, so it is the one choice for email signatures.
One file, drop it in anywhere.
Not so good
Only 256 colours: gradients get speckled ("dithering").
Transparency is on/off only, so soft edges become jagged (see the zoom section below).
Heavy for what it shows, and fixed size: blurry on sharp (retina) screens.
Outlook for Windows (2007 to 2019) only shows the first frame.
2
Pure vector SVG
live
One small SVG file. The snowflakes are drawn as shapes inside it and moved by CSS animation
that lives in the same file.
Good
By far the smallest for the standard logo, and it works as a plain <img>: no code on the page.
Razor sharp at any size, on any screen.
Smooth: moves at the screen's own refresh rate, not 25 frames a second.
Turns itself off for people who ask their device for reduced motion.
Not so good
Email: Gmail and Outlook block SVG entirely. Web only.
The browser redraws the whole picture every frame, which costs some battery while it is on screen.
Only as small as the logo: the winter logo hides a photo-like picture inside its SVG, so it is heavy either way.
Why CSS animation and not SMIL?
SVG has its own animation language (SMIL, the <animate> tags). Both run inside an
<img> in every current browser. We chose CSS because it can listen to the
prefers-reduced-motion setting (SMIL cannot), it is the skill web developers already have,
browsers can often hand CSS transforms to the graphics chip, and it uses the exact same keyframes as
demo 3, so the two are directly comparable. SMIL would only win for very old email-style renderers,
which block SVG anyway.
3
PNG snowflakes over the vector logo
live
The normal vector logo, with small picture files of snowflakes (soft-edged PNGs) layered on top
and moved by the same CSS animation as demo 2.
Good
Snowflakes can be any artwork: photos of real snow, glows, blur, textures.
Logo stays sharp; the three flake images are tiny and are shared by every flake.
Smooth and respects reduced motion, like demo 2.
Not so good
Needs a bit of HTML and CSS on the page, so a developer has to place it. Not for email.
Several files instead of one, so a little slower to first appear.
Flakes go soft if they are scaled up a lot (they are pictures, not shapes).
4
Animated PNG (APNG)
baked
Like a GIF, but every frame is a full-quality PNG with millions of colours and soft transparency.
Good
Perfect picture quality, smooth see-through edges on any background.
Works in every current browser.
Where it is not understood, it quietly shows the first frame as a normal PNG logo.
Not so good
Enormous: lossless frames of moving snow do not compress. The heaviest option here by far.
Email: animates in Apple Mail; most others show only the first frame.
Fixed size, so soft on retina screens.
5
Animated WebP
baked
Google's image format: a flip-book like GIF, but with full colour, soft transparency and
photo-style compression.
Good
Full colour and smooth transparency in one <img> file.
Works in every current browser (Safari since 2020).
Not so good
Still large here: it compresses each frame mostly on its own, and the see-through layer is stored
without loss.
Not safe for email: Outlook for Windows shows a broken image.
Fixed size, so soft on retina screens.
6
Transparent video (WebM, plus MOV for Safari)
baked
A real video file with a see-through layer (VP9 with alpha). Safari cannot show that kind of
transparency, so Apple devices need a second file in Apple's format (HEVC with alpha, a .mov).
The MOV was made with the open-source x265 encoder and checked by decoding it back
with its transparency intact, but it has not yet been tried on a real iPhone or Mac.
Good
The smallest of the baked versions: video compression is built for motion.
Full colour, soft transparency.
Decoded by the graphics chip on most devices, so it is easy on the battery.
Not so good
Two files to make and keep in sync (WebM for Chrome, Edge and Firefox; MOV for Safari and iPhone).
Can be blocked from auto-playing (for example iPhone Low Power Mode shows a still or a play button).
No email client worth counting plays video. Web only.
Lossy: a little smudging around fine detail. Fixed size.
How big, how fast
Real bytes for the standard logo on light, including everything each demo
needs (for 3: the page snippet, its CSS, the logo and the three flake images). Text files (SVG, HTML, CSS) are
counted as sent compressed by the server. Times assume the connection to the site is already open, and are
simple arithmetic: round trips plus bytes divided by speed.
"First appears" means the first frame is on screen: a GIF, APNG or WebP shows its first frame as
soon as it has arrived; a video once its first frame has arrived; an SVG only once the whole file has arrived;
demo 3 once the page snippet, its CSS and the logo have arrived. For comparison, the plain logo without snow is
. The baked files could be made lighter by cutting the frame rate, the width or
the number of flakes; a GIF flattened onto a solid white background (giving up transparency) roughly halves the
winter one.
Up close: what the pixels look like
Drag the box over the picture (or tap a spot) to choose where to look. Each panel shows the very first frame of
that demo at the same spot, blown up. The baked files are shown pixel by pixel, exactly as stored. The live
versions are redrawn by the browser at the zoomed size, as they would be on a high-resolution screen.
What to look for:
GIF: stair-stepped edges and speckled colour; flakes lose their soft rim.
GIF made for white, on dark: the old fix for jagged edges (blend them into white)
leaves a pale halo on any other background.
APNG / WebP / WebM: smooth, soft edges. WebP and WebM are slightly smudged by compression.
SVG: stays perfectly sharp however far you zoom. Demo 3's logo stays sharp, its flake pictures soften.
Where each one works
Chrome / Edge
Firefox
Safari (Mac)
Safari (iPhone / iPad)
Email clients
1 GIF
Yes
Yes
Yes
Yes
Yes, nearly all. Outlook for Windows 2007 to 2019: first frame only
2 SVG
Yes
Yes
Yes
Yes
No. Gmail and Outlook block SVG; Apple Mail shows it
3 PNG + CSS
Yes
Yes
Yes
Yes
No (needs page code)
4 APNG
Yes
Yes
Yes
Yes
Apple Mail animates; most others show the first frame
5 WebP
Yes
Yes
Yes (since 2020)
Yes (iOS 14+)
Unreliable; Outlook for Windows shows a broken image
6 WebM (VP9 alpha)
Yes
Yes
No see-through layer: needs the MOV
Same: needs the MOV
No
6 MOV (HEVC alpha)
Not used (gets the WebM)
No
Yes
Yes
No
"Yes" means current versions. Logos in email signatures are where most of these fall over:
if it has to animate in email, GIF is honestly the only option, and in older Outlook even that
stops on the first frame, so the first frame should look like a complete logo (ours does).
Battery, motion sickness, accessibility
Video (6) is usually the lightest on battery: phones and laptops decode it on the graphics chip.
Browsers also pause videos that are scrolled out of view.
GIF, APNG, WebP (1, 4, 5) are unpacked frame by frame by the processor, and kept in memory
uncompressed. Fine for one logo, adds up on busy pages.
SVG and CSS (2, 3) make the browser redraw the logo up to 60 or 120 times a second. That
is smoother, and costs a little more power per second on screen. Fewer flakes means less work.
Reduced motion. Some people get dizzy or distracted by moving things and turn on
"Reduce motion" on their phone or computer. Demos 2 and 3 obey that by themselves and freeze. The baked
formats cannot; the web page has to swap in a still picture (this page does: try turning the setting on).
Never-ending motion. Accessibility guidelines (WCAG 2.2.2) ask that anything moving for more
than 5 seconds next to other content can be paused or stops by itself. For a site header, play the snow a
few times and then stop, or offer a pause.
Sharp screens and size
Vector (2) is redrawn at whatever size it is shown, so it is crisp on phones, retina laptops
and 4K monitors, and one file serves every size.
PNG + CSS (3): the logo stays crisp; the flake pictures are 64 pixels and go soft only when
blown up very large.
Baked (1, 4, 5, 6) are a fixed 600 pixels wide. On a
retina screen showing them 600 points wide they look slightly soft. Making them twice as sharp makes them
roughly three to four times heavier.
Recommendation
Where the logo goes
Use
Download size ← smaller is better
Why
Website header (jobot.com)
2 · SVG
Smallest by far, sharp everywhere, turns itself off for reduced motion, no code. Let it run a few loops, then stop.
Website, with fancier flake artwork
3 · PNG + CSS
Any flake artwork, still light and sharp, but a developer has to place it.
Email signature, newsletters
1 · GIF
The only one that animates in most email. Keep it small: fewer frames, fewer flakes, a few loops.
Slack, social posts, slide decks
1 · GIF (or a plain video for social)
Accepted everywhere without questions.
Big hero banner, photographic artwork
6 · WebM + MOV
Best quality per byte for complex motion. Needs two files.
Avoid
4 · APNG, 5 · WebP
Beautiful, but many times heavier than the SVG with no advantage on the web, and not reliable in email.