あなたの画像のファイルサイズはまだまだ小さくできる！

　ホームページを作る際に使う画像ファイルは重くなりがちです。できるだけ高画質でこの画像をみんなにみてもらいたい。でも、高画質にすればそれだけファイルサイズが大きくなって、表示に時間がかかり、見てもらえないことも。

　仕方がないので、ファイルサイズを小さくするためにJpegの圧縮率を落とすと、「ぁあ、こんなにきたないファイルならみんなに見てもらわなくてもイイや」なんて。。。

　サムネイルを使うのは当然として、ここでは、一歩進んで、高画質を保ったままでファイルサイズを減らす方法を勉強しましょう。

（サムネイルとは、縮小した画像をサンプルとして並べておき、それぞれの画像をクリックすると、高画質でファイルサイズの大きいオリジナルサイズの画像を見せる手法のことです。）

　 GIF形式とJPEG形式を使い分ける

　まず、gifファイルとjpgファイルの使い分けをしっかりとしましょう。基本的に、gifは色数が少ないイラストやアイコン、もしくはべた塗りが多い画像に最適。jpegは色数の多いデジカメの画像やグラデーションが存在する画像に最適です。

　また、色や境界線をはっきり出したい場合にはgifが向いていることがあります。

jpegファイル。色がにじんでくすんだ感じになる。	gifファイル。くっきり表現されています。

　まずは、使いたい画像によって、適切なファイル形式を選ぶようにしましょう。

　 GIFファイルのサイズダイエット基本方針

　gifでファイルのサイズを減らしたいのなら、まず色数を減らすことです。フルカラーの画像を減色する際に高画質を保ちたいのなら、ツールを使いましょう。特に、Padieというツールは、フリーツールながら、フォトショップよりも高画質な減色を行ってくれるのでお薦めです。

　また、画像の縦横サイズを縮小するのもいいのですが、色数が少ないgif画像の縦横サイズを縮小すると、色数が増えてかえってファイルサイズが多くなる事があるので注意してください。以下の例を見てみましょう。

　この画像のファイルサイズは4.32KB（8色）です。これを縮小すると、どうなるでしょうか。

縦横サイズを70%に縮小したところです。画像の縦横サイズは小さくなっているのに、ファイルサイズが6.68KB（128色）に増えています。

　
　これはナゼでしょう？

元画像の、文字の部分を拡大すると、こんな感じになっています。黒と白の二色だけしか使われていませんね。

縮小後の文字部分を拡大すると、境界部分に、元画像にはなかった中間色が生じています。縮小処理の際に、画像を綺麗に見せるために中間色が生成されたのです。このせいで、画像の縦横サイズが小さくなっても、色数が増えたため、画像のファイルサイズは増えてしまったのです。 　（いわゆるアンチエイリアスという処理がこれです。境界部分に中間色を使って、境界の「ギザギザ」感を緩和する手法です。）

　こういうときはアンシャープマスクなどのフィルターをかけたり、コントラストをあげたり、減色処理を行うなど、新たに生じた色数を減らすか、もしくは縮小処理の際にアンチエイリアスを使わない処理方法を使うなど、工夫が必要になってきます。

　 JPEGファイルのサイズダイエット基本方針

　次に、jpegでファイルのダイエットですが、jpegファイルの場合は、gifファイルと異なり単純に画像の縦横サイズを小さくしたり、画像をぼかす処理だけでサイズを小さくできます。

　また、jpegの圧縮性能は利用する画像ソフトの性能によって決まってきます。高価なソフトは高性能な圧縮技術を使っているので、そういったソフトを使えば、より高画質を保ちながらサイズを小さくできるのです。

　また、jpegファイルは何度も開いて編集しないようにしましょう。jpegファイルは、「非可逆的」圧縮、つまり、保存時に悪化した画質は、もう元に戻せないという圧縮技術を使っています。と、いうことは、jpegファイルを開いて保存することを何度も繰り返していると、どんどん画質が悪くなっていく可能性があります。

　その場合は、加工前の画像をbmp形式、若しくは圧縮率を低くしたjpeg形式で予め保存してから作業をし、後日加工したくなったら、その保存したファイルを使うようにしましょう。

　 Jpegファイルのぼかしテクニック

　Jpegファイルは、ぼかせば単純にサイズが小さくなります。これは、ぼかすことにより、隣り合う色同士が似通ってくるため、効率よく圧縮できるからです。

オリジナル画像（画質95%） ファイルサイズ9.19KB	かるいぼかしをかけた画像（画質95%） ファイルサイズ7.74KB

　ただし、全体にまんべんなく「ぼかし」処理をかけると、画像の主体までをもぼかしてしまいます。そこで、「投げなわツール」等で、画像の主体（この画像では、人物）を適当に囲み、選択状態にします。次に、「選択範囲の反転」を行い、主体以外の部分を選択状態にします。そうしておいてから「選択範囲のぼかし」をかけ、境界線をなだらかにします。そして、最後に「ぼかし（ガウス）」処理を行います。（用語は全てフォトショップのものです。お使いのソフトによっては処理の名前が異なる場合があります。）

すると、画像の主体にはぼかしがかからずに、周囲の不要な部分だけぼかしがかかります。 周囲にぼかし（ガウス）をかけた画像（画質95%） ファイルサイズ 7.18KB

　この程度の大きさの画像ファイルではそれほど差が出てきませんが、大きいファイルなら大きいほど効果が出てくるでしょう。

　 Jpegファイルの背景処理テクニック

　Jpegファイルはその性質上、同じ色が連続すると圧縮率が良くなります。かといって、背景を単色で塗りつぶすのは大変です。そこで、こんなテクニックを。

　画像の大きさより若干小さめに、四角や円で選択範囲を作ります。次に、「選択範囲の反転」を行い、画像の縁部分だけを選択させます。そして、「選択範囲のぼかし」をかけ、境界線をなだらかにしてから、選択状態の部分を切り抜きます。

すると、このように、幻想的な雰囲気を生みつつ、サイズを落とすことが出来ます。切り抜いた際の、バックカラー（この例では白）は自由に設定できるので、バックカラーをページの壁紙の色に合わせれば、更に良いでしょう。 背景を処理した画像（画質95%） ファイルサイズ 7.97KB

　 Jpegファイルの明るさテクニック

　Jpegファイルは連続している色が似通っていれば効率のいい圧縮が可能です。ということは、明るさをわざとあげたり、下げたりして、明るすぎ、もしくは暗すぎる画像も圧縮率が良くなります。

明るさをあげ、ガンマも若干あげました。この程度なら、画質を保ちつつ、原画の雰囲気を損なわずに、ファイルサイズを落とすことが出来ます。明るさをあげると不自然な画像になるときは、それにあわせて済度を落とすといい感じになることがあります。 明るさをコントロールした画像（画質95%） ファイルサイズ 6.88KB

　ここまで書けば気付くと思いますが、モノトーン（白黒）やセピア色の画像も、ファイルサイズを効率的に落とすことが可能です。

白黒カラーに変換した画像（画質95%） ファイルサイズ 7.98KB

[ 戻る ]