One flyer, two kinds of image

Every image on every screen is one of two things: a raster — a grid of coloured dots — or a vector — a list of instructions for drawing shapes. Most people meet the difference the day a logo prints blurry on a banner. We can meet it somewhere closer to home: the same AgenticGHX flyer, exported both ways by the same pipeline, sitting in our repository.

The PDF is 40% smaller. Now zoom both files into the flyer's biggest word — a placeholder, as it happens — at exactly the same magnification. The words below are the two files rendering the same region of the same design:

From the 843 KB PDF From the 1,421 KB PNG

Tap the buttons to flip between the two files. Same region, same zoom, rendered by the same tool. Look at the edges of the small grey line — the PDF's letters stay clean; the PNG's are already softening, and they only get worse from here.

The smaller file has the sharper text — at any zoom, because instructions can be redrawn at whatever size you ask. That looks like a clean victory for vector. It is about 80% of one, and the missing 20% is the most useful part of this page.

A raster image stores no shapes, no letters, no "background" — only a grid of pixels, and for each pixel, numbers: how much red, green and blue. That is the entire representation. Here is an actual window of the PNG, 22 pixels wide, taken where the big word meets the background — tap any pixel to read its real stored values:

Multiply the grid out and you get the file's true weight. Three bytes per pixel, before any trickery:

This is why raster images have a native size. The grid is the picture. Display it bigger than the grid and something has to invent the missing dots — which is the softness you saw in Section 0.

A vector image stores what you meant: rectangles, curves, text, colours — as instructions a renderer executes at whatever size it is asked. The national flag of Ghana, as an SVG our build script generates, is short enough to read in full. This is the entire file:

loading flag.svg…

— · the SVG above, drawn at any size from the same bytes

— · a 150 px PNG of the same flag, stretched to match

Scale 300px

Drag the slider. The SVG side re-executes its four drawing instructions at the new size — edges stay perfect. The PNG side has only its 150×100 grid of dots, so the browser stretches them into visible blocks. Neither file changes; only the size you demand of it.

The byte economics follow directly. Those 398 bytes of SVG draw a flag at billboard size. A PNG of the same flag at just 1620 pixels wide costs 14 KB — 36× more — and still has a native size it cannot exceed. When a design is made of shapes, flat colour and text, instructions beat dots by orders of magnitude.

Now for the quotes around "vector". Our flyer PDF was produced by Chrome's print-to-PDF from an HTML design. Opening it up and listing what is actually inside:

So the honest anatomy is: the words are instructions, the pictures are pixels — CSS gradients and effects got flattened into 72 DPI images at print time, and the speaker photo was embedded at exactly the 323×404 pixels it arrived as. Which makes a prediction: zoom into the photo in both files, and the PDF's advantage should vanish completely. Same region, same zoom, once more:

From the PDF From the PNG

the speaker photo, both files, same zoom

Flip between them. No amount of tapping makes one sharper: both files bottom out at the same 323×404 photo. The PNG's copy is a little smoother, the PDF's a little blockier — different resampling of identical information.

That is the general law hiding in this flyer: a file format cannot add information. Text survives in the PDF because the instructions were never lost. The photo is identical in both because both inherited the same pixels. And the gradients are worse in the PDF than the PNG because the print pipeline rasterized them early, at 72 DPI. "Is it a vector file?" is the wrong question — the right one is "what happened to each layer on the way in?"

Formats are just containers for one family or the other — plus rules about compression. The raster ones differ mainly in what they throw away. Here are the same pixels through every mainstream encoder — toggle between our two specimens, because the winner changes:

You rarely choose a family; the tool chooses it the moment the image is born. Cameras can only measure light on a grid — the world arrives as raster. Design tools work in shapes — designs are born vector, even when their users never hear the word:

Edit a vector and you edit the instructions: move a point, retype a word, change fill="#ce1126". Nothing else is touched, and nothing decays. Edit a raster and you overwrite the numbers in the grid. Every filter you have ever used is arithmetic on that grid — most of them are a tiny matrix called a kernel, slid across every pixel, replacing it with a weighted mix of its neighbours:

Because raster edits overwrite the grid, what matters is what happens when you save. With a lossless format, nothing. With JPEG, each save re-approximates the image — and the folk wisdom says every save compounds the damage. We measured it, and the folk wisdom is half right. Twenty-five re-saves of the speaker photo at quality 85, two ways:

The mechanism: JPEG compresses in 8×8 pixel blocks. Open a JPEG and re-save it unchanged and the blocks line up, so the encoder mostly re-makes the same decisions — after 25 saves our photo had lost just 0.17 dB. But crop, rotate, screenshot or re-frame between saves and the block grid moves: every save becomes a first save on fresh data. One pixel of drift per generation cost 12.2 dB — the error grew roughly four-fold — and each additional share keeps digging. That is the real reason a flyer that has been through a few rounds of forwarding-with-edits looks the way it does.

Vector → raster is called rasterization, and it is routine: pick a resolution, execute the instructions, keep the dots. It happens every time a vector is displayed at all — your screen is a raster device. Ask our one PDF for the flyer at four different resolutions:

Raster → vector is a different animal. The instructions were never in the file, so software has to guess them from the dots — it is called tracing, and here is the standard tool, potrace, run on both our specimens:

The flyer, traced — — of SVG. The letterforms survive as shapes (they were shapes once); every photo, gradient and colour is gone.

The photo, traced — — of SVG. Infinitely scalable, perfectly crisp, and the photograph is simply no longer in it.

potrace 1.16 in its standard single-threshold black-and-white mode. Colour tracing exists and does better on flat-colour art — on photographs it produces the same lesson with more steps.

So the door only swings one way. Keep sources vector for as long as possible; rasterize as the last step, per destination — and when someone hands you a JPEG of a logo and asks for "the vector version", you now know that is a redraw job, not a conversion.

This page's plan had a cleaner story in it, and the measurements broke it in two places. Both corrections taught more than the draft would have.

Wrong the first time: the headline. The draft said the PDF was "863 KB and sharp at any size." Twenty lines of inspection code killed the second half: six embedded raster layers, full-page ones at 72 DPI — the "sharp at any size" file carries pictures at about a third of the PNG's resolution, and the photo zoom in Section 3 shows the two files bottoming out identically. The lesson that replaced the headline is better than the headline: vector-ness is a property of layers, not of files, and the only way to know what a file really holds is to look inside it.

Wrong the second time: I expected tracing to bloat. The plan predicted the traced photo would "explode" into a huge SVG. The opposite happened — 35 KB of SVG against the photo's 57 KB of JPEG, a smaller file. What exploded was the information, not the bytes: the trace is crisp, scalable and no longer a photograph. A smaller file had destroyed the image. That corrected a lazy equation this page might otherwise have taught you: file size is not fidelity — in either direction.