VectorvsRaster

Two fundamentally different ways to store an image — drag the slider, sort the formats, then test yourself.

Raster images are a grid of colored pixels — like a mosaic. Every pixel's color is stored individually, so detail is capped by resolution. Vector images are stored as math — points, curves, and paths — so they redraw perfectly at any size.

Try it out

Hover to zoom

Move your mouse (or finger) over each picture — a loupe shows what's really underneath.

Vector

Raster

Reference

Side by side

Aspect	Vector	Raster
Made of	Points, lines, curves, and fills defined by math	A fixed grid of pixels, each with its own color
Scaling	Infinitely resizable, always sharp	Loses quality / pixelates when enlarged
File size	Usually small, scales with shape complexity	Scales with resolution and dimensions
Best for	Logos, icons, illustrations, print layouts	Photos, textures, complex color gradients
Editing	Edit individual shapes/paths non-destructively	Edit pixels directly (dodge, burn, filters)
Realism	Harder to achieve photographic detail	Naturally suited to photographic detail

Test yourself

Sort the formats

Drag each extension into the zone where it belongs.

0 / 10 sorted correctly

.svg

.ai

.eps

.jpg

.png

.gif

.tiff

.webp

.bmp

.pdf

All sorted. Nice work.

Format reference — all 9 file types explained

.svg — Scalable Vector Graphics (vector): Shapes described in XML/math, so it stays perfectly sharp at any size. The standard choice for icons and web logos.
.ai — Adobe Illustrator (vector): Adobe Illustrator's native format — full vector editing with layers and effects. The professional standard for vector design work.
.eps — Encapsulated PostScript (vector): An older but widely supported vector format, often used to hand off artwork between different design apps.
.jpg — JPEG (raster): A compressed raster format built for photos — lossy compression shrinks the file by discarding detail you rarely notice.
.png — Portable Network Graphics (raster): A lossless raster format with real transparency support — common for web graphics, screenshots, and UI assets that need clean edges.
.gif — Graphics Interchange Format (raster): A raster format capped at 256 colors, but with built-in support for simple looping animation.
.tiff — Tagged Image File Format (raster): A high-quality raster format, often uncompressed — the choice for professional photography and print production.
.webp — WebP (raster): A modern raster format with strong compression plus transparency and animation support — increasingly the default for the web.
.bmp — Bitmap (raster): An old, largely uncompressed raster format from Windows — simple, but the files get big fast.
.pdf — Portable Document Format (either): Can hold vector content (text, drawn shapes) that stays crisp at any zoom, or raster content (a scanned page, an embedded photo) that behaves like a regular pixel image — sometimes both in the same file.

Get a recommendation

When to use which

Click what you're making, and we'll tell you what to use.

Pick a scenario above to get a recommendation.

Which format for which job — all scenarios

Design a logo → Vector (.svg, .ai): Logos get resized constantly — business card to billboard. Vector redraws from math at every size, so it stays crisp no matter how big or small it goes.
Edit a vacation photo → Raster (.jpg, .tiff): A camera captures a fixed grid of pixels. Photo editors like Lightroom or Photoshop work directly on those pixels — that's raster territory.
Build app or UI icons → Vector (.svg): Icons need to render sharp across dozens of screen sizes and pixel densities. Vector scales cleanly to every one from a single file.
Print a billboard ad → Vector (.svg, .eps): Billboards are enormous. A raster file big enough to stay sharp at that size would be huge — vector renders perfectly crisp at any scale.
Retouch a portrait → Raster (.jpg, .tiff): Smoothing skin, adjusting lighting, healing blemishes — all of that is pixel-by-pixel editing, which only raster images support.
Digitize a scanned document → Raster (.png, .tiff): A scanner captures a grid of pixels, just like a camera — even if the original page had crisp printed text, the scan itself is raster.
Draw a flat illustration → Vector (.svg, .ai): Clean shapes and lines are easy to build as vector paths, and they stay editable and resizable without ever losing quality.
Paint a detailed texture → Raster (.png, .jpg): Brush strokes, gradients, and painterly detail rely on rich pixel-level variation — that level of texture is what raster is built for.
Take a screenshot → Raster (.png): A screenshot captures the exact pixels shown on your screen at that moment — it's raster by definition.

Check your knowledge

Quick quiz

Score: 0 / 4

Quick test: if you can zoom in forever without it going blurry or blocky, it's vector. If you eventually see squares, it's raster.