Raster and vector are the two ways a computer can hold an image, and almost every practical question about picture quality, file size and editing traces back to which one you are dealing with. Designers absorb the distinction early; everyone else tends to meet it the hard way, when a logo comes out blurry on a banner or a "small" graphic turns out to be a five-megabyte file. This guide makes the difference concrete and tells you which to use for what.
The good news is that the core idea fits in a sentence, and everything else follows from it logically rather than by memorisation.
The one-sentence difference
Raster stores an image as a grid of coloured pixels. Vector stores it as instructions for drawing shapes. Every other difference, how they resize, how big they are, whether you can edit them, comes straight out of that.
An analogy that holds up: a raster image is a mosaic, made of fixed tiles you cannot subdivide, while a vector image is a recipe that can be re-cooked at any size. Blow the mosaic up and you just see bigger tiles. Re-cook the recipe larger and it comes out just as sharp.
Raster: a grid of pixels
A raster image is a rectangle of pixels, each holding one colour. A 1000 by 1000 PNG contains a million of them, and to display it the computer simply paints the grid. This is the natural way to store anything with continuous tone: photographs, and any image with texture and thousands of subtly shifting colours, because every single pixel is free to be different.
The catch is that the detail is fixed at the moment of capture. There are only so many pixels; ask for more and the software has to invent them by guessing what belongs between the ones you have, which is why enlarging a raster looks soft or blocky. The common raster formats are JPG, PNG, GIF, WebP, HEIC, BMP and TIFF. Every camera photo and every screenshot you take is raster.
Vector: a set of instructions
A vector image describes shapes instead of pixels: a line from this point to that one, a circle of this radius, filled with that colour. The renderer draws them fresh every time the image is shown. That makes vector the natural fit for logos, icons, illustrations, diagrams and typography, anything built from defined edges and flat or simple colour.
Because it is a set of instructions rather than a fixed grid, a vector image is resolution-independent: the same file draws sharp at sixteen pixels in a browser tab or across a printed billboard. The everyday vector formats are SVG, which is the one built for the web, along with EPS, AI and PDF, and fonts are vector too. The what is an SVG file guide goes deeper on the web format specifically.
What happens when you resize
This is the difference you actually feel. Enlarge a raster and the pixels show through: edges go jagged or blurry, because there is no more real detail to reveal, only the software's guesses. Shrink it and you throw detail away permanently. Enlarge a vector, and the renderer simply recalculates the shapes at the new size, so the edges stay razor sharp at any scale, larger or smaller.
Picture a logo blown up five times for an exhibition banner. As a raster it looks fuzzy and unprofessional; as a vector it is perfectly crisp. This single behaviour is why every brand guideline insists on a vector version of the logo, and why "can you send the vector" is such a common request from printers and agencies.
File size behaves differently
Raster file size scales with the number of pixels and the colour depth. Double the width and height and you roughly quadruple the pixel count, so a large photo is an inherently large file. Vector file size scales with complexity instead, the number of shapes and points, and is completely independent of the display size. A simple logo is a couple of kilobytes whether you show it at twenty pixels or two metres.
So there is a crossover. For a simple graphic, vector is dramatically smaller, often by an order of magnitude. For a photograph, vector is a disaster, because tracing one produces thousands of shapes and a file far bigger than the original, while raster stays compact. The PNG to SVG guide covers that trap in detail; the short version is that file-size logic runs in opposite directions for simple graphics and for photos.
Which formats are which
Sorting the common formats into the two camps clears up a lot of confusion:
| Format | Type | Best for |
|---|---|---|
| JPG | Raster | Photographs |
| PNG | Raster | Graphics with transparency, screenshots |
| GIF, WebP | Raster | Web images, simple animation |
| SVG | Vector | Icons, logos, web graphics |
| EPS, AI | Vector | Print, design source files |
| Both | Documents, can hold vector and raster together | |
| TrueType, OpenType fonts | Vector | Type |
One trap to name explicitly: placing a JPG inside an SVG does not make it a vector. It is still a raster image, just wrapped in a vector container, and it resizes exactly as badly as the JPG did on its own.
Which to use, and when
The decision is usually straightforward once you know what the image is:
| What you have | Use |
|---|---|
| A photograph for the web | Raster, WebP or JPG |
| A logo or icon | Vector, SVG |
| An illustration with flat colours | Vector, SVG |
| A screenshot | Raster, PNG |
| Anything printed large or for signage | Vector |
| Anything needing many sizes from one file | Vector |
| An image with gradients, texture or fine detail | Raster |
| A UI icon that must recolour with CSS | Vector, SVG |
The short version is: photos raster, graphics vector. When a graphic exists as both, prefer the vector for the web unless it is genuinely photographic. And if you need a UI icon that changes colour on hover or in dark mode, it has to be an SVG, because only a vector can be restyled with CSS, as the using SVG icons and changing icon colour guides show.
Frequently asked questions
Ready to put a vector to work on a page? See what an SVG file is and how to use SVG icons in HTML.
Have a raster you need as a vector? Read PNG to SVG, including the cases where you should not convert at all.