血統の森: Home > web実験小屋 > CSS3ウェブブラウザ実装メモ > -ms-interpolation-mode/image-rendering

xreaの広告です。

hosting by xrea.com

-ms-interpolation-mode/image-rendering

作成: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-mode

IE。

value 説明
nearest-neighbor 常に最近傍補間モードを使用(速度重視)
bicubic 常に高品質双三次補間モードを使用(画質重視)

image-rendering

Firefox。MDNにはwebkitでも動作するような記述があるが、文章作成現在のWebkit Nightlyでは動作しなかった。

value 説明
auto 自動。速度と画質のバランスを取る。
optimizeSpeed 描画速度を優先する(速度重視)
optimizeQuality 品質を優先する(画質重視)
-moz-crisp-edges 独自拡張。optimizeSpeedと同値。描画速度を優先する(速度重視)

rendering

CSS独自実装を使用したレンダリング(MSIE7+,Firefox)

左:nearest-neighbor 中:無指定 右:bicubic

期待されるレンダリング


(MSIE9スクリーンショット)


(MSIE7スクリーンショット)

coding

...
/* 品質重視 */
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では上記のような現象は発生せず、同じ挙動を示す。

検証に使用したブラウザ

Internet Explorer
MSIE 7.0; .NET CLR 1.1.4322 バージョン 7.0.5730.11(リリース版)
IETester上の IE8
MSIE 9.0; Trident/5.0 バージョン 9.0.3(リリース版)
Firefox
rv:7.0.1 Gecko/20100101 Firefox/7.0.1

著作権情報

画像に関する著作権表示
© rahen z 2006.
ライセンス
Creative Commons Attribution-Noncommercial 2.0 Generic
元の画像のタイトル
Maria passed
元の画像のURL
http://www.flickr.com/photos/11179848@N00/210850987

仕様書とリファレンス

CSS Image Values and Replaced Content Module Level 3 (2011-02-17 WD) 9. Determining How to Scale an Image: The ‘image-rendering’ Property
http://www.w3.org/TR/2011/WD-css3-images-20110217/#image-rendering
Scalable Vector Graphics (SVG) 1.1 仕様 11.7.5 'image-rendering' プロパティ
http://www.hcn.zaq.ne.jp/___/REC-SVG11-20030114/painting.html#ImageRenderingProperty
msInterpolationMode Property (currentStyle, IMG, runtimeStyle, ...)
http://msdn.microsoft.com/en-us/library/ms530822(VS.85).aspx
image-rendering - MDN
https://developer.mozilla.org/en/CSS/image-rendering
image-rendering - MDN(ja)
https://developer.mozilla.org/ja/CSS/image-rendering
@IT:.NET TIPS 画像を高品質に拡大/縮小するには? - C#
http://www.atmarkit.co.jp/fdotnet/dotnettips/023resize/resize.html