image-rendering

  • Revision slug: CSS/image-rendering
  • Revision title: image-rendering
  • Revision id: 317653
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{SeeCompatTable()}}

Summary

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

  • {{ Xref_cssinitial() }} {{ Cssxref("auto") }}
  • Applies toall elements
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified

Syntax

 Formal syntax: auto | crisp-edges | pixelated
image-rendering: auto
image-rendering: crisp-edges
image-rendering: pixelated

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

/* 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%squares.gif 100%squares.gif 138%squares.gif downsizedhut.jpg upsizedblumen.jpg

image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;
78%squares.gif 100%squares.gif 138%squares.gif downsizedhut.jpg upsizedblumen.jpg

Specifications

Specification Status Comment
{{ SpecName('CSS4 Images', '#image-rendering', 'image-rendering') }} {{ Spec2('CSS4 Images') }}  

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (auto) {{CompatVersionUnknown()}} 3.6 (1.9.2) {{CompatNo()}} [1] 11.60 6533.21.1, r86920
crisp-edges {{CompatVersionUnknown()}} with the non-standard name -webkit-optimize-contrast 3.6 (1.9.2){{property_prefix("-moz")}} {{CompatNo()}} 11.60{{property_prefix("-o")}} 6533.21.1, r86920 with the non-standard name -webkit-optimize-contrast
pixelated {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} {{CompatNo()}} {{CompatNo()}}
optimizeQuality, optimizeSpeed{{Not_standard_inline()}} {{CompatNo()}} 3.6 (1.9.2) {{CompatNo()}} 11.60 6533.21.1, r86920
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

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.

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{SeeCompatTable()}}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>image-rendering</code> <a href="/en/CSS" title="CSS">CSS</a> property provides a hint to the user agent about how to handle its image rendering.&nbsp; 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<em> 100×100px </em>but the page author specifies the dimensions to <code>200×200px</code> (or <code>50×50px</code>), 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).</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> {{ Cssxref("auto") }}</li>
  <li><dfn>Applies to</dfn>all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
 Formal syntax: auto | crisp-edges | pixelated</pre>
<pre>
image-rendering: auto
image-rendering: crisp-edges
image-rendering: pixelated
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <strong>auto</strong></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.&nbsp;Since version 1.9 (Firefox 3.0), Gecko uses<em> bilinear </em>resampling (high quality).</dd>
</dl>
<dl>
</dl>
<dl>
  <dt>
    <strong>crisp-edges</strong></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>
    <strong>pixelated</strong></dt>
  <dd>
    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'.</dd>
</dl>
<div class="note">
  The values&nbsp;<span id="cke_bm_145S" style="display: none;"> </span><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">Examples</h2>
<pre class="brush:css;">
/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {
                  &nbsp;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: <code>nearest-neighbor</code>;  /* IE (non-standard property) */
                 }

</pre>
<pre class="brush:css;">
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: <code>nearest-neighbor</code>;  /* IE (non-standard property) */
}</pre>
<h3 id="Live_Examples">Live Examples</h3>
<p style="image-rendering: optimizequality;"><code>image-rendering:optimizeQuality; -ms-interpolation-mode:bicubic;</code><br />
  78%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 39px; height: 39px; -ms-interpolation-mode: bicubic;" /> 100%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 50px; height: 50px; -ms-interpolation-mode: bicubic;" /> 138%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 69px; height: 69px; -ms-interpolation-mode: bicubic;" /> downsized<img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="width: 89px; height: 89px; -ms-interpolation-mode: bicubic;" /> upsized<img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="width: 77px; height: 89px; -ms-interpolation-mode: bicubic;" /></p>
<p style="-ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges;"><code>image-rendering:-moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering:-webkit-optimize-contrast; -ms-interpolation-mode:nearest-neighbor;</code><br />
  78%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 39px; height: 39px; -ms-interpolation-mode: nearest-neighbor;" /> 100%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 50px; height: 50px; -ms-interpolation-mode: nearest-neighbor;" /> 138%<img alt="squares.gif" src="/@api/deki/files/3612/=squares.gif" style="width: 69px; height: 69px; -ms-interpolation-mode: nearest-neighbor;" /> downsized<img alt="hut.jpg" src="/@api/deki/files/3613/=hut.jpg" style="width: 89px; height: 89px; -ms-interpolation-mode: nearest-neighbor;" /> upsized<img alt="blumen.jpg" src="/@api/deki/files/3611/=blumen.jpg" style="width: 77px; height: 89px; -ms-interpolation-mode: nearest-neighbor;" /></p>
<h2 id="Specifications">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('CSS4 Images', '#image-rendering', 'image-rendering') }}</td>
      <td>{{ Spec2('CSS4 Images') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p name="Browser_Compatibility">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">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support (<code>auto</code>)</td>
        <td>{{CompatVersionUnknown()}}</td>
        <td>3.6 (1.9.2)</td>
        <td>{{CompatNo()}} [1]</td>
        <td>11.60</td>
        <td>6533.21.1, r86920</td>
      </tr>
      <tr>
        <td><code>crisp-edges</code></td>
        <td>{{CompatVersionUnknown()}} with the non-standard name <code>-webkit-optimize-contrast</code></td>
        <td>3.6 (1.9.2){{property_prefix("-moz")}}</td>
        <td>{{CompatNo()}}</td>
        <td>11.60{{property_prefix("-o")}}</td>
        <td>6533.21.1, r86920 with the non-standard name <code>-webkit-optimize-contrast</code></td>
      </tr>
      <tr>
        <td><code>pixelated</code></td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
        <td>{{CompatNo()}}</td>
      </tr>
      <tr>
        <td><code>optimizeQuality</code>, <code>optimizeSpeed</code>{{Not_standard_inline()}}</td>
        <td>{{CompatNo()}}</td>
        <td>3.6 (1.9.2)</td>
        <td>{{CompatNo()}}</td>
        <td>11.60</td>
        <td>6533.21.1, r86920</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>[1] Internet Explorer 7 and latersupports the non-standard<a class="external" href="http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx" title="http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx"><code> -ms-interpolation-mode </code>property</a> with two values (<code>bicubic</code> and <code>nearest-neighbor</code>):</p>
<ul>
  <li>applies only to images (JPG, GIF, PNG, ...)</li>
  <li>in IE7 only for images without transparency</li>
  <li>does not inherit</li>
  <li>default value IE7:<code> nearest-neighbor </code>(low quality)</li>
  <li>default value IE8+:<code> bicubic&nbsp;&nbsp;&nbsp; </code>(high quality)</li>
</ul>
<p>&nbsp;</p>
<p>Canvas can provide a <a class="external" href="http://phrogz.net/tmp/canvas_image_zoom.html" title="http://phrogz.net/tmp/canvas_image_zoom.html">fallback solution for crisp-edge/optimize-contrast</a> through manual imageData manipulation.</p>
Revert to this revision