image-rendering

  • Revision slug: CSS/Image-rendering
  • Revision title: image-rendering
  • Revision id: 317513
  • Created:
  • Creator: gabebear
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The image-rendering CSS property provides a hint to the user agent about how to handle its image rendering. image-rendering was moved from the CSS3 specification to CSS4 ( last appearing in the 12 July 2011 Draft and reappearing in the CSS4 Working Draft ). image-rendering applies to scaled images (and other elements, see below). 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 to
    • images
    • background-images of any element
    • HTML5  {{ HTMLElement("video") }} Element
    • HTML5 {{ HTMLElement("canvas") }} Element
  • {{ Xref_cssinherited() }} yes
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified

Syntax

image-rendering:  auto | inherit | crisp-edges | pixelated | -moz-crisp-edges | -o-crisp-edges | optimizeSpeed | optimizeQuality

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 (CSS4 version)
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 (CSS4 version)
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'.
-moz-crisp-edges | -o-crisp-edges
Mozilla extension. Gecko (Firefox) always uses nearest neighbor resampling (low quality). Use this value to avoid upscaled images with sharp edges getting blurry. {{ bug("423756") }}.
-webkit-optimize-contrast
WebKit extension ({{ webkitbug(56627) }}). WebKit uses a pixelation-generating resampling. The algorithm for now seems to be nearest-neighbor, but this can be WebKit-port specific, and there are other algorithms that can be used as well. Use this value to avoid upscaled images with sharp edges getting blurry.
optimizeQuality (deprecated CSS3 draft version)
Indicates that the user agent shall emphasize quality over rendering speed. Gecko uses bilinear resampling (high quality).
optimizeSpeed (deprecated CSS3 draft version)
The user agent should use a resampling algorithm which achieves the goal of fast rendering. Currently Gecko (Firefox) uses nearest neighbor resampling (low quality).
  • Currently auto and optimizeQuality are equal by default, both result in bilinear resampling.
  • Currently optimizeSpeed and -moz-crisp-edges are equal, both result in nearest neighbor resampling.
  • Warning: Unlike the gecko rendering engine, optimizeSpeed and -webkit-optimize-contrast do not mean the same thing in WebKit.

Examples

img  { 
       image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is identical, no need to specify */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
     }
/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {

                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   -ms-interpolation-mode: nearest-neighbor;  /* IE */
                 }
html  { image-rendering: -moz-crisp-edges; }        /* all images, videos, background-images */
img   { -ms-interpolation-mode: nearest-neighbor; } /* all images, IE */
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;
}
video { image-rendering: optimizeSpeed; }

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

Notes

  • {{ bug("486918") }} (Awful image quality in downscaling)

Specifications

Specification Status Comment
{{ SpecName('SVG1.1', 'painting.html#ImageRenderingProperty', 'image-rendering') }} {{ Spec2('SVG1.1') }}  

There isn't any CSS specification defining this property.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

image-rendering: auto | -webkit-optimize-contrast

3.6 (1.9.2)
image-rendering
7.0
-ms-interpolation-mode: bicubic | 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)

11.60

image-rendering: auto | -o-crisp-edges | optimizeSpeed | optimizeQuality

6533.21.1, r86920

image-rendering: auto | optimizeSpeed | optimizeQuality | -webkit-optimize-contrast

  • -webkit-optimize-contrast is similar to -moz-crisp-edges, in that it selects the pixelation algorithm over the blurry algorithm for scaling. Pixelated scaling algorithm for now seems to be nearest-neighbor.
  • -webkit-optimize-contrast implemented in the WebKit nightlies as of May 20th, 2011.
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also  Microsoft MSDN -ms-interpolation-mode property

Canvas can provide a fallback solution for crisp-edge/optimize-contrast through manual imageData manipulation.

Revision Source

<p>{{ CSSRef() }}</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;<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal; ">image-rendering&nbsp;</span>was moved from the CSS3 specification to CSS4 ( last appearing in the&nbsp;<a href="http://www.w3.org/TR/2011/WD-css3-images-20110712/" title="http://www.w3.org/TR/2011/WD-css3-images-20110712/">12 July 2011 Draft</a> and reappearing in the&nbsp;<a href="http://dev.w3.org/csswg/css4-images/Overview.src.html" title="http://dev.w3.org/csswg/css4-images/Overview.src.html">CSS4 Working Draft</a>&nbsp;).&nbsp;<code>image-rendering </code>applies to scaled images (and other elements, see below). 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>
    <ul>
      <li style="display: list-item; list-style-type: disc;">images</li>
      <li style="display: list-item; list-style-type: disc;">background-images of any element</li>
      <li style="display: list-item; list-style-type: disc;">HTML5&nbsp; {{ HTMLElement("video") }} Element</li>
      <li style="display: list-item; list-style-type: disc;">HTML5 {{ HTMLElement("canvas") }} Element</li>
    </ul>
  </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>
