Raster vs Vector, Resolution & Image Quality

Every image that goes to a printing press is, at heart, one of two things: a grid of colored dots, or a set of math instructions. Knowing which is which — and how each behaves when you scale, edit, and output it — is the single biggest skill that separates print files that come out crisp from files that come out blurry. This section starts from "what is a pixel" and builds all the way to the layer math your designer tool quietly performs before it hands a file to the printer.

6.1 Two ways to describe a picture: raster and vector

Before any definitions, the core split:

Raster (also called bitmap)

A picture stored as a grid of pixels. A pixel ("picture element") is one tiny square that holds a single color value. The whole image is just rows and columns of these squares. Because the number of pixels is fixed the moment the image is created, raster is resolution-dependent — the detail is baked in and can never be increased later. Common formats: JPEG, PNG, TIFF, PSD, GIF, BMP, RAW. Made by cameras, scanners, and Photoshop. Best for photographs, continuous-tone images, and complex gradients — anything with subtle color change from one pixel to the next.

Vector

A picture stored as math — points, lines, curves, and fills — not pixels. There are no squares; there are instructions like "draw a circle of radius r, fill it blue." Because it is math, it is resolution-independent: at output time it is re-drawn (rasterized) at whatever resolution the device needs, so it stays razor-sharp at any size. Common formats: AI, EPS, SVG, PDF (vector content), CDR. Made by Illustrator, CorelDRAW, Inkscape — and the shapes, text, and paths inside a Fabric.js designer are vectors. Best for logos, icons, type, line art, and packaging die-lines — anything needing crisp edges at any scale.

The plain rule for print: use vector for logos, type, and line art (it scales infinitely and prints at the device's full resolution), and raster for photos (a photo can't be "made vector" without losing realism). The dangerous middle is a logo left as a low-res JPEG — it has thrown away its scalability forever.

The handoff: rasterizing (RIP) at output

Vectors don't print directly as math — at the final stage they are rasterized (turned into dots) by the printer's RIP (Raster Image Processor, the software that converts a page into the dot pattern the press lays down). The key point: a vector logo sent to a 2400-dpi imagesetter gets 2400-dpi-sharp edges. The exact same logo flattened earlier to a 150-ppi JPEG is stuck at 150 ppi forever, no matter how good the press is.

6.2 Bézier curves & vector geometry — the math under a Fabric.js designer

If vectors are "math instructions," the most important instruction is the curve. Almost every smooth vector shape is built from Bézier curves. Here are the building blocks in plain words:

Anchor point (node)

An on-curve point where a curve segment starts or ends. The line actually passes through it.

Control handle (control point / direction handle)

An off-curve point that pulls the curve like a magnet. It sets the curve's direction and tension but the line does not pass through it.

The standard curve in PostScript, PDF, SVG, Illustrator, and Fabric is the cubic Bézier: four points P0, P1, P2, P3. The curve runs from P0 to P3 (the two anchors), while P1 and P2 are the off-curve control handles. As a parameter t sweeps from 0 to 1, the point on the curve is:

