1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: image-rendering
slug: Web/CSS/image-rendering
tags:
- CSS
- CSS Bild
- CSS Eigenschaft
- Experimentell
- NeedsMobileBrowserCompatibility
- Referenz
- SVG
translation_of: Web/CSS/image-rendering
---
<div>
<div>{{CSSRef}}</div>
<div>{{SeeCompatTable}}</div>
<h2 id="Zusammenfassung" style="line-height: 30px; font-size: 2.14285714285714rem;">Zusammenfassung</h2>
<p>Das <code>image-rendering</code> <a href="/de-DE/docs/CSS" title="CSS">CSS</a> Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem <a href="/de-DE/docs/Web/HTML">HTML</a> 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.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" style="line-height: 30px; font-size: 2.14285714285714rem;">Syntax</h2>
<pre class="twopartsyntaxbox" style="font-size: 14px;">{{csssyntax}}</pre>
<pre style="font-size: 14px;">image-rendering: auto
image-rendering: crisp-edges
image-rendering: pixelated
image-rendering: inherit
</pre>
<h3 id="Values" style="line-height: 24px; font-size: 1.71428571428571rem;">Values</h3>
<dl>
<dt><code><strong>auto</strong></code></dt>
<dd>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<em> bilinear </em>resampling (high quality).</dd>
</dl>
<dl>
</dl>
<dl>
<dt><code><strong>crisp-edges</strong></code></dt>
<dd>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.</dd>
<dt><code><strong>pixelated</strong></code></dt>
<dd>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'.</dd>
</dl>
<div class="note">The values <code>optimizeQuality</code> and <code>optimizeSpeed</code> present in early draft (and coming from its SVG counterpart) are defined as synonyms for the <code>auto</code> value.</div>
<h2 id="Examples" style="line-height: 30px; font-size: 2.14285714285714rem;">Examples</h2>
<pre class="brush:css;" style="font-size: 14px;">/* 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) */
}
</pre>
<pre class="brush:css;" style="font-size: 14px;">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) */
}</pre>
<h3 id="Live_Examples" style="line-height: 24px; font-size: 1.71428571428571rem;">Live Examples</h3>
<h4 id="image-rendering_auto" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: auto;</h4>
<p style="image-rendering: auto;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
<h4 id="image-rendering_pixelated_(-ms-interpolation-mode_nearest-neighbor)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)</h4>
<p>78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
<h4 id="image-rendering_crisp-edges_(-webkit-optimize-contrast)" style="line-height: 18px; font-size: 1.28571428571429rem;">image-rendering: crisp-edges; (-webkit-optimize-contrast)</h4>
<p style="image-rendering: -webkit-optimize-contrast;">78% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 39px; width: 39px;"> 100% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 50px; width: 50px;"> 138% <img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="height: 69px; width: 69px;"> downsized <img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="height: 89px; width: 89px;"> upsized <img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="height: 89px; width: 77px;"></p>
<h2 id="Specifications" style="line-height: 30px; font-size: 2.14285714285714rem;">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>Though initially close from the SVG <code>image-rendering</code> property, the values are quite different now.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Browser compatibility</h2>
{{Compat("css.properties.image-rendering")}}</div>
|
