Definition and Usage
The image-rendering CSS property provides a hint to the user agent about how to handle its image rendering. It applies to any images appearing on the element properties, but has no effect on non-scaled images.. 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).
- Initialauto
- Applies toall elements
- Inheritedyes
- Mediavisual
- Computed Valueas specified
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: auto | crisp-edges | pixelated
image-rendering: auto
image-rendering: crisp-edges
image-rendering: pixelated
image-rendering: inherit
Values
- auto
- 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).
- crisp-edges
- 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.
- pixelated
- When scaling the image up, the “nearest neighbor” or similar algorithm must be used, so that the image appears to be simply composed of very large pixels. When scaling down, this is the same as ‘auto’.
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.
Examples
2 |
img[src$= ".gif" ], img[src$= ".png" ] { |
3 |
image-rendering: -moz-crisp-edges; |
4 |
image-rendering: -o-crisp-edges; |
5 |
image-rendering: -webkit-optimize-contrast; |
6 |
image-rendering: crisp-edges; |
7 |
-ms-interpolation-mode: nearest-neighbor; |
2 |
background : url (chessboard.gif) no-repeat 50% 50% ; |
3 |
image-rendering: -moz-crisp-edges; |
4 |
image-rendering: -o-crisp-edges; |
5 |
image-rendering: -webkit-optimize-contrast; |
6 |
image-rendering: crisp-edges; |
7 |
-ms-interpolation-mode: nearest-neighbor; |
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
Basic support (auto ) |
(Yes) |
3.6 (1.9.2) |
Not supported |
11.60 |
6533.21.1, r86920 |
crisp-edges |
(Yes) with the non-standard name -webkit-optimize-contrast |
3.6 (1.9.2)-moz |
Not supported |
11.60-o |
6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast |
pixelated |
Not supported |
Not supported |
Not supported |
Not supported |
Not supported |
optimizeQuality , optimizeSpeed Non-standard |
Not supported |
3.6 (1.9.2) |
Not supported |
11.60 |
6533.21.1, r86920 |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Basic support |
NA |
NA |
NA |
NA |
NA |