image-rendering

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images.

/* Keyword values */
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

/* Global values */
image-rendering: inherit;
image-rendering: initial;
image-rendering: unset;

This property applies to the element itself, as well as any images supplied in other properties for the element. It has no effect on non-scaled images. For example, if the natural size of the image is 100×100px but the page author specifies its dimensions as 200×200px (or 50×50px), then the image will be upscaled (or downscaled) to the new dimensions using the specified algorithm. Scaling may also apply due to user interaction (zooming).

Syntax

Values

auto

Default value, 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. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

crisp-edges

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. This is intended for images such as pixel art.

pixelated

When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.

Formal syntax

auto | crisp-edges | pixelated

Examples

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
  image-rendering: crisp-edges;
}

div {
  background: url(chessboard.gif) no-repeat 50% 50%;
  image-rendering: crisp-edges;
}

Live Examples

image-rendering: auto;

78% 100% 138% downsized upsized

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% 100% 138% downsized upsized

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% 100% 138% downsized upsized

Specifications

Browser compatibility