一般にホームページに掲載する画像のサイズは小さいほうが表示が速いとか容量が小さくて済むとか利点があります。但しできるだけ画質は良く保ちたいという相い矛盾する要求もあります。そこでここではできるだけ画質を保ちながらJPEG画像のサイズを小さくするヒントを示したいと思います。
JPEG画像はその圧縮方法のため次のような傾向があります。
1.画像の中に反対色が多いと画質を保つのが難しく圧縮が利きにくい、反対に同系色が多い画像は圧縮率を高くしてもある程度画質を保つことが出来る。
反対色とはそれぞれの色が補色の関係にある色のことで緑に対する赤、青に対して黄色などで反対色が多いとJPEG圧縮した場合画像が荒れやすく圧縮も利きにくくなります。
2.一般に画像を拡大して見た場合ノイズのような部分が多くざらざらした画像は圧縮が利きにくい画像です。反対に画像を拡大して見た場合滑らかな画像は圧縮が利きやすくある程度画質を保つことが出来ます。
上図は全体にノイズが多い画像の例です、ちょっと見は分かりませんがこれを拡大すると下図のようになり全体にざらざらしていることが確認出来ます。
このようにざらざらした画像は圧縮が利きにくく画質も低下しやすくなります。
反対に
上の画像のようにノイズが少なく滑らかな画像は拡大してみても
滑らかですがこういう画像は圧縮が利きやすく画質も低下しにくい画像です。
この2つの画像で上のノイズが多い画像はたまたまノイズが多いだけでノイズそのものに画像としての特別な意味はありません、そしてこれが原因で無意味に画像のサイズが大きくなってしまっています。ですからホームページに掲載する画像は元画像が大きく変わらない範囲内でできるだけ無意味なノイズを取り去り可能な限りサイズを小さくしより高い画質の画像を作るようにします。
意味のあるノイズの例は下図のようにペーパーテクスチャを付加した場合などです。
ユーザーの中にはHyper-PaintでJPEG保存するより他のソフトでJpeg保存したほうが画質が良く保存できるかもしれないと心配する人があるかもしれませんが、現在メジャなソフトの場合は各ソフト間の画質の違いは無いと考えたほうがよく心配は必要ありません、これは現実を知らない雑誌記者や知ったかぶりの人が言っているだけです、確かにアルゴリズムにより違いが出る場合が無いとはいいませんがメジャなソフトでは違いは無いと考えて惑わされないようにして下さい。
以前Hyper-PaintのJPEG保存の画質が他のソフトより若干落ちるなどと言ってきた人があり、実際はその他のソフトのデフォルトクオリティが80%になっておりHyper-Paintのデフォルトクオリティが70%で、その人はデフォルトで保存していてそういうふうに勘違いして言ってきたということがありました、余り他のホームページや雑誌の記事に惑わされないようにしましょう(苦笑)
3.はっきりした輪郭線を持つ絵や急激な色の変化のある画像はJPEG圧縮では画質低下が大きく圧縮も利きません。逆に滑らかな緩やかに色が変化する画像は画質の低下が少なく圧縮が利きやすい、つまり写真のような画像はJPEGに向いているがイラストのような画像は向いていないということです。
これからWebに掲載する画像は
1.その必要のない反対色が多い画像は避ける
2.掲載しようとする画像を拡大表示して、ノイズが多く含まれていないか確認する
不要なノイズが多い画像はノイズを取り去って滑らかな画像に作り変える。
画像そのものが大きく変化してしまわないように注意する。
3.輪郭線などが多い画像はJPEGのほかGIFなども作成して、サイズや画質の両面
から比較検討してどちらを使用するか決める。
なお下図のように保存ウインドウには現在の画像を分析して「補色使用度」、「輪郭度」、「最小クオリテイ」を表示します「補色使用度」は現在の画像に補色がどれくらい使用されているかの度合いを表示します補色が多く使われていると画質の低下が大きくなります「輪郭度」は輪郭として認識される程度を表示します輪郭として認識される程度が大きくなると画質の低下が大きくなります、「最小クオリテイ」は現在の画像をJPEG保存する際にそこそこ見れる画質で保存するクオリティの最低の値を表示しますので「JPGクオリティ」のスクロールバ-の値をこの値と同じにしてJPEG保存すると鑑賞にたえる画質で最小のファイルサイズで保存できます。
「テスト」ボタンを押すとキャンバスにJPEGによる劣化の状態を表示します、保存ウインドウのタイトルバｰにはファイルサイズを表示しますのでこれらを確認しながら最適なクオリティを設定できます。
もっとサイズを小さくしたい(ギリギリまで小さくしたい人)はここのpicoptiを使ってみて下さい。
参考
GIF画像の場合は
・反対色の多い画像は使用色の数にもよりますが保存後の画像は元画像とは比較的''色''が違ってしまうことが多いと思います、またこれによっていくらかサイズも大きくなります。
・ノイズが多い画像はJPEG画像と同様保存して出来たファイルサイズが大幅に大きくなります。
・はっきりした輪郭線を持つ絵や急激な色の変化のある画像だけではGIFの場合あまり問題になりません、GIFはこのような画像は得意でサイズは比較的小さくなります。
なおGIFやPNG、BMPで減色する場合事前に「テスト」ボタンを押すことによって減色の状態を画像で確認し、保存の際のファイルサイズを保存ウインドウのタイトルバ−で確認ができます。
アニメーションや透過を必要としない場合はGIFではなくPNGを使いましょう、PNGはGIFと違って特許問題もありませんのでもっと普及に協力しましょう。(04/06/20をもってGIFの特許は切れました)
あるページにPNGはGIFに比べファイルサイズが大きいなどと書いてありましたが、そんなことは全くの認識不足です、同じ色数ならPNGのほうが高圧縮でサイズは小さくなります、恐らく書いている人は色数を考慮していないのでしょう(恐らくフルカラーPNGと256色のGIFを比較しているのでしょう)、このようにweb上の情報には思い込みや間違った情報が多数ありますので注意しましょう。
ホームページに掲載する画像をどの程度にするかは、ある程度の見切りや妥協、そして的確な判断が必要です。どのくらいの大きさが必要で、クオリティはどの位は必要であるかあるいは必要でないか等、この画像はJPEGにするのが適しているのかあるいはGIFのほうが適しているのか、他の表示の遅いホームページをみていると必要でないほどのクオリティで画像を掲載している場合がほとんどです。良い画質でみてもらいたいのは誰しも人情ですが、どのくらいの画質が必要かの''見切り''は大切です。
本当に画像のファイルサイズを小さくしたいのであれば画像作成の段階から最終的にJPEGやPNGやGIFなどのどの形式するかは初めから決めておく必要があります、そしてJPEGにするならば画像としての目的に適応しながらも出来るだけサイズを小さくするためのテクニックを画像作成の時点から考えて行います、勿論JPEGにするかPNGにするかで画像としての目的はクリアしながらファイルに保存した場合にできるだけ小さいサイズで保存できるような画像にするテクニックは異なります。。