Image-rendering: pixelated | NeuroΨ Webdesign

Experimental: Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browserkompatibilität beachtet werden. Es ist auch möglich, dass die Syntax in einer späteren Spezifikation noch geändert wird.

Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder. Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

Initialwert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

auto <a title="Einfacher Balken: Genau eine der Entitäten muss angegeben werden" href="https://developer.mozilla.org/de/docs/Web/CSS/Value_definition_syntax#einfacher_balken">|</a> crisp-edges <a title="Einfacher Balken: Genau eine der Entitäten muss angegeben werden" href="https://developer.mozilla.org/de/docs/Web/CSS/Value_definition_syntax#einfacher_balken">|</a> pixelated

auto <a title="Einfacher Balken: Genau eine der Entitäten muss angegeben werden" href="https://developer.mozilla.org/de/docs/Web/CSS/Value_definition_syntax#einfacher_balken">|</a> crisp-edges <a title="Einfacher Balken: Genau eine der Entitäten muss angegeben werden" href="https://developer.mozilla.org/de/docs/Web/CSS/Value_definition_syntax#einfacher_balken">|</a> pixelated

image-rendering: auto
image-rendering: crisp-edges
image-rendering: pixelated

image-rendering: inherit

image-rendering: auto

image-rendering: crisp-edges

image-rendering: pixelated

image-rendering: inherit

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 composed of 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.

<span class="token comment">/* applies to GIF and PNG images; avoids blurry edges */</span>

<span class="token selector">img[src$=".gif"], img[src$=".png"]</span> <span class="token punctuation">{</span>
                   image-rendering<span class="token punctuation">:</span> -moz-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Firefox */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span>   -o-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Opera */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span> -webkit-optimize-contrast<span class="token punctuation">;</span><span class="token comment">/* Webkit (non-standard naming) */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span> crisp-edges<span class="token punctuation">;</span>
                   <span class="token property">-ms-interpolation-mode</span><span class="token punctuation">:</span> nearest-neighbor<span class="token punctuation">;</span>  <span class="token comment">/* IE (non-standard property) */</span>
                 <span class="token punctuation">}</span>


				
					
				1
2
3
4
5
6
7
8
9
10
11

						<span class="token comment">/* applies to GIF and PNG images; avoids blurry edges */</span>
 
<span class="token selector">img[src$=".gif"], img[src$=".png"]</span> <span class="token punctuation">{</span>
                   image-rendering<span class="token punctuation">:</span> -moz-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Firefox */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span>   -o-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Opera */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span> -webkit-optimize-contrast<span class="token punctuation">;</span><span class="token comment">/* Webkit (non-standard naming) */</span>
                   <span class="token property">image-rendering</span><span class="token punctuation">:</span> crisp-edges<span class="token punctuation">;</span>
                   <span class="token property">-ms-interpolation-mode</span><span class="token punctuation">:</span> nearest-neighbor<span class="token punctuation">;</span>  <span class="token comment">/* IE (non-standard property) */</span>
                 <span class="token punctuation">}</span>
 
 

					

			

<span class="token selector">div</span> <span class="token punctuation">{</span>
        <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>chessboard.gif<span class="token punctuation">)</span></span> no-repeat 50% 50%<span class="token punctuation">;</span>
        <span class="token property">image-rendering</span><span class="token punctuation">:</span> -moz-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Firefox */</span>
        <span class="token property">image-rendering</span><span class="token punctuation">:</span>   -o-crisp-edges<span class="token punctuation">;</span>         <span class="token comment">/* Opera */</span>
        <span class="token property">image-rendering</span><span class="token punctuation">:</span> -webkit-optimize-contrast<span class="token punctuation">;</span><span class="token comment">/* Webkit (non-standard naming) */</span>
        <span class="token property">image-rendering</span><span class="token punctuation">:</span> crisp-edges<span class="token punctuation">;</span>
        <span class="token property">-ms-interpolation-mode</span><span class="token punctuation">:</span> nearest-neighbor<span class="token punctuation">;</span>  <span class="token comment">/* IE (non-standard property) */</span>
<span class="token punctuation">}</span>

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) */

}

image-rendering: auto;

78% 100% 138% downsized upsized

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

78% 100% 138% downsized upsized

image-rendering: crisp-edges; (-webkit-optimize-contrast)

78% 100% 138% downsized upsized

Specification	Status	Comment
CSS Images Module Level 3 Die Definition von ‘image-rendering’ in dieser Spezifikation.	Anwärter Empfehlung

Though initially close from the SVG image-rendering property, the values are quite different now.

Source: https://developer.mozilla.org/de/docs/Web/CSS/image-rendering