HTMLのみで画像のリサイズを行いたい

HTMLで画像を表示する場合。

サイズが 200x100ピクセルの画像を表示したい場合はこんな感じに書く。

<img src="./foo.png" alt="Foo" width="200" height="100" />

width/height属性に別の値を指定すると、画像をリサイズして表示させる事ができる。例えばサムネール表示なんかに利用できる。

<img src="./foo.png" alt="Foo" width="100" height="50" />
<img src="./foo.png" alt="Foo" width="100" />

しかし、ブラウザでのリサイズは品質がよくないイメージがあり、大抵はあらかじめ縮小しておいたイメージを用意しておくことが多いように思う。あとはアップロード時に自動的に作成するとか。

オリジナルの画像とは別にサムネールの画像があるのは無駄な気がする。最近のブラウザではリサイズの品質がよくなっているかもしれない。調べてみた。

最近のブラウザでは画像リサイズの方法がいくつかあるので整理。

最後のはちょっと違う気もするが気にしない。canvas未対応のIEはexcanvas.jsで。

縦横32ピクセルのこんな画像を用意。

画像のタイプとか透過とかアルファチャンネルとかも影響するかもしれないので、以下の４種類を用意。

拡大縮小率は50%/67%/131%/200%。等倍だと最適化が働くかもしれないので中途半端な率もいれておく。それと幅/高さが違う倍率の場合も調べる。

以下のOS+ブラウザでチェックしてみた。ブラウザの名前クリックで結果を画像で表示(別ドメイン)。結構重いかも。

IE6で32bit pngが変な表示なのはしょうがないこと。

IE8はなんかちゃんと表示されない。zoom:2.0が4倍くらいになってる。excanvasは単に対応していないっぽい。あとで調べる。

Gimpのカラープロファイル対応がよくわからなくてスナップ作成に手間がかかった。これもあとで調べる。

HTMLのみで画像のリサイズを行う、ということに関してはIE8が普及するまではあんまり現実的ではなさそう。シェアの大きいIE6/IE7がネック。canvas要素をわざわざ使うのもどうかと思うし。