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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > msInterpolationMode

msInterpolationMode style property

Browser support:

7

Sets or retrieves the interpolation algorithm for scaling an image.

The msInterpolationMode 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 msInterpolationMode property is supported in Internet Explorer from version 7.

In Firefox, use the image-rendering property for similar functionality.

Syntax:

object.msInterpolationMode;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -ms-interpolation-mode

Possible values:

The type of this property is string.

One of the following values:

bicubic

Complex interpolation algorithm to make higher quality large images by processing small ones.

nearest-neighbor

Simple interpolation algorithm to enlarge images. The image quality is lower than with the use of bicubic, but the process is faster this way.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the -ms-interpolation-mode 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 illustrates the use of the msInterpolationMode property in JavaScript:

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