What are raster graphics?

Images composed of a grid of colored pixels. Common formats include JPEG, PNG, GIF, and TIFF. They lose quality when scaled up.

What are vector graphics?

Images defined by mathematical paths and curves. Common formats include SVG, AI, and EPS. They scale infinitely without quality loss.

When to use raster vs vector?

Use raster for photographs and complex imagery with many colors. Use vector for logos, icons, typography, and anything that needs to scale to different sizes.

Concept

Raster vs Vector

What is the difference between raster and vector graphics?

Two fundamental approaches to digital graphics. Raster images are composed of a grid of pixels (e.g. photos, JPEG, PNG), while vector graphics are defined by mathematical paths (e.g. logos, SVG, AI) and can scale infinitely without quality loss.

In short

Raster graphics store images as pixel grids (resolution-dependent), while vector graphics use mathematical paths (resolution-independent). Photos are typically raster; logos and icons are typically vector.

Key facts

What are raster graphics?: Images composed of a grid of colored pixels. Common formats include JPEG, PNG, GIF, and TIFF. They lose quality when scaled up.
What are vector graphics?: Images defined by mathematical paths and curves. Common formats include SVG, AI, and EPS. They scale infinitely without quality loss.
When to use raster vs vector?: Use raster for photographs and complex imagery with many colors. Use vector for logos, icons, typography, and anything that needs to scale to different sizes.

Raster Graphics

Raster images (also called bitmap images) represent graphics as a rectangular grid of pixels. Each pixel stores color information. The total number of pixels determines the image resolution — more pixels means more detail, but also larger file sizes. When a raster image is scaled beyond its native resolution, it becomes blurry or pixelated. Common raster formats include JPEG (lossy compression, ideal for photos), PNG (lossless with transparency support), GIF (animation support, limited colors), and TIFF (high-quality print).

Vector Graphics

Vector graphics describe images using mathematical formulas — points, lines, curves, and shapes defined by coordinates and equations. Because they are resolution-independent, vectors can be scaled to any size without losing quality. This makes them ideal for logos, icons, typography, and illustrations. Common vector formats include SVG (web-native, XML-based), AI (Adobe Illustrator), EPS (legacy print standard), and PDF (can contain both vector and raster elements).

In Practice

Modern design workflows typically combine both approaches. A brand system might use vector files for the logo (ensuring crisp rendering at any size) alongside raster photography for campaign imagery. Design tools like Figma and Adobe Illustrator work primarily with vectors, while Photoshop is built around raster editing. Understanding when to use each format is a foundational skill covered in Agency's Design.1 edition.

Sources

Design.1 — Pixels, Colors and Screens (opens in a new tab)