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).
Values[]
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 {
background-image:url('http://images1.wikia.nocookie.net/__cb20100613040032/htmlcss/images/a/a4/HTMLCSS.png');
image-rendering:optimizeQuality;
}