Vector vs raster: a practical guide

Two ways to describe an image

Raster images, such as PNG, JPG and WebP, are grids of pixels. Vector images, such as SVG, describe shapes with math, so they stay sharp at any size.

Logos and icons are usually vectors. Photos are always raster.

A raster image has a fixed number of pixels. When you enlarge it, software has to invent new pixels between the old ones. That can blur edges or show blocks. A vector renderer redraws the shapes for each size, so clean artwork stays sharp.

Vectors are not always smaller. An SVG with thousands of points, embedded images, filters or leftover editor data can be bigger than a compact PNG. How complex the image is and how big it will be shown decide which file works better.

When to rasterize

Many apps can't show SVG, including some email clients, older editors and social platforms. Rasterizing to PNG at the size you need makes a vector image work everywhere.

Pick a scale that fits where the image will go. Use 2x for most screens and 4x for high-density screens or print.

Start from the size the image needs in CSS pixels or on paper, then account for the screen's pixel density. Exporting at 4x without a reason wastes bytes. Exporting at exactly 1x can look soft on a high-density screen.

Use PNG when you need transparency or clean, lossless edges. Consider WebP when the destination supports it and the artwork has texture. JPG is usually a poor choice for logos, since it has no transparency and blurs sharp color edges.

Going back is hard

There is no reliable automatic way to turn a photo-like PNG back into clean vectors. Tracing tools exist, but the result rarely matches a hand-made SVG.

Design in vector when you can. Rasterize only as the final export step.

Automatic tracing guesses where color edges are and draws paths along them. That can work for a high-contrast logo or a simple line drawing. On photos it creates huge, messy paths that are hard to edit and often larger than the original image.

If a logo only exists as a small PNG, look for the original design file before you trace it. Redrawing simple shapes by hand gives fewer points, cleaner curves and more predictable results than an automatic trace.

Preparing SVG for the web

Set a correct viewBox, remove leftover editor data and test the SVG at small and large sizes. Inline SVG can be styled with CSS and carry accessible text in the page. An SVG loaded as an image file is easier to cache and keeps its markup separate.

Treat SVG from an unknown source as code. The format can contain links, scripts and references to outside files. Sanitize uploaded SVGs before you embed them. If nobody needs to edit the file, rasterize it in an isolated tool.

Give the image alt text when it carries meaning, and an empty alt when it is only decoration. A sharp image is not accessible by itself. The markup around it still has to explain what it is for.