Bitmap (raster) vs. vector: the technical decision that defines all of your visual communication, from MacPaint (1984) to AVIF (2019)

A bitmap —also called a raster image— is a digital representation of an image as a rectangular grid of individual dots called pixels, where each pixel stores information about its color. When the thousands or millions of pixels are viewed from the right distance, the brain interprets them as a continuous image. That simple logic —image = grid of pixels with color information— is the foundation of virtually all digital photographs, screenshots, and most of the visual content that circulates on the internet.

The distinction between raster and vector is probably the most fundamental technical decision in digital visual communication, and the one that generates the most confusion among non-technical professionals. Getting it wrong —using raster when you need vector or vice versa— produces concrete and often irreversible problems. This article covers the historical origin of both formats, the real operational differences, and how to decide well depending on the context.

The origin of raster: from CRTs to MacPaint

The idea of representing images through grids of dots goes back to the early days of computer graphics. Ivan Sutherland, in his 1963 doctoral thesis at MIT (Sketchpad: A Man-Machine Graphical Communication System), established many of the fundamental concepts of computer graphics, although his work focused more on vector graphics than on raster.

The first commercial raster systems appeared in the 1970s with cathode-ray tubes (CRTs) that drew images using electron beams that lit up pixels one by one. Bell Labs, Xerox PARC, and other labs worked with raster systems throughout the 1970s.

The moment that brought raster to the general public was the launch of the Apple Macintosh on January 24, 1984. The Mac shipped with two applications that demonstrated graphics capabilities previously unseen in personal computers: MacPaint and MacWrite. MacPaint was developed by Bill Atkinson, one of the legendary engineers on the original Mac team. Atkinson had also developed QuickDraw, the Mac's underlying graphics system, and MacPaint showcased its power: raster image editing with tools (pencil, brush, paint bucket, shapes, erasers) that have remained conceptually similar to this day in any image editor.

MacPaint worked in black and white at 1 bit per pixel (each pixel was on or off), with a resolution of 576×720. Given the hardware limitations of the era, that was state of the art. But the conceptual model —editing a grid of pixels with tools that affect rectangular or irregular regions— was established for all the following decades.

Photoshop: February 1990

The next historical milestone is Adobe Photoshop, which radically changed the world of raster image editing. The story is well known: Thomas Knoll, a doctoral student at the University of Michigan, wrote a program called Display in 1987 to show grayscale images on a Macintosh Plus. His brother John Knoll, who worked at Industrial Light & Magic, saw the program and found it useful. The Knoll brothers worked together to extend it into a more complete editing tool.

In 1988, Thomas Knoll signed an agreement with Adobe for the company to distribute the program, and on February 19, 1990 Adobe released Photoshop 1.0 for Macintosh. The initial version cost 895 dollars and ran only on the Mac. Windows versions would arrive in 1993.

Photoshop transformed entire industries. Professional photography, editorial design, advertising, audiovisual production, digital editing —all of them adopted Photoshop as a standard tool throughout the 1990s and 2000s. The phrase "to photoshop something" entered common English as a verb. The ability to manipulate raster images invisibly —retouching, compositing, altering— had cultural consequences that are still being debated three decades later (unattainable beauty standards, deepfakes before deepfakes, journalistic manipulation).

Starting in 2003, Adobe launched the Creative Suite (CS), and since 2013 Adobe Creative Cloud (CC) on a subscription model. As of 2026, Photoshop remains the most widely used raster image editor among design professionals.

The other world: vector, Warnock, Illustrator (1982-1987)

In parallel with the development of raster, another tradition was being built: vector graphics, where images are not represented as grids of pixels but as mathematical formulas that describe lines, curves, and shapes.

John Warnock and Charles Geschke had worked together at Xerox PARC in the 1970s, where they developed a graphics language called InterPress. Frustrated that Xerox was not aggressively commercializing their innovations, they left Xerox and founded Adobe Systems in December 1982. Adobe's first commercial contribution was the PostScript language, developed between 1982 and 1984.

PostScript was a page description language: instead of sending a rasterized image to the printer, you sent a mathematical description of what to draw (lines, curves, text, filled regions), and the printer —if it had a PostScript interpreter— rasterized locally at the hardware's maximum resolution. It was revolutionary: scalable documents, crisp fonts at any size, pure vector graphics.

In January 1987 Adobe released Illustrator 1.0 for Macintosh. Illustrator used PostScript as its underlying model and let designers create editable vector graphics. The Bézier curve (discovered by Pierre Bézier for Renault automotive work in the 1960s, formalized mathematically by Paul de Casteljau at the same time at Citroën) became the fundamental tool of vector design.

Throughout the 1990s and 2000s, Illustrator and PostScript dominated the world of professional vector design, especially in visual identity, packaging, illustration, and editorial design.

The fundamental technical difference

To make decisions about when to use one or the other, it helps to understand what each one does technically:

