What to try
- Choose a cell in the coverage image and compare 1 × 1 with 4 × 4 or 8 × 8 samples.
- Move the exact edge with the slope and offset controls and follow the covered-sample count.
What to look for: Subpixel centers estimate the covered area before the result is stored. Boundary pixels get intermediate brightness while the image stays 8 × 8 pixels.
How it works
A diagonal edge crosses some pixels only partly. Sampling one point per cell forces a hard inside/outside decision. Estimating coverage with multiple subpixel samples produces intermediate values near the edge, representing how much of the cell is covered.
This is different from blurring an already aliased result. Once fine structure has folded into a false coarse pattern, smoothing cannot reliably determine what the original was. Procedural grids and moiré patterns make this distinction particularly visible.
Use it in the Lab
Keep generated frequencies within the document’s useful resolution and reduce images carefully. Use nearest display zoom to inspect the actual raster, and smooth reconstruction only when it serves the output.
Limits & distinctions
The example uses a configurable regular subpixel grid, from one to sixty-four samples per cell, to estimate area coverage. It is not an implementation of every antialiasing method used by browsers or graphics hardware.
Further reading
When a continuous shape — a diagonal line, a circle, a curve — is mapped onto a discrete pixel grid, the result inevitably contains staircase-like artifacts called aliasing or "jaggies." Anti-aliasing mitigates this by blending edge pixels with colors intermediate between the foreground and background, creating the illusion of smooth edges at the cost of introducing new colors into the image.
How It Works
The basic principle is supersampling: render the scene at a higher resolution, then downsample. Each output pixel becomes the average of multiple sub-pixels, producing smooth gradients at edges. In practice, modern implementations use more efficient approaches:
- MSAA (Multi-Sample) — Samples multiple points per pixel only at polygon edges. Efficient in GPU hardware.
- FXAA (Fast Approximate) — Post-processing filter that detects edges in the final image and blurs them. Fast but can soften textures.
- Subpixel rendering — Exploits the physical layout of LCD subpixels (RGB stripes) to triple the horizontal resolution. Used extensively in font rendering.
The Pixel Art Exception
Anti-aliasing is one of the few rendering features that must be actively suppressed in certain contexts. Pixel art is designed to work with the grid — every pixel is a deliberate placement, and the hard edges are an aesthetic feature, not a flaw. Applying anti-aliasing to pixel art blurs the precise edges that the artist carefully crafted.
This is why browsers provide the CSS property image-rendering: pixelated and the Canvas API offers imageSmoothingEnabled = false. Both instruct the renderer to use nearest-neighbor interpolation when scaling images, preserving the hard pixel boundaries that define pixel art's visual character.
Impact on Palette Analysis
Anti-aliasing has a direct impact on color palette extraction. A pure black-and-white image contains exactly 2 unique colors. The same image with anti-aliased edges may contain dozens of intermediate grays introduced by the smoothing algorithm. When our analysis pipeline detects a small number of unique colors (≤256), it treats every value as intentional — but if those extra colors are anti-aliasing artifacts rather than deliberate choices, the palette count will be inflated.
Key Takeaway
Anti-aliasing trades color purity for perceptual smoothness. In photography and UI rendering, this tradeoff is almost always worthwhile. In pixel art and indexed-color workflows, it introduces unwanted intermediate colors that undermine the deliberate, constrained palette.
Articles
Related artworks
Related Lab categories
Sources & references
Guide updated