Learn Graphics
Every image on the web is built one of two fundamentally different ways — as a fixed grid of colored pixels or as a set of mathematical shapes — and knowing which is which shapes almost every graphics decision you'll make.
Two Ways to Describe a Picture
Underneath every image format sits one of two completely different ideas about what a picture actually is. A raster image is a grid of colored squares (pixels) — like a mosaic where every tile's color was decided in advance and baked into the file. A vector image is a set of instructions — draw a circle here with this radius, fill this path with blue — that get recalculated and redrawn every time the image is displayed.
That difference sounds abstract until you scale something up. A digital photo is raster: it was captured as millions of individual pixel readings from a camera sensor, and that's the only information the file contains. A logo built in a vector tool like Illustrator or Figma is stored as coordinates and curves, so the software can regenerate it at any size on demand.
What Happens When You Scale Each One Up
Enlarge a raster image past its native resolution and the computer has no new detail to draw from — it can only stretch or duplicate the pixels that already exist, which is why blown-up photos look blurry or blocky (pixelated). A vector shape has no native resolution at all. Ask for it at 16 pixels or 1600 pixels, and the renderer just re-solves the same math at a bigger scale, so the edges stay crisp either way.
- Raster images are resolution-dependent — quality is fixed the moment the file is created.
- Vector images are resolution-independent — quality adapts to whatever size they're displayed at.
- Raster file size scales with pixel count and detail (a 4K photo is much bigger than a thumbnail).
- Vector file size scales with shape complexity, not display size — a simple logo stays small no matter how large it's rendered.
Why You Can't Just Pick One Forever
Neither format is 'better' — they solve different problems. A vector renderer has no way to represent a sunset photo's continuous gradient of a million subtly different colors; it would need an enormous number of shapes to fake it, defeating the purpose. Likewise, a raster file can't represent a company logo that needs to print on a business card and a billboard from the same source file without someone re-exporting it at a new resolution.
This Course Covers Both in Depth
This introductory lesson only compares the two models conceptually. If you want to actually build vector graphics or manipulate raster pixels in the browser, this site has full, separate SVG and Canvas tutorials that cover the real syntax, elements, and APIs step by step.
Frequently Asked Questions
- What is the difference between raster and vector graphics?
- Raster images store a grid of pixels, so photographs suit them and enlarging one loses detail. Vector images store shapes as maths, so they stay sharp at any size, which suits logos, icons and diagrams but not photographs.
- Which image format should I use on the web?
- WebP or AVIF for photographs, because both compress far better than JPEG at similar quality. SVG for logos, icons and anything geometric. PNG when you need lossless detail or transparency and the newer formats are not an option.
- Why are my images making the page slow?
- Almost always because they are larger than they are displayed. Export at the size actually used, choose a modern format, and let the browser skip offscreen images with lazy loading. Image weight is usually the biggest single win on a slow page.