image-rendering:  auto | inherit | crisp-edges | pixelated | -moz-crisp-edges | -o-crisp-edges | optimizeSpeed | optimizeQuality</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 (CSS4 version)</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><strong>&nbsp;(CSS4 version)</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>
<dl>
  <dt>
    <strong>-moz-crisp-edges</strong>&nbsp;|&nbsp;<strong>-o-crisp-edges</strong></dt>
  <dd>
    <a class="internal" href="/en/CSS/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Mozilla extension</a>. Gecko (Firefox) always uses&nbsp;<em>nearest neighbor</em>&nbsp;resampling (low quality). Use this value to avoid upscaled images with sharp edges getting blurry. {{ bug("423756") }}.</dd>
  <dt>
    <strong>-webkit-optimize-contrast</strong></dt>
  <dd>
    WebKit extension ({{ webkitbug(56627) }}). WebKit uses a pixelation-generating resampling. The algorithm for now seems to be nearest-neighbor, but this can be WebKit-port specific, and there are other algorithms that can be used as well. Use this value to avoid upscaled images with sharp edges getting blurry.</dd>
</dl>
<dl>
  <dt>
    <strong>optimizeQuality (deprecated CSS3 draft version)</strong></dt>
  <dd>
    Indicates that the user agent shall emphasize quality over rendering speed. Gecko uses<em> bilinear </em>resampling (high quality).</dd>
  <dt>
    <strong>optimizeSpeed</strong><strong>&nbsp;(deprecated CSS3 draft version)</strong></dt>
  <dd>
    The user agent should use a resampling algorithm which achieves the goal of fast rendering. Currently Gecko (Firefox) uses<em> nearest neighbor </em>resampling (low quality).</dd>
</dl>
<div class="note">
  <ul style="margin: 0px; padding: 0px 0px 0px 1em;">
    <li>Currently<code> auto </code>and<code> optimizeQuality </code>are equal by default, both result in <em>bilinear</em> resampling.</li>
    <li>Currently<code> optimizeSpeed </code>and<code> -moz-crisp-edges </code>are equal, both result in <em>nearest neighbor</em> resampling.</li>
    <li>
      <p>Warning: Unlike the gecko rendering engine, <code>optimizeSpeed&nbsp;</code>and <code>-webkit-optimize-contrast<strong> do not mean the same thing </strong> in WebKit.</code></p>
    </li>
  </ul>
</div>
<h2 id="Examples">Examples</h2>
<pre>
img  { 
       image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is identical, no need to specify */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
     }</pre>
<pre>
/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {

                  &nbsp;image-rendering: -moz-crisp-edges;         /* Firefox */
                   -ms-interpolation-mode: <code>nearest-neighbor</code>;  /* IE */
                 }</pre>
<pre>
html  { image-rendering: -moz-crisp-edges; }        /* all images, videos, background-images */
img   { -ms-interpolation-mode: <code>nearest-neighbor</code>; } /* all images, IE */
</pre>
<pre>
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;
}</pre>
<pre>
video { image-rendering: optimizeSpeed; }</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>
<h3 id="Notes">Notes</h3>
<ul>
  <li>{{ bug("486918") }} (Awful image quality in downscaling)</li>
</ul>
<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('SVG1.1', 'painting.html#ImageRenderingProperty', 'image-rendering') }}</td>
      <td>{{ Spec2('SVG1.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p name="Browser_Compatibility">There isn't any CSS specification defining this property.</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</td>
        <td>
          <p><code>image-rendering: auto | -webkit-optimize-contrast</code></p>
        </td>
        <td>3.6 (1.9.2)<br />
          <!-- br--><code>image-rendering</code></td>
        <td>7.0<br />
          <code>-ms-interpolation-mode: bicubic | nearest-neighbor</code>
          <ul style="margin-top: 1em; margin-bottom: 0px;">
            <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>
        </td>
        <td>
          <p>11.60</p>
          <p><code>image-rendering: auto | -o-crisp-edges | optimizeSpeed | optimizeQuality</code></p>
        </td>
        <td>
          <p>6533.21.1, r86920</p>
          <p><code>image-rendering: auto | optimizeSpeed | optimizeQuality | -webkit-optimize-contrast</code></p>
          <ul>
            <li>-webkit-optimize-contrast is similar to -moz-crisp-edges, in that it selects the pixelation algorithm over the blurry algorithm for scaling. Pixelated scaling algorithm for now seems to be nearest-neighbor.</li>
            <li>-webkit-optimize-contrast implemented in the WebKit nightlies as of May 20th, 2011.</li>
          </ul>
        </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>
<p>See also&nbsp; <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">Microsoft MSDN<code> -ms-interpolation-mode </code>property</a></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