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.