Vector vs raster: what actually ships on a website

When a landing page needs motion, the file type is not a taste choice. It decides whether the graphic stays sharp on a 3× display, how heavy the first paint is, and whether you can recolor or hook the scene in code. The split is simple: vector describes shapes; raster stores a grid of pixels.

Raster: a picture of the drawing

PNG, JPEG, GIF, WebP stills, and most video frames are raster. The file is a bitmap — color values for each pixel at one size. Scale it up and the computer invents extra pixels. That is why a 400 px icon looks soft on a retina screen, and why a GIF “animation” is really a stack of bitmaps.

• Strengths: photos, film grain, complex 3D renders, anything that is already pixels.
• Costs: file size grows with resolution and frame count. A looping GIF or a 1080p hero MP4 is often heavier than the rest of the page.
• Motion: video and GIF play back frames. You cannot restyle a layer or swap a color without a new export.

Vector: instructions for the drawing

SVG and Lottie (when the scene is vector-first) store paths, fills, and transforms. The browser redraws the geometry at whatever size the layout needs. A 24 px icon and a 720 px hero can be the same file. That is why UI icons, logos, loaders, and flat product scenes belong here.

• SVG is markup in the DOM (or a file the browser paints). You can target layers with CSS, change color, and keep the file tiny when the art is simple.
• Lottie is usually a JSON export from After Effects (Bodymovin). Playback uses a small player (`lottie-web`, a React wrapper, or Webflow’s Lottie element). Same idea: geometry + keyframes, not a video.
• dotLottie is a compressed bundle of that JSON (and assets) when the file is large.

What this means for a marketing site

Use raster when the frame *is* a photograph or a long explainer with voice — that is explainer video territory (MP4). Use vector when the job is a hero loop, a tab state, an icon, or a loader. Those pieces should stay crisp next to type and UI, not smear like a scaled PNG.

• A 2 MB hero MP4 can be the right call for a 30-second story. It is the wrong call for a 4-second icon loop.
• A raster image *inside* a Lottie (a PNG composition) turns that Lottie into a video-shaped download. The JSON wrapper does not make pixels cheap.
• Native SVG is often lighter than Lottie for a simple bounce or draw-on. Lottie wins when the motion has many layers or an AE timeline you already trust.

A quick rule

If you can still describe the picture as shapes and colors, keep it vector — Lottie or SVG. If you need the look of a camera or a painted texture, ship raster (compressed still or MP4) and do not pretend JSON will save the weight. If the brief sounds like a classic cartoon (every gesture drawn by hand), read frame-by-frame vs keyframes next — then how to keep those files from stalling the page.