[CSS]画像を縮小表示させる際にIE7でもキレイに表示する方法

画像をCSSで縮小表示させる場合に、IE下位バージョンでは粗くなってしまい、キレイに表示されません。

IE6はあきらめるしかないですが、IE7の場合は画像の補間方法を指定することでそこそこキレイに表示させることができます。

IE 7でも縮小画像をキレイに表示

MSIE用の属性である -ms-interpolation-mode を使います。

img		{
	-ms-interpolation-mode: bicubic
}

以下は、横×高さ が 480 × 640px の画像を 幅120px に縮小表示したサンプルです。

まずはこっちが、-ms-interpolation-mode を使わずに IE7 で見た時の画像です。
微妙にジャギーが入っています。


続いて、こっちが -ms-interpolation-mode: bicubic を使って IE7 で見た時の画像です。
そこそこキレイに表示されます。

※上記サンプル画像は以下のデモページの画像をキャプチャしています。
実際にIE7 での閲覧時の違いを確認されたい方はこちら。
IE 7でも縮小画像をキレイに表示するデモ

-ms-interpolation-mode: の値

値は次の2つしかありません。

nearest-neighbor	ニアレストネイバー法 で表示
bicubic	バイキュービック法 で表示

そもそも -ms-interpolation-mode: とは？？

Microsoftのサイトによると、IE7の新機能（www の中に

msInterpolationMode
イメージの拡大に使用される補間 (再サンプリング) メソッドを設定または取得します。

Internet Explorer 7 の新機能 (スクリプト)

とあります。

要は「補間方法を設定できる」ということですので、-ms-interpolation-mode: bicubic にすることで、強制的に「バイキュービック法」で補間されます。

そもそも、色の補間方法（方式）とは？

Photoshop でもよく出てくるこの「色の補間方法」ですが、画像を拡大縮小表すると、元画像が持っているピクセルが増えたり減ったりしますので、拡大したら（ピクセルを）増やす、縮小したら減らすための計算方法（方式）のコトです。

補間方法には色々あって、よく使われるのが上記でも登場した「ニアレストネイバー」と「バイキュービック」です。

ニアレストネイバー	変更前と変更後で、もっとも近い座標の画素の値を採用する。 このため精度は低い。色数を増加させたくない場合などに用いる。 出典：アスキー
バイキュービック	変更前と変更後で、座標の近い16個の画素を用いて、3次関数で値を求める。 ニアレストネイバー、バイリニアと比較してもっとも自然な結果を得られる。 出典：アスキー

違いですが、

「ニアレストネイバー」は近くの色で穴埋めしたり、余分な色は間引くイメージです。色数は増えず、粗い画質になります。

「バイキュービック」は、かなりややこしい計算をしているようです。新たな色を作り出して補間するので色数は増えますが、概ね問題ない精度で表示されます。