This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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).

Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual image data manipulation.

Initial value auto
Applies to all elements
Inherited yes
Media visual
Computed value as specified
Animation type discrete
Canonical order the unique non-ambiguous order defined by the formal grammar



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).
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.
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'.
Note: The values optimizeQuality and optimizeSpeed present in an early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

Formal syntax

auto | crisp-edges | pixelated


/* 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% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

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

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

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

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg


Specification Status Comment
CSS Images Module Level 3
The definition of 'image-rendering' in that specification.
Candidate Recommendation Initial definition

Note: Though initially similar to the SVG image-rendering attribute, the values are quite different now.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes No 3.6 No Yes Yes
crisp-edges No No 3.6 -moz- No Yes -o- Yes1
pixelated 41 No No No 26 ?
optimizeQuality No No 3.6 No Yes Yes
optimizeSpeed No No 3.6 No Yes Yes
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 41 ? ? ? ? ? ?
crisp-edges ? ? ? ? ? ? ?
pixelated ? 41 ? ? ? 28 ?
optimizeQuality ? ? ? ? ? ? ?
optimizeSpeed ? ? ? ? ? ? ?

1. Supported as -webkit-optimize-contrast.

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.