CSSで縮小した画像をIE7できれいに表示する方法
サムネイル画像として、元画像をCSSでそのまま縮小表示させてときに、IEではきれいに縮小処理されず、ジャギの目立つ粗い画像になってしまう。
IEのバージョンによって画像縮小の処理方法が違うらしい。
IE6：バイキュービック。CSSによる回避方法なし
IE7：バイキュービック。CSSで回避可能
IE8：ニアレストネイバー。
IE9：不明（バイキュービック？）。回避方法なし
※バイキュービックはジャギが目立つ。ニアレストネイバーはジャギが生じない。
IE8は問題がなく、IE7は下記CSSの指定でニアレストネイバー処理をしてくれる。
img { -ms-interpolation-mode: bicubic; }
その他のIEは対応方法が無いということで、全てのバージョンで画像をきれいに縮小表示するためには、指定のサイズに縮小した画像を用意し表示するしかなさそう。
とりあえずIE7だけでもCSSで処理しようとした場合、さらに注意点がある。
アニメーションgifを使っている場合、2枚目以降のアニメーション画像にこのCSS指定が効かない。
アニメーションgifは２枚以上の画像を切り替えて表示しており、ブラウザに表示した最初の画像はニアレストネイバー処理されるが、２枚目以降は処理されない状態で表示される。
アニメーションgifを縮小して表示することはなさそうだが、アニメーションgifと重ねて表示している画像も同様の現象が起こる。
たとえば自分の場合だと、ローディング用アニメーションgifの上に、読込み完了後の縮小指定画像を重ねて表示しており、このとき縮小指定画像がアニメーションでなくてもローディングの画像の影響か、アニメーションのタイミングで粗い画像ときれいな画像がチカチカと入れ替わるという現象が起こった。
これはjQueryで画像の読込み完了と同時にローディング画像を削除なり非表示にすることでOKとなる。
ただ、これだけの手間をIE7だけにするかどうかは、現場ごとに判断がわかれそう。