Web image resize

Resizing images is perhaps the most common image transformation on the web. This operation allows to adjust the image size to different viewports and layouts through different devices. But it may be problematic in some cases, presenting artifacts that not best represent the original.

The problem arises because web images are digital representations formed by discrete units of information or pixels. Resizing an image means changing the number of pixels in the image and this needs to be mathematically performed using an interpolation algorithm to recalculate (resample) all the pixel values at the image.

As a result, the resampling process can introduce some kind of artifact depending on the content of the image and if the process is to enlarge (upscale) or reduce (downscale) the image. In fact, jagged edges are problematic upscaling images, while aliasing artifacts (moiré) are problematic at downsizing.

Moiré artifacts

Moiré is a type of aliasing artifact that may occur when downsizing images. This shows up in images with fine textures which are near the resolution limit. When these textures are downsized surpassing their resolution new patterns appear, like in the example below:

wall resized with anti-aliasing filtering wall with moire patterns artifacts
Moiré artifacts caused by a wrong resize

This pattern has no physical meaning in the picture and does not correlate with the texture on the wall.

The prevalence of moiré largely depends on the type of interpolator used, although some images are much more susceptible than others.

Aliasing and resize softening

Aliasing is a signal processing effect of resampling that introduces distortion and artifacts. Interpolation algorithms introduce anti-aliasing filtering to avoid moiré artifacts and aliasing distortion in general. This results in a resized image that can become significantly less sharp.

original country image softening country image
Resizing introduces some softening in images

Interpolation algorithms which preserve the best sharpness are more susceptible to moiré, whereas those which avoid moiré typically produce a softer result. This is unfortunately an unavoidable trade-off in resizing.

One of the best ways to combat resize softening is to apply a follow-up unsharp mask after resizing an image — even if the original had already been sharpened.

This effects introduced by resizing operations makes important to understand how these algorithms perform resampling operations. How they handle throwing away pixels when the image is going to be smaller and how they handle adding pixels when the image is going to be larger.

Image resampling methods

Resampling is a way to calculate output pixels taking into account surrounding input pixels. It helps to avoid local geometry distortions, giving well- predictable output quality for a wide range of scaling factors.

The “scaling factor” is the ratio of input image dimensions to output image dimensions.

Several interpolation algorithms are available for image resampling, being the most common the non-adaptive methods. Recall that all non-adaptive interpolation algorithms always face a trade-off between three artifacts: aliasing, blurring and edge halos.

The most common algorithms available to resize images are:

  • Nearest Neighbor
  • Bilinear
  • Bicubic
  • Lanczos

The use of each of this options produces big difference with image quality.

paris nearest neighbor Nearest neighbor introduces aliasing
paris bilinear Bilinear interpolation introduces blurring
paris bicubic Bicubic interpolation preserves the image
paris lanczos Lanczos interpolation best preserves the image

Nearest neighbor interpolation

Nearest neighbor is the most basic algorithm and it only considers one pixel, the closest one to the interpolated point. This has the effect of simply making each pixel bigger when is used upscaling. However, nearest neighbor downsizing produces heavy aliasing.

paris louvre nearest neighbor

It requires the least processing time of all the interpolation algorithms and it is used in some cases where we want to preserve a pixelated aspect.

Bilinear interpolation

Bilinear interpolation considers the closest 2x2 neighborhood of known pixel values surrounding the unknown pixel. It then takes a weighted average of these 4 pixels to arrive at its final interpolated value. For instance, when the size is halved all know pixel distances are equal, so the interpolated value is simply their sum divided by four. This results in much smoother looking images than other interpolation algorithms.

paris louvre bilinear

It is now rarely used because of its low quality results.

Bicubic interpolation

Bicubic goes one step beyond bilinear by considering the closest 4x4 neighborhood of known pixels (for a total of 16 pixels). Since these are at various distances from the unknown pixel, closer pixels are given a higher weighting in the calculation. Bicubic produces noticeably sharper images than the previous two methods.

paris louvre bicubic

It is the standard resampling algorithm used in Adobe Photoshop.

Lanczos interpolation

Lanczos is a higher order interpolation algorithm which takes more surrounding pixels into consideration. It retains the most image information after an interpolation. It is therefore extremely useful when the image requires multiple transformations (rotations / distortions) in separated steps.

paris louvre lanczos

Despite being the more computationally intensive algorithm, Lanczos shows the best quality results and is the recomended downsampling algorithm.