B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3

   P1 *----.            The 4 weights are the Bernstein
       \    `--.        polynomials:  (1-t)^3, 3t(1-t)^2,
        \      curve     3t^2(1-t), t^3  -- they ALWAYS
   P0 *--\----.   \      sum to 1.
          \    `-._ *  P3   Curve leaves P0 toward P1,
           `------* P2      arrives at P3 coming from P2.

The geometric meaning is friendlier than the formula: the curve leaves P0 heading straight toward P1 (so the line P0→P1 is the starting tangent) and arrives at P3 coming from P2 (line P2→P3 is the ending tangent). Handle length controls how strongly the curve bows; handle angle sets the tangent direction. The curve always stays inside the convex hull (the rubber-band outline) of its four points.

A quadratic Bézier uses only 3 points (one control): B(t) = (1-t)²P0 + 2(1-t)t·P1 + t²P2. TrueType fonts use quadratics; PostScript and OpenType-CFF fonts use cubics.

How it renders: the software steps t in small increments, computes (x,y) at each step, and joins them with short straight segments — this is called flattening. Finer steps look smoother on screen, but at print time the device rasterizes the true math regardless of your screen preview.

6.3 Resolution: DPI vs PPI vs LPI

These three abbreviations get used interchangeably in shops, but they are three different layers of the print process. Mixing them up is the root of most "why is it blurry?" confusion.

PPI — Pixels Per Inch

The pixel density of a digital image (file). This is the number that actually governs raster print sharpness. When someone says "300 dpi file," they almost always mean 300 PPI — the industry uses "dpi" loosely.

DPI — Dots Per Inch

The physical ink dots a printer lays on paper. Much higher than PPI (inkjet 1200–2880 dpi, laser 600–1200) because many tiny ink dots build a single image pixel or halftone cell.

LPI — Lines Per Inch

The halftone screen frequency — rows of halftone dots per inch in offset/litho printing. Typical values: newspaper 85 lpi; general commercial & magazines 133–150 lpi (150 lpi is the common standard); high-end art books 175–200 lpi.

  THE FILE          THE SCREEN          THE PRESS
  +---------+       +-----------+       +-----------+
  |  PPI    |  -->  |   LPI     |  -->  |   DPI     |
  | pixels  |       | halftone  |       | ink dots  |
  | per inch|       | per inch  |       | per inch  |
  +---------+       +-----------+       +-----------+
   your image      screen ruling       printer hardware

6.4 The 300 dpi rule and the 2× Quality Factor

"Use 300 dpi for print" is the most repeated rule in the business — and it's not magic. It comes from the Quality Factor (QF) rule: the image PPI you need is roughly 1.5× to 2× the LPI of the press, with 2:1 being the Adobe/industry standard.

So at the common commercial screen of 150 lpi: 150 lpi × 2 = 300 ppi. That's the entire origin of "300 dpi for print." Because it's a ratio, it scales with the screen ruling:

A QF below ~1.5 risks halftone artifacts and softness; above ~2 just wastes data — the RIP throws away the extra pixels, giving you bigger files with no visible gain. The big exception is large-format (banners, billboards): they're viewed from far away, so 100–150 ppi (or far less for billboards) is fine because the eye can't resolve the dots at distance.

6.5 Effective resolution after scaling

Here's the trap that bites even experienced designers. When you place a raster image in a layout and resize it, the actual pixels don't change — but the effective (output) resolution does. The formula:

  Effective PPI = Original PPI / Scale Factor

  ENLARGE  -> effective resolution DROPS (danger)
    300 ppi @ 200%  = 150 ppi   (too low)
    300 ppi @ 120%  = 250 ppi   (still good)

  REDUCE   -> effective resolution RISES (always safe)
     72 ppi @  50%  = 144 ppi
     72 ppi @  25%  = 288 ppi
    300 ppi @  50%  = 600 ppi

Rule of thumb: enlarging a placed image up to about 120% keeps very good quality; beyond that the effective resolution falls below target. Reducing is always safe — you're packing more source pixels into each printed inch.

6.6 Image resampling — bicubic, Lanczos, nearest neighbor

Resampling means changing an image's pixel count; the algorithm decides how the new (or removed) pixels are computed.

Why upscaling degrades: there is no real information between the original pixels, so interpolation can only guess or blur. Detail is invented, never recovered. Why downscaling is safe: you're discarding surplus data, and a good filter averages many source pixels into each new one. (Downscaling still needs an anti-alias/low-pass step — nearest-neighbor downscaling just drops pixels and aliases badly, causing moiré.)

6.7 Bit depth & channels

Bit depth is the number of bits used per channel — which sets how many tonal steps each color channel can hold.

8-bit per channel

256 levels per channel → about 16.7 million colors in RGB. The standard delivery depth; perfectly fine for final output.

16-bit per channel

65,536 levels per channel → trillions of colors. Vastly more headroom for editing.

Channels

The separate color components: RGB = 3 channels, CMYK = 4 (the print color space), grayscale = 1. Total image bits = depth × channels — so 8-bit RGB = 24-bit color, and 16-bit RGB = 48-bit.

Alpha channel

An extra channel storing per-pixel opacity (0 = transparent, 255 = fully opaque at 8-bit). Supported by PNG, TIFF, and PSD — but not by JPEG.

Why edit in 16-bit: heavy edits (curves, large gradients, dodging/burning) on an 8-bit image cause banding — visible stepping in smooth gradients like skies — because there simply aren't enough levels to redistribute. 16-bit keeps gradients smooth all the way through manipulation.

6.8 Alpha compositing & blend modes — layer math before flattening

When layers overlap, the software performs real math to combine them. Understanding it explains why some exports get ugly halos or "white boxes."

Alpha compositing

Alpha compositing is combining a layer over a background using its alpha (opacity) to fake partial transparency. The standard "over" operator (from Porter–Duff) is:

  out = src * alpha + dst * (1 - alpha)
        \_______/      \____________/
        top layer        background showing through

There are two ways alpha can be stored, and mixing them up causes edge halos:

Straight (unassociated) alpha

The RGB color is stored independently of the opacity value.

Premultiplied (associated) alpha

The RGB is already multiplied by alpha — faster to composite and avoids dark/light fringe halos at edges. Mixing the two wrongly produces edge halos, which matters when exporting from a canvas/designer for print.

Blend modes

Blend modes are per-channel math formulas that combine a source layer with the base layer below it:

• Multiply: result = base × top ÷ 255 → always darkens. It mimics ink layering / CMYK absorption (each ink layer absorbs more light) — the print-realistic darkening mode.
• Screen: the inverse of multiply → always lightens.
• Overlay / Soft Light: contrast modes (multiply in the shadows, screen in the highlights).

Flattening

Flattening bakes all the layers, blend modes, and transparency down into one opaque raster. Once flattened it is permanent — the blend math is resolved into final pixel values and the layers are gone.