Image Scaling Algorithms Explained: Bilinear, Bicubic Interpolation
When you enlarge or shrink an image, the computer must "guess" the color values of new pixels. This process is called interpolation. Different interpolation algorithms produce dramatically different results — some preserve sharp edges while others aim for smooth gradients. Understanding these algorithms helps you make the best choice for each use case.
What Is Image Interpolation?
Digital images are composed of individual pixels. When we resize an image, the target pixel positions may fall "between" original pixels. The interpolation algorithm's job is to calculate the color values at these new positions based on surrounding known pixel values.
Key takeaway: The core question of interpolation is: given known surrounding pixel colors, how do we reasonably estimate the color of a new pixel? Different algorithms make different trade-offs between speed and quality.
Nearest-Neighbor Interpolation
Nearest-neighbor is the simplest method: it directly uses the value of the closest original pixel as the new pixel's value.
Characteristics
- Fastest speed — requires only a single lookup, no computation
- Sharp edges — produces no blurring effect
- Visible jaggies — noticeable pixelated blocks when enlarging
- Best for — pixel art, icon scaling, scenes requiring hard edges
Bilinear Interpolation
Bilinear interpolation considers the 4 nearest pixels (2x2 grid) around the target point, computing a weighted average based on distance. It performs linear interpolation first in the X direction, then in the Y direction.
Process
- Locate the 4 surrounding pixels in the source image
- Calculate the distance ratios from the target position to each pixel
- Perform two horizontal linear interpolations
- Perform one vertical linear interpolation to get the final value
Characteristics
- Moderate quality — smoother than nearest-neighbor, but can appear slightly blurry
- Moderate speed — slower than nearest-neighbor, but still fast
- Best for — general image resizing, real-time previews, game textures
Bicubic Interpolation
Bicubic interpolation considers the 16 surrounding pixels (4x4 grid), using cubic polynomials for weighted computation. This produces smoother results while preserving more detail and sharpness.
Characteristics
- Highest quality — produces the smoothest, most natural results when enlarging
- Detail preservation — edges are sharper than bilinear
- Slower computation — must process weighted calculations for 16 pixels
- Best for — photo editing, print-quality requirements, professional image processing
Comparison of the Three Algorithms
| Feature | Nearest-Neighbor | Bilinear | Bicubic |
|---|---|---|---|
| Sample pixels | 1 | 4 (2x2) | 16 (4x4) |
| Speed | Fastest | Medium | Slower |
| Upscale quality | Pixelated | Slightly blurry | Smoothest |
| Edge preservation | Hard edges | Medium | Sharp |
| Upscale use | Pixel art | General purpose | Photography |
| Downscale use | Not recommended | Acceptable | Recommended |
Implementation in the Canvas API
When using HTML5 Canvas for image scaling in the browser, you can control interpolation quality through the imageSmoothingEnabled and imageSmoothingQuality properties:
imageSmoothingEnabled = false— disables smoothing (nearest-neighbor-like)imageSmoothingQuality = "low"— bilinear interpolationimageSmoothingQuality = "medium"— medium qualityimageSmoothingQuality = "high"— bicubic interpolation
Advanced: Lanczos Resampling
Lanczos resampling is a higher-quality algorithm that uses the sinc function as its basis, sampling a larger area (typically 6x6 or 8x8 pixels). It excels at downscaling, effectively avoiding aliasing and moire patterns.
Many professional image editors (such as Photoshop and GIMP) use Lanczos as the default or recommended scaling algorithm.
Try the Image Resize Tool →Conclusion
Choosing the right interpolation algorithm depends on your use case. Use nearest-neighbor for pixel art, bilinear for general purposes, and bicubic or Lanczos for professional quality. Understanding these fundamentals helps you get the best results every time you resize an image.
References
- Gonzalez, R. C. & Woods, R. E. "Digital Image Processing." Pearson, 4th Edition, 2018. Chapter 2: Digital Image Fundamentals — Interpolation.
- Wikipedia contributors. "Bilinear interpolation." Wikipedia, The Free Encyclopedia, 2025. https://en.wikipedia.org/wiki/Bilinear_interpolation
- Wikipedia contributors. "Bicubic interpolation." Wikipedia, The Free Encyclopedia, 2025. https://en.wikipedia.org/wiki/Bicubic_interpolation
- MDN Web Docs. "CanvasRenderingContext2D: imageSmoothingQuality property." Mozilla Developer Network, 2025. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality