血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > -ms-interpolation-mode/image-rendering
hosting by xrea.com
作成：2008-07-06
更新：2010-10-21
MSIEが接頭辞をおそらくはじめてつけたCSSの独自拡張。画像を拡大縮小した際のリサンプリング方法を指定するプロパティでMSIE7以降で使用可能。.NET（C#)にも同様のものがあることから、.NETからの流用と思われる。
同様のプロパティがSVG1.1にも存在している。また、CSS Image Values and Replaced Content Module Level 3（2011-02-17 WD）に存在したが、文章作成時点では、最新の草案からは削除されていることに注意されたい。
-ms-interpolation-modeIE。
| value | 説明 |
|---|---|
nearest-neighbor |
常に最近傍補間モードを使用（速度重視） |
bicubic |
常に高品質双三次補間モードを使用（画質重視） |
image-renderingFirefox。MDNにはwebkitでも動作するような記述があるが、文章作成現在の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では上記のような現象は発生せず、同じ挙動を示す。