Raster (bitmap). The image is a grid of pixels. Each pixel holds color values (typically RGB at 24-bit depth: 8 bits per channel, 256 levels each, 16.7 million possible colors). There are also alpha channels for transparency (32 bits with alpha). The file size depends on the number of pixels and the compression method.

Vector. The image is a collection of mathematical instructions: "straight line from A to B with thickness X and color Y", "Bézier curve with control points C1, C2, C3", "rectangle with rounded corners filled with color Z", etc. The file does not contain pixels; it contains formulas.

The practical consequences are fundamental:

Scalability. A vector image can be scaled to any size without loss of quality —the system recalculates the formulas at the resolution needed. A raster image loses quality when enlarged: the pixels become visible, the curves look jagged. If reduced, part of the information is discarded.

File size. For complex images such as photographs, raster is more efficient (storing millions of formulas that describe a photo would be absurd). For simple images such as logos, vector is much lighter (a logo can weigh 5 KB in SVG and 500 KB in PNG at a decent resolution).

Editing. In vector, each element is independent and editable (change a shape's color, move a control point). In raster, editing means modifying pixels directly, and the changes can be irreversible once saved.

Suitable for... Vector works excellently for: logos, icons, line-and-shape illustrations, typography, infographics. Raster works excellently for: photographs, screenshots, textures, images with complex gradients and photorealistic detail.

Conversion. You can convert vector to raster (rasterize) without loss if you choose sufficient resolution. Converting raster to vector (vectorize) is difficult and almost always requires manual intervention or approximations.

The modern raster formats: an honest guide

There is a proliferation of raster formats worth mapping out. Each one has contexts where it is optimal:

JPG (JPEG). JPEG standard standardized by ISO in 1992 (Joint Photographic Experts Group, founded in 1986). Lossy compression (discards imperceptible information to reduce size). Excellent for photographs. Poor for graphics with sharp edges (visible artifacts). Does not support transparency.

PNG. Portable Network Graphics, standardized in 1996 as a response to the patent on the GIF format. Lossless compression. Supports transparency (alpha channel). Better than JPG for graphics with sharp edges, worse than JPG for photographs (heavier files). A deeper dive into the JPG vs PNG choice is in PNG vs JPG for images.

GIF. Graphics Interchange Format, created by CompuServe in 1987. Limited to 256 colors per image. Supports simple animation, binary transparency (yes/no, no grays). Still used for short animations despite its limitations. Pronunciation still debated.

WebP. Format launched by Google in 2010 and matured over the following decade. More efficient compression than JPG and PNG for comparable sizes. Supports transparency and animation. Widely supported in modern browsers. Adopted by Google to reduce web page sizes.

AVIF. AV1 Image File Format, specified by the Alliance for Open Media in 2019. Compression even more efficient than WebP for many cases, especially in complex images. Higher quality at a comparable size. Browser support has grown significantly since 2021-2022, and as of 2026 it is widely supported but not universal.

HEIC/HEIF. High Efficiency Image File Format, a format based on H.265/HEVC. Adopted by Apple since iOS 11 (2017) as the default photo format on the iPhone. Excellent compression but limited support outside the Apple ecosystem, which has caused interoperability problems for non-Mac users.

TIFF. Tagged Image File Format, a format from the 1980s that remains a standard in the editorial and professional printing industry for its ability to store lossless images at high color depth (16 bits per channel or more).

BMP. Windows format since the 1980s. Typically uncompressed. Large files. Nearly obsolete in professional use.

RAW. Not a single format but a family of formats specific to each camera manufacturer (Canon CR2/CR3, Nikon NEF, Sony ARW, etc.). Captures raw, unprocessed sensor data. Allows editing without loss of the original information. Standard in professional photography.

The modern vector formats

SVG (Scalable Vector Graphics). W3C standard since 2001. XML-based, editable as text, natively supported in web browsers. It is the standard for vector on the web. Perfect for logos, icons, simple illustrations.

EPS (Encapsulated PostScript). A format derived from PostScript in the 1980s. Still used in printing and professional work, especially for assets that go to traditional print production.

PDF. Portable Document Format, launched by Adobe in June 1993. Originally conceived as a document format but capable of storing both raster and vector. In 2008 it became an ISO standard (ISO 32000-1).

AI (Adobe Illustrator). Proprietary Adobe Illustrator format. Currently PDF-based.

Sketch, Figma, Affinity Designer. Modern tools with their own native formats. Figma (launched 2016, an acquisition by Adobe announced in 2022 that was canceled over antitrust in 2023, leaving Figma independent in the end) has significantly changed the UI design workflow by keeping files in the cloud.

When to use raster, when to use vector

The decision has concrete rules with little ambiguity:

Use vector (preferably SVG) when:

• The element must scale to very different sizes (a logo as a favicon, on a business card, on a 6-meter billboard).
• It is a logo, icon, or illustration made of lines and solid shapes.
• You need a lightweight file for the web.
• You want to edit individual elements later.
• The element must be printed at high resolution.

Use raster when:

• It is a photograph or has high photorealism.
• There are complex gradients, textures, photographic effects.
• It is a screen capture or screenshot.
• The final size is known and does not need to scale.

For the web specifically, in 2026:

• Photographs → AVIF if supported by the browser (with WebP as a fallback, JPG as a second fallback).
• Logos and icons → SVG.
• Screenshots → WebP or PNG.
• Animated graphics → animated WebP, MP4 video when reasonable, GIF only when there is no other option.

For print:

• Logos and brand elements → vector (preferably AI or EPS for traditional printers, SVG for modern printers).
• Photographs → TIFF for maximum quality, high-resolution JPG as an acceptable compromise.

Resolution and size: the decisions almost no one explains well

There is widespread confusion here that deserves its own section:

Total pixels. The absolute number of pixels in the image (width × height). This is the fundamental information.

Resolution (DPI/PPI). Pixel density per unit of length. It only matters when something is going to be printed or shown at a specific physical size. For pure web, DPI is irrelevant —what matters is the total pixels and the size in CSS.

Physical size. The size in centimeters or inches at which you want to display it. Together with resolution, it determines the pixels needed.

Color depth (bit depth). How many bits per color channel. 8 bits is standard (256 levels); 16 bits is the professional standard (65,536 levels); 32 bits HDR for special cases.

The practical relationships:

• Normal web screen: 72 DPI nominally; what matters is enough total pixels for the container in CSS. For retina/HiDPI screens, you need 2x the container's pixels.
• Standard print quality: 300 DPI at final size.
• Large-format print (billboards, large posters): 100-150 DPI at final size, which is enough because the viewing distance is greater.

Poorly dimensioned images are a typical source of friction: unnecessarily heavy web images that slow down pages, print images sent at insufficient resolution that come out pixelated, images resized poorly with interpolation that loses detail.

Common mistakes with raster images

Confusing screen resolution with quality. "The image looks fine on my screen" may not mean it has enough resolution for its final use.

Saving the final version as JPG and discarding the original. JPG compresses with loss. Every time it is re-edited and re-saved, the quality drops. You have to keep originals (PSD, TIFF, RAW) and export JPG/PNG/WebP only for final distribution.

Artificially increasing resolution with interpolation. Photoshop can "enlarge" a small image, but the added pixels are invented. The quality does not really increase.

Using PNG when JPG would be more efficient. Lossless PNG is excellent for graphics with edges; for photographs it is a file several times larger with no perceptual gain.

Not optimizing for the web. An image straight off a camera is 24 megapixels and weighs 8 MB. Uploading it directly to the web without resizing and compressing produces slow pages. Optimizing an image is basic work that many sites still do badly.

Not accounting for retina/HiDPI screens. Modern screens have a pixel density 2x-3x higher. A 1x image looks blurry. You have to serve 2x images with srcset or the equivalent.

Confusing bitmap with vector just by the extension. A PDF can contain both vector and raster. Being a PDF does not guarantee it is vector. You have to verify it with the appropriate tool.

Converting vector to raster prematurely. Once you convert a vector logo to PNG, you lose the ability to scale freely. Keeping the original vector is basic.

Not documenting licenses. Stock images with specific licenses can have restrictions (editorial vs commercial use, attribution required). Not documenting them causes legal problems later.

Bitmap and creative operations

For a brand that produces visual communication regularly, image management is a significant operational problem. High-quality originals, exports per channel, versions per language, approved vs in-review versions, links to campaigns —without a management system, assets get duplicated, get lost, the wrong versions end up in final pieces, and every new piece has search friction where it should have instant access.

That coordination is the discipline of creative operations: content production generates and maintains visual assets, brand management defines which versions are canonical and how they are labeled, and approval workflows ensure that only approved assets are distributed.

In Polimake that logic lives on three surfaces: Studio to coordinate visual production with campaigns, Studio to produce variants and per-channel exports, and Media specifically as the place where images —in their native editable formats, in their per-channel exported versions, with clear metadata and permissions— live accessible to the whole team.

---

If you work in marketing, design, communication, or any role that produces visual content and you have landed here looking for an answer about bitmaps, the most useful thing you can take from this article is probably the operational rule that almost every manual on the subject muddies: photos → raster, logos → vector. That simplification covers 80% of everyday decisions. The other 20% requires nuance: graphics with sharp edges in raster usually need PNG, high-quality photos for print need TIFF or RAW, and for the modern web, AVIF and WebP are displacing JPG and PNG on optimized sites.

To complement this, PNG vs JPG for images covers the most common decision within the raster world, color correction covers the post-production applied to raster, and how to take better food photography covers a specific raster use case with concrete technical considerations.

Quick references

• PNG vs JPG for images — the choice within raster.
• Color correction — the post-production applicable to raster.
• How to take better food photography — a specific use case.
• Content production — managing visual assets at scale.
• Brand management — which versions are canonical.