image-rendering

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

Initial value auto
Applies to all elements

Syntax

  
image-rendering: pixelated;
  

Values

The scaling algorithm is UA dependent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
The image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos.
Identical to smooth, but with a preference for higher-quality scaling. If system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree.
The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. Suitable algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2Ă—SaI and hqx-family algorithms. This value is intended for pixel-art images, such as in browser games.
When scaling the image up, the nearest-neighbor algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as auto.

Browser support

image-rendering13793.6156
crisp-edges137965156
optimizeQuality28793.6156.1
optimizeSpeed28793.6156.1
pixelated41792610

We use cookies to improve your experience. Learn more in our Privacy policy.

×