Choosing Export Format for a Web Hero Animation
A designer has built an animated hero graphic in Illustrator: a logo with a looping pulsing glow, plus a short 2-second reveal of three icons. The site's hero area is 1440 × 600 px. The developer needs the asset to load fast on mobile, support transparency, and scale crisply on high-DPI screens. The designer is considering three exports: an animated GIF, an SVG with CSS animation, or a PNG sprite sheet. The pulsing glow uses a soft radial gradient. The icons are flat vector shapes. Mobile users are on constrained connections.
1. Evaluate the three export options against the requirements (speed, transparency, high-DPI crispness) and recommend one, with reasoning.
Read the worked answer
- Animated GIF: supports transparency only as 1-bit (on/off), so the soft radial glow will band badly and show halos. GIF is also large for a 1440 × 600 area and does not scale crisply on high-DPI. Poor fit.
- PNG sprite sheet: supports full alpha transparency and high-DPI via 2x assets, but a 1440 × 600 sprite sheet is heavy on constrained mobile connections, and the designer must hand-author animation frames. Workable but not ideal for speed.
- SVG with CSS animation: vector, so it scales crisply at any DPI; transparency is native; file size is small because shapes are described, not rasterized. The soft radial gradient can be reproduced as an SVG radial gradient. This is the best fit for the flat icons and the glow.
Recommend SVG with CSS animation as the primary asset, with a static PNG fallback for browsers or contexts that cannot run the animation. The SVG's small size directly addresses the mobile speed constraint.
2. The developer reports that the SVG's CSS animation causes layout jank on low-end phones, and the client wants a guaranteed fallback. What do you deliver and how do you document it?
Read the worked answer
Deliver a two-tier package:
- Animated SVG as the enhancement, with the animation driven by CSS transforms/opacity (compositor-friendly properties) rather than layout-affecting properties, to reduce jank.
- Static high-DPI PNG (at 1x and 2x) of the final frame as the guaranteed fallback, with full alpha for the glow.
Document the handoff: file names, dimensions, the 1x/2x pairing, which asset is primary vs. fallback, and the intended <picture>/CSS strategy so the developer can wire the fallback. Note the color space (sRGB) and that the PNG was exported with transparency. Archive both source files and exports with a short README so the decision is reproducible.