In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > image-rendering

image-rendering property

Browser support:

	3.6

Specifies the rendering mode for scaled images.

The image-rendering property is useful if you want to set the quality of the images scaled by the browser. Interpolated images produce smoother lines and better-looking pictures than the simple enlargement of the original, small image.

The image-rendering property is supported in Firefox from version 3.6.

In Internet Explorer, use the -ms-interpolation-mode property for similar functionality.

Possible values:

One of the following values:

-moz-crisp-edges

Same as the optimizeSpeed.

auto

Default. Same as the optimizeQuality.

optimizeQuality

Bilinear interpolation algorithm. Optimized image rendering, where the major factor is the quality.

optimizeSpeed

Nearest-neighbor interpolation algorithm. Optimized image rendering, where the major factor is the speed.

Default: auto.

Example HTML code 1:

This example illustrates the use of the image-rendering property:

<head>
    <style>
        img {
            width:150px;
            height:150px;
        }
        .bicubic {
            -ms-interpolation-mode: bicubic;
            image-rendering: optimizeQuality;
        }
        .nearest {
            -ms-interpolation-mode: nearest-neighbor;
            image-rendering: optimizeSpeed;
        }
    </style>
</head>
<body>
    High quality:
    <img src="small.jpg" class="bicubic" />
    Low quality
    <img src="small.jpg" class="nearest" />
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how you can change the value of the image-rendering property dynamically:

<head>
    <style>
        img {
            width:400px;
            height:60px;
        }
    </style>
    <script type="text/javascript">
        function ChangeRenderingMode (selectTag) {
            var ieValue = (selectTag.value == "quality") ? "bicubic" : "nearest-neighbor";
            var ffValue = (selectTag.value == "quality") ? "optimizeQuality" : "optimizeSpeed";

            var img = document.getElementById ("myImg");
            if ('msInterpolationMode' in img.style) {
                img.style.msInterpolationMode = ieValue;
            } 
            else {
                if (img.style.getPropertyValue ("image-rendering") != null) {
                    img.style.setProperty ("image-rendering", ffValue, null);
                }
                else {
                    alert ("Your browser doesn't support this example!");
                }
            }
        }

        function Init () {
            var select = document.getElementById ("modeSelect");
            ChangeRenderingMode (select);
        }
    </script>
</head>
<body onload="Init ()">
    <img id="myImg" src="small.jpg"/>
    <br /><br /><br />
    <select id="modeSelect" onchange="ChangeRenderingMode (this);" size="2">
        <option value="quality" selected="selected">bicubic (optimizeQuality)</option>
        <option value="speed">nearest-neighbor (optimizeSpeed)</option>
    </select>
</body>