IE7対象、CSSのみで画像の縮小サムネイルをきれいに表示させる方法
◆Tip: High quality CSS thumbnails in IE7 [Devthought]
[情報元：画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌]
HTMLで画像サイズを強制的に縮小表示させても、きれいに縮小した画像を表示させるCSSテクニックが紹介されています。対象となるのはIE7。ちなみにFirefoxやGoogle Chromeはこのようなテクニックを使用しなくてもきれいに表示されるそうです。初めて知った・・・。
小さい画像を表示する場合、通常はあらかじめ縮小した画像を用意しておきますが、このテクニックを用いれば、場合によってはサムネイルの作成の手間を省くことが出来ます。ただ、実際には表示が縮小されていても、元の画像をそのまま読み込ませているため、ページの構成によってはかえって転送量が増えてしまうことにもなります。（表示が縮小されているだけで、縮小された分だけ容量が自動的に小さくなっているわけではない、ということ。ここがサムネイル画像を用意したときとの決定的な違い。）
詳細は以下のとおり。
CSSの記述
記述は以下の1行だけ。下記の場合だとimg要素全てに適用されますが、特定の画像にクラスを割り当てて適用させたりする場合は、元エントリーにあるような書き方になります。
img { -ms-interpolation-mode: bicubic; }
実際の動作
デモページが用意されています。IE7とそれ以外のブラウザでアクセスしてみるといいでしょう。
一応、面倒な人用にIE7とFirefox3でのスクリーンショットを以下にとっておきました。
◆Firefox3.0.7にて閲覧
◆Internet Explorer 7にて閲覧
見れば分かりますが、IE7でもあまり劣化していません。それと、劣化とは関係ないですが、なぜかFirefoxのほうが画像のシャープさがやや強いように見えます。ブラウザによって画像の見え方が微妙に違う？
画像を大量に表示させるページ構成だとまったく使えません、というか使っちゃダメなテクニックだと思いますが、画像を1つだけしか使わない、というようなページには、場合によっては有効かもしれません。使いどころを見極める必要がありますね。