血統の森: Home > web実験小屋 > CSS3ウェブブラウザー実装メモ > -ms-interpolation-mode/image-rendering
作成：
更新：
再更新：
MSIEが接頭辞をおそらくはじめてつけたCSSの独自拡張。画像を拡大縮小した際のリサンプリング方法を指定するプロパティでMSIE7以降で使用可能。.NET（C#)にも同様のものがあることから、.NETからの流用と思われる。
同様のプロパティがSVG 1.1にも存在している。また、CSS Image Values and Replaced Content Module Level 3（2011-02-17 WD）に存在したが、仕様からは一度削除され、プロパティ値が変更したものが、文章更新時点では定義されている。（CSS Images Module Level 3 W3C Candidate Recommendation Draft (2020-12-17)）しかし、本文書では2010年当時のプロパティのみを扱う。
-ms-interpolation-modeIE。
| value | 説明 |
|---|---|
nearest-neighbor |
常に最近傍補間モードを使用（速度重視） |
bicubic |
常に高品質双三次補間モードを使用（画質重視） |
image-rendering（2010年当時）Firefox。MDNにはWebKitでも動作するような記述があるが、文章作成現在のWindows版WebKit Nightlyでは動作しなかった。
| value | 説明 |
|---|---|
auto |
自動。速度と画質のバランスを取る。 |
optimizeSpeed |
描画速度を優先する（速度重視） |
optimizeQuality |
品質を優先する（画質重視） |
-moz-crisp-edges |
独自拡張。optimizeSpeedと同値。描画速度を優先する（速度重視） |
CSS独自実装を使用したレンダリング（MSIE7+、Firefox）
左：nearest-neighbor 中：無指定 右：bicubic
期待されるレンダリング
（MSIE9スクリーンショット）
（MSIE7スクリーンショット）
... /* 品質重視 */ img.high { -ms-interpolation-mode:bicubic; /* IE 7+ */ image-rendering: optimizeQuality; /* Fx, (Gecko 1.9.2) */ } /* 速度重視 */ img.low { -ms-interpolation-mode:nearest-neighbor; /* IE 7+ */ image-rendering: -moz-crisp-edges; /* Fx, (Gecko 1.9.2) */ } ... <p> <img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" class="low" title="nearest-neighbor" alt="" /> <img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" title="無指定" alt="" /> <img src="./img/-ms-interpolation-mode/flower.png" width="200" height="300" class="high" title="bicubic" alt="" /> </p>
MSIE7ではズーム機能によって画面全体を拡大・縮小する場合の画像の補間方法と、img要素のwidth属性やheight属性で画像を拡大・縮小する場合の画像の補間方法に違いがある。基本的には最近傍補間モード（nearest-neighbor）で補完されるのだが、ズーム機能で倍率を変えたときのみ、高品質双三次補間モード（bicubic）で補完される。
MSIE8,9では上記のような現象は発生せず、同じ挙動を示す。