Vector vs Pixel: The Ultimate Zoom Test
Two formats, one image. Watch what happens when you zoom in...
Two formats, one image. Watch what happens when you zoom in...
These two stars look identical. But they're stored completely differently. Choose a shape and then zoom in to discover the secret...
A pixel (picture element) is the smallest unit of a raster image. Each pixel is just one color. Hover over the zoomed image to see individual pixel colors.
Each tiny square stores a single color value. The more pixels, the more detail - but also more file size!
A 1920x1080 image has 2,073,600 pixels. A 4K image has 8.3 million!
Once you zoom past the original resolution, there's nothing left but blocky squares.
Vectors don't store pixels - they store mathematical instructions. Drag the points below and watch the code update in real-time!
<svg viewBox="0 0 100 100">
<path d="M50,15 L61,40 L88,40 L67,55 L76,82 L50,67 L24,82 L33,55 L12,40 L39,40 Z"
fill="#8b5cf6" />
</svg>Each point is just an X,Y coordinate. Change the numbers, change the shape - at any size!
Since it's math, vectors can scale to any size. Business card or billboard - always crisp!
Which format is smaller? It depends on what you're storing! Click each scenario to see how file sizes compare.
Planning a new project? Answer a few quick questions about what you want to create!
(e.g., same logo for business card AND billboard)
You've discovered why vectors stay crisp forever while pixels eventually break down. Now you know which format to use for any project!
Raster images have a set resolution - zoom in and you see squares.
SVG stores shapes as formulas that can be recalculated at any size.
Simple shapes are smaller as vectors, photos are smaller as rasters.
Use Piskel for pixel art, Graphite for scalable graphics!
Put your new knowledge into practice!