What to try
- Move the sample with the pointer, arrow keys or u/v sliders and follow all four weights.
- Edit a corner value, then move exactly onto that corner.
What to look for: Bilinear weights sum to one and recover the corner exactly. Nearest-neighbor reconstruction chooses one existing value, while bilinear reconstruction introduces intermediate encoded-gray values.
How it works
Nearest neighbor selects one existing sample. Bilinear interpolation combines four surrounding samples with weights based on fractional distance. Nearest preserves a discrete palette; bilinear can create many intermediate colors and soften high-contrast boundaries.
Interpolation also applies to parameter and color paths, where the coordinate system matters. A color midpoint in encoded sRGB differs from one in linear light or Lab. A smooth-looking interpolation is not automatically the right model for the underlying signal.
Use it in the Lab
Choose nearest for crisp pixel-art scaling and bilinear when smooth reconstruction suits a distortion. The Lab exposes both choices for coordinate remapping and nearest/smooth document resampling.
Limits & distinctions
Interpolation does not by itself prevent aliasing during reduction. A signal may need low-pass filtering before samples are discarded.
Further reading
When a digital image is resized, rotated, or perspective-corrected, pixels in the output do not align one-to-one with pixels in the source. Interpolation is the mathematical process of estimating what color each new pixel should have, based on the colors of its neighbors in the original image. The choice of algorithm profoundly affects the visual result.
Common Algorithms
Nearest-Neighbor
Each output pixel takes the exact value of the single closest source pixel. No blending occurs, so no new colors are introduced. This produces blocky, aliased results for photographic images but is perfect for pixel art — it preserves the hard edges and exact color palette that define the medium. The Canvas API exposes this via imageSmoothingEnabled = false, and CSS provides image-rendering: pixelated.
Bilinear
Averages the four nearest source pixels, weighted by distance. Produces smooth results with moderate blur. The default for most Canvas 2D scaling and CSS transforms. Good for moderate upscaling of photographic content.
Bicubic
Considers 16 surrounding pixels (4×4 grid) using cubic polynomial weighting. Produces sharper results than bilinear with fewer artifacts. The standard in image editors like Photoshop. Computationally more expensive but yields the best quality for photographic downscaling.
Lanczos
Uses a windowed sinc function, typically sampling from a 6×6 or 8×8 neighborhood. Produces the sharpest results and best preserves fine detail during downscaling. Used in professional image processing but too computationally expensive for real-time browser rendering.
Role in Image Analysis
Interpolation choice directly affects palette extraction accuracy. When an image is downsampled for analysis, a smoothing algorithm (bilinear/bicubic) will introduce intermediate colors that do not exist in the original — potentially inflating the unique color count. This is why our analysis pipeline uses nearest-neighbor downsampling: it ensures that the analyzed canvas contains only colors present in the source, even if the spatial arrangement is slightly less accurate.
Choosing the Right Algorithm
For pixel art at integer multiples: nearest-neighbor is the only correct choice. For photographic downscaling: Lanczos or bicubic preserve the most detail. For real-time browser display: bilinear is the balanced default. The algorithm should match the content, not the other way around.
Key Takeaway
Interpolation is the invisible mediator in every image transformation. It determines whether a scaled image preserves its original character or dissolves into blur — and for pixel art, the wrong choice can destroy the artwork's fundamental identity.
Related Lab categories
Sources & references
Guide updated