This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Samenvatting
De image-rendering
CSS waarde vertelt de browser op welke manier het schalen (groter en kleiner) van afbeeldingen afgehandeld moet worden. De ingestelde waarde heeft effect op alle afbeeldingen in het element, maar heeft geen invloed op niet geschaalde afbeeldingen. Bijvoorbeeld, als een afbeelding van 100x100px aangepast word naar 200x200px (of 50x50px), dan zal de afbeelding vergroot (of verkleind) worden met het gekozen algoritme. Schalen kan ook toegepast worden door de gebruiker door bijvoorbeeld in te zoomen in de pagina.
- Initial value
auto
- Applies toalle elementen
- Inheritedja
- Media
visual
- Computed value als gespecificeerd
Syntax
Officiële syntax: auto | crisp-edges | pixelated
image-rendering: auto image-rendering: crisp-edges image-rendering: pixelated
Waardes
- auto
- Standaard waarde. De afbeelding wordt geschaald met een algoritme die de afbeelding maximaal optimaliseerd. Meestal zijn algoritmen die de kleuren "smoothen" acceptabel, zoals bilinieare interpolatie. Dit is bedoeld voor afbeeldingen zoals foto's. Sinds versie 1.9 (firefox 3.0) gebruikt Gecko bilinear resampling (hoge kwaliteit).
- 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'.
optimizeQuality
and optimizeSpeed
present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto
value.Examples
/* applies to GIF and PNG images; avoids blurry edges */ img[src$=".gif"], img[src$=".png"] { image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }
div { background: url(chessboard.gif) no-repeat 50% 50%; image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */ image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }
Live Examples
image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;
78% 100% 138% downsized upsized
image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
78% 100% 138% downsized upsized
Specifications
Specification | Status | Comment |
---|---|---|
CSS Image Values and Replaced Content Module Level 4 The definition of 'image-rendering' in that specification. |
Working Draft |
Though initially close from the SVG image-rendering
property, the values are quite different now.
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support (auto ) |
(Yes) | 3.6 (1.9.2) | No support [1] | 11.60 | 6533.21.1, r86920 |
crisp-edges |
(Yes) with the non-standard name -webkit-optimize-contrast |
3.6 (1.9.2)-moz | No support | 11.60-o | 6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast |
pixelated |
No support | No support | No support | No support | No support |
optimizeQuality , optimizeSpeed |
No support | 3.6 (1.9.2) | No support | 11.60 | 6533.21.1, r86920 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |
Notes
[1] Internet Explorer 7 and latersupports the non-standard -ms-interpolation-mode
property with two values (bicubic
and nearest-neighbor
):
- applies only to images (JPG, GIF, PNG, ...)
- in IE7 only for images without transparency
- does not inherit
- default value IE7:
nearest-neighbor
(low quality) - default value IE8+:
bicubic
(high quality)
Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.