Same picture. Completely different math.

How pixel graphics store an image

A pixel image is literally a grid. A 1920×1080 image stores 2,073,600 individual pixels, each with a colour value (typically 24 bits — 8 bits each for red, green, blue) plus optional 8 bits of alpha. The image ‘is’ the pixel data.

Compression (PNG, JPG, WebP) reduces the on-disk footprint but doesn’t change the underlying model — when you open the file, you still get a 1920×1080 grid of pixel values to work with. The image has a fixed resolution baked in at capture or creation time.

How vector graphics store an image

A vector image is a sequence of drawing instructions. A logo might be: ‘start at (10, 10), draw a Bézier curve to (50, 80) with control points at (20, 30) and (40, 70), fill the resulting region with hex #00B74A.’

The file stores the instructions, not the image. When you open it, the renderer (browser, plotter, CNC) walks the instruction list and draws the result at whatever output size you ask for. The instructions don’t change; the rendering does.

The scaling math

Take a 200×200 pixel logo and ask the browser to display it at 2000×2000. There are 4,000,000 pixels to draw but only 40,000 in the source. The browser has to invent the other 3,960,000 via interpolation — usually bilinear or bicubic, which produces blurry edges. The actual information density of the image at 2000×2000 is still 200×200; you just stretched it.

Take the same logo as vector and render at 2000×2000. The math is recomputed at the new resolution — each curve segment is evaluated to fit the 2000×2000 grid exactly. Edges stay crisp because the renderer is using the full output resolution from scratch.

File size and compute trade-offs

Pixel and vector formats trade space against time. Pixels are cheap to render (just blit the grid to screen) but expensive to store at high resolutions. Vectors are cheap to store but require computation at render time.

DPI, resolution, and why vector ignores both

DPI (dots per inch) is a pixel-format concept. It describes how many pixels per inch of output the file should occupy. A 1200×1200 image at 300 DPI prints at 4×4 inches; at 72 DPI it prints at ~16.7×16.7 inches but looks pixelated on print because there’s only 72 pixels per inch of detail.

Vector files have no DPI — the math renders at whatever pixel density the output device asks for. A vector logo prints at 300 DPI just as cleanly as at 72 DPI as at 4800 DPI (offset press). The pixel-vs-vector divide is also a DPI-vs-resolution-independent divide.

Anti-aliasing — the visible compromise

When a vector renders at a low output resolution, the curves get sampled onto a coarse pixel grid. The renderer uses anti-aliasing — partially-transparent pixels along edges — to make the curve look smooth. At higher output resolutions, the anti-aliasing footprint shrinks and the edge looks sharper.

Pixel images already have anti-aliasing ‘baked in’ at source resolution. When you upscale them, the baked anti-aliasing pixels grow proportionally and become visible as fuzzy edges. There’s no way to add more anti-aliasing to a pixel image without redrawing — the source resolution is a hard ceiling.

When each wins — by content type

Photographic content

Pixel always. Vector can’t represent the millions of subtle tone variations a camera captures. Even AI vectorizers produce stylised interpretations, not faithful photo reproduction.

Logos and brand marks

Vector always. They need to scale from favicon to billboard without re-mastering.

Icons and UI graphics

Vector. SVG icon sets render crisp at every screen DPI; pixel icons need multiple resolution variants (1×, 2×, 3×).

Production cut paths (vinyl, CNC, laser)

Vector. The cutting tool needs path geometry, not pixel data.

Embroidery digitizing source

Vector. Stitch-friendly geometry comes from clean vector paths.

Screenshots and screen captures

Pixel. The source is pixel-native (your screen).

Mixed photo + type (magazine ads, posters)

Both. Pixel for the photo, vector for type and graphic elements. Combined in a PDF/X-4 for print or a layered PSD/AI for editing.