最近のエントリ画像　サムネイルのジャギー

サムネイルの処理

先週末に処理した、各エントリページに「最近読んだ本」の画像を表示させる件がいたく気に入ったので、本棚だけでなく他の全ブログにも同じように使い回している。

それだけならただの報告に終わってしまうので、ちょっと調べて分かったこと。

このときの画像表示は高さ70pxのサムネイルにしているのだけれど、サムネイル用に別に用意することもないから、当然、縮小したときの見た目が少し、荒れてくる（ギザギザ、ジャギー）。

画像描画方法いろいろ

今回のケースとは逆に、ちょうど昨年の台北デフリンピック出場記から多用しているのが画像をクリックして拡大させる highslide.js スクリプト。これも気付くのに遅れたのはFirefoxで見て安心していたものの、どうもIE 7 ではクリックする前の、サイズを縮小指定した画像が粗くなってしまうこと。顔や目のあたりがきつ～いラインになってしまう。

これはimgに次の指定をすると解消できてIE 7 でもきれいに見える。

img { -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0+ */ }

4月に初めて知るまで放って置いた。なんだかんだとIE で見られるのが大半なので気付けて良かった・・・。

Firefoxでは何もせずきれいに見えるのは、Firefox 3.6 以降はimage-rendering プロパティーがデフォルトで auto に指定されているから。詳しくは次のページ。

image-rendering - MDC - 画像描画方法

その画像描画方法についてバイキュービック、バイリニア、ニヤレストレイバー法うんたら・・・というのがあることについては次のページが詳しい。

第十一講　解像度が足らないときはピクセルを補完する

──と、IE でも Firefox でもきれいに見えて万々歳！　で終わらないのは・・・。

どうも最近のエントリ画像のような数十ピクセル程度の小さなサムネイルにした場合、Firefox の方が今度は IE よりジャギーが目立って出てしまうこと。これは調べてみた範囲でも不明。元々、縮小率が大きいゆえにどうしようもないといえばそれまでではあるけれど、IE である程度まともに見えるのでFirefoxでも対処の仕方はありそうなのだけれど・・・。