The CSS3 image-rendering property defines the way in which the browser should display an image if any changes are made to it’s original dimensions, for instance by making dynamic DOM and JavaScript changes to it's width and height.


selector { 

    image-rendering: crisp-edges | pixelated | auto | initial | inherit;



The image-orientation property accepts following values:

  • crisp-edges; It requires from a browser to skip smoothing colors, blurring it and similar, while preserving edges and contrast.
  • pixelated; Important only if the image is being scaled up, in which case it will try to render pixels in that manner to approach the nearest feasible neighboring color. If scaling down it behaves same as auto.
  • auto; Intended for higher quality requests that allow smoothing factors (in reality it allows a browser to decided). This is the default value.
  • initialinherit


The example with image-rendering property:


›› go to examples ››