Raster graphics and vector graphics: Resolution, dpi and image formats

In short: Raster graphics consist of pixels and become blurry when enlarged, vector graphics consist of formulas and stay sharp; a different image format suits each goal.

In more detail: Images are stored in the computer in two ways. Whoever knows the difference chooses the right format for photo, logo, website and print.

In Depth

Raster (pixels)

An image is a grid of pixels, each with a colour. Advantages: ideal for photos, fine gradients. Disadvantages: file size grows with resolution (width × height), on enlarging blur or stair-stepping appears. Example: Full HD = 1920 × 1080 pixels (≈ 2 megapixels); 12 megapixels correspond to about 4000 × 3000. Editing: GIMP, Photoshop, Krita, Affinity Photo.

Vector (formulas)

The image consists of shapes, lines, curves and colours described as numbers. Advantages: scalable at will, small files for simple motifs, good for logos, icons, diagrams. Disadvantages: unsuitable for photos. Editing: Inkscape, Illustrator, Affinity Designer, Figma. Format: SVG (on the web, usable directly in HTML and stylable with CSS), PDF/EPS (print).

Resolution and dpi

ppi/dpi (pixels or dots per inch) describes the density. Screen: about 72 to 150 ppi (Retina/phone 300 to 500). Print: 300 dpi counts as good quality (example: 10 × 15 cm at 300 dpi ≈ 1181 × 1772 pixels). For websites the pixel dimensions matter, not dpi; supply 2× resolution for Retina screens (srcset).

Important image formats

• JPEG/JPG: lossy, photos, small files, no transparency.
• PNG: lossless, transparency, graphics, screenshots.
• WebP, AVIF: modern formats, smaller than JPEG/PNG at the same quality (AVIF even smaller).
• GIF: 256 colours, simple animation (today often replaced by video/WebP).
• SVG: vector. TIFF: lossless, print/archive. RAW (camera raw data), HEIC (iPhone). Rules of thumb: photos → JPEG/WebP/AVIF, logos/icons → SVG, screenshots/transparency → PNG/WebP, print → PDF/TIFF. Compress for the web, set alt texts and mind rights (copyright).

See also: JPEG, WebP, SVG vector graphics, Image compression, Colour spaces