The image-rendering property is used in CSS and certain HTML elements. It provides a hint to the user agent about how to handle its image rendering. This property applies to scaled images (and other elements, like <canvas> and <video>). For example, if the natural size of the image is 100×100px but the page author specifies the dimensions to 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).

Note: This property requires Gecko (version 1.9.2 and above).


  • auto - Default value, depends on the user agent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
  • optimizeQuality - Indicates that the user agent shall emphasize quality over rendering speed. Gecko uses bilinear resampling (high quality).
  • optimizeSpeed - The user agent should use a resampling algorithm which achieves the goal of fast rendering. Currently Gecko uses nearest neighbor resampling (low quality).
Mozilla Extension
  • -moz-crisp-edges - Gecko always uses nearest neighbor resampling (low quality). Use this value to avoid upscaled images with sharp edges getting blurry.

Use -ms-interpolation-mode for functionality in Internet Explorer. The default value in IE7 is nearest-neighbor (low quality). The default value in IE8+ is bicubic (high quality).

To apply this in HTML, use:

<span style="image-rendering:optimizeQuality;">Image source contained here.</span>

To apply this in CSS, in the body element for example, use:

body {