Pixels vs vector: choosing images for screens and print

Side by side

The difference is the stored description

Imagine drawing a red circle. A raster file stores colored samples arranged in a grid, including the samples around the edge. A vector description can specify the circle’s center, radius, and fill. A renderer turns that description into pixels when it displays the circle on a screen.

This last step matters: vector artwork still appears through pixels on an ordinary display. Its advantage is that the renderer can calculate a fresh representation at a different size. Raster artwork starts with an existing set of samples. Enlarging that set cannot, by itself, recover scene detail that was never captured.

MDN’s introductory material distinguishes these two representations and identifies SVG as a web vector format. Common raster formats include JPEG and PNG, although format names also carry choices about compression, transparency, and other features. Those choices are separate from the fundamental difference between a pixel grid and shape geometry.

Worked example: a workshop poster

Suppose a local workshop needs a poster containing a photograph of a wooden chair, a circular logo, and a simple assembly diagram. Treating the whole poster as one image too early makes later revisions harder. Keep the photograph as raster content and the logo and diagram as editable vector shapes in the working document.

The photograph contains grain, shadows, reflections, and many small color changes. Replacing each detail with shapes would require considerable complexity and might produce an intentionally stylized result. The logo, by contrast, may need only a circle, a short word, and a few paths. Its geometry can be reused on a small handout and a large sign.

For a print example, assume the printer requests 300 pixels per inch for the photograph at its final placement size. A photograph placed six inches wide then needs 6 × 300 = 1,800 pixels across. If it is placed four inches high, it needs 4 × 300 = 1,200 pixels vertically. These numbers follow the assumed requirement; 300 is not a universal rule for every printing method or viewing distance.

Now suppose the available crop is only 900 pixels wide. At six inches, it provides 900 ÷ 6 = 150 pixels per inch. You could use a smaller placement, find a larger source, or discuss acceptable quality with the printer. Changing a metadata field from 150 to 300 without adding samples does not create additional photographic detail.

Worked example: the same assets on a website

The website displays the chair photograph at 600 CSS pixels wide. On a screen with a device pixel ratio of two, a 1,200-pixel-wide source can supply two image samples per CSS pixel across that placement. This is a planning example; responsive layouts, browser selection, compression, and screen characteristics all influence the delivered result.

The circular logo can be supplied as SVG when the publishing system supports it. It can then render at several sizes without requiring a separate raster export for every dimension. Still inspect it at small sizes: a mathematically clean hairline or tiny letter can become hard to read. Scalable geometry does not automatically create a legible icon.

For the photograph, compare an appropriately sized export with the original at the actual display size. Look at the chair’s fine edges and the transitions in its shadow. Reducing the dimensions or applying stronger lossy compression can save transfer bytes, but excessive reduction may erase useful detail. Keep the original as an editing source and publish a separate export.

Why a vector extension can be misleading

The W3C SVG specification allows an image element to refer to raster images such as PNG and JPEG. Therefore, an SVG file can consist largely of a photograph placed inside a vector document. Enlarging the container does not convert the photograph’s pixels into recovered geometry.

Imagine receiving an SVG logo that looks blurry when enlarged. Open it in a suitable editor and inspect the objects. If the whole logo is one embedded bitmap, request the original paths or recreate the artwork from an authorized source. Renaming logo.png to logo.svg does not perform any conversion; the contents still have their original format.

Automatic tracing can turn visible boundaries into paths, but it estimates shapes from the supplied pixels. With a small blurry source, the result may contain wobbly edges, distorted letters, or too many points. Use tracing when that interpretation is acceptable, and inspect the result. It is not a reliable way to reconstruct an unavailable original exactly.

Prepare an export that fits the destination

Ask what the receiving system accepts before choosing an export. A website content manager may allow PNG and JPEG but reject SVG uploads. A print provider may request a PDF with particular color and font handling. A presentation application may import vectors while changing unsupported effects. Keep the editable source separate from the delivery file so you can produce a different export later.

Check transparency against both light and dark backgrounds, and inspect strokes near the edges of the canvas. For a diagram, verify that labels remain readable at the final size. For a photograph, check the crop as well as sharpness: a technically sufficient pixel count does not help if the subject is cut off.

Do not assume vector means a smaller file. A simple mark may be compact, while a complex traced photograph can require many paths. An embedded high-resolution bitmap can also dominate a vector document’s size. Compare actual exports and rendering behavior for the intended destination.

• Retain an editable master and export a separate delivery copy.
• Check final dimensions, crop, transparency, and text legibility.
• Confirm the recipient can open the file and sees the expected artwork.

Common questions