ホーム ＞ HTMLに役立つヒント＞ 画像の最適化

　ちょっと実験してみました。素材はいずれも僕の写真で、元ファイルはtiffです。元は印刷用画像なのでサイズを小さくし、TIFFはブラウザで表示できないため（無圧縮フォーマットだから1枚500KBあるし）、オリジナル画像もJPEG化しました。単純な画像と、やや複雑な画像と2種類用意して、3つのツールで圧縮した比較です。
　いずれも色調などの補正は行っていないため、MACでも暗めの画面です。よってWindowsではかなり暗く見えるでしょう。

オリジナル画像を開く。180Kあります。
オリジナル画像をweb用にjpegにしたもの。ただし無圧縮なので180Kほどあります。見たい人だけクリックしてください。別窓で開きます。	Photoshop5.5で「webで保存」した。画質は40。奥の看板にノイズが出始めている。これ以上の圧縮は無理。27,658バイト。
イメージレディで処理。画質は40。奥の看板にノイズが出始めている。ノイズはPhotoshopよりやや多い。28,095バイト。	Fireworks 3Jで処理。画質は70。奥の看板にはもうちょっと早くノイズが出始めたが、ファイル容量を他とだいたいそろえてみた。右側の赤いプラスチック容器のノイズも大きい。27,766バイト。三つの中では一番ノイズが多い。

オリジナル画像を開く。93Kあります。
オリジナル画像をweb用にjpegにしたもの。ただし無圧縮なので93Kほどあります。見たい人だけクリックしてください。別窓で開きます。	Photoshop5.5で「webで保存」した。画質は40。看板にノイズが出始めている。これがぎりぎり。10,500バイト。
イメージレディ2.0で処理。画質は40。やはり看板にノイズが見られる。10,222バイト。Photoshopよりノイズは少ない。	Fireworks 3Jで処理。画質は70。かなりノイズが目立つ。10,513バイト。

結論：
　Photoshop5.5のweb書き出し機能とイメージレディはほぼ互角。若干アルゴリズムに違いがあるのか、ノイズの出方が違っている。
　一方、ファイヤーワークスは画質・ファイル容量からして、写真をJPEG化するのに適したツールとはいえない。

　ただし、この結論はあくまで写真をJPEG化する場合である。実は仕事でGIFアニメの処理をしたことがある。そのときの比較では、イメージレディはGIFアニメが苦手である。ファイヤーワークスでGIFアニメにしたファイルの3倍の容量となったのである。このときはPhotoshopでは試していない。

　また、PNGこそが実は一番注目すべきフォーマットである。PNGはガンマ値も保存できるため、webで写真を見る場合、もっとも安心できるフォーマットなのである。がしかし、PNGはGIFに対抗して提唱されたフォーマットなので、写真は苦手なのだ。加えて、最新のブラウザではサポートされているものの、少し前のブラウザではPNGがサポートされていないのである。