Image-rendering

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

 * - Default value, depends on the user agent. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).
 * - Indicates that the user agent shall emphasize quality over rendering speed. Gecko uses bilinear resampling (high quality).
 * - 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
 * - Gecko always uses nearest neighbor resampling (low quality). Use this value to avoid upscaled images with sharp edges getting blurry.

Use  for functionality in Internet Explorer. The default value in IE7 is  (low quality). The default value in IE8+ is  (high quality).

To apply this in HTML, use:

Image source contained here.

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

body { background-image:url('http://images1.wikia.nocookie.net/__cb20100613040032/htmlcss/images/a/a4/HTMLCSS.png'); image-rendering:optimizeQuality; }