Oh! PaintShopPro
ファイル形式の初歩 JPEG&GIF
PSPで自慢の作品が完成し、いざホームページで公開しようと思ったら
保存した画像がとても汚くなってるという経験をした事はありませんか?

ここでは、Web用画像ファイル形式の初歩とPSPでの保存のワンポイントをご紹介します。

PSP6.0ではJPEG、GIFで保存する際にアシスタントウィザードが追加され簡単に圧縮後の画質、ファイルサイズ、通信環境別のダウンロード時間等のバランスを見ながら最適なファイルサイズで保存が出来るようになりました!FILE→EXPORTからJPEGかGIFの保存したいファイル形式を選べばアシスタント機能が実行されます。PSP7Jでは更にPNG形式のエクスポートも追加されました。

1.Web用画像ファイル形式の特徴
2.Paint Shop Proでの画像形式変換のワンポイント
 ○JPEGの圧縮率を変える。
 ○GIFで綺麗に保存する。



1.Web用画像ファイル形式の特徴

 Web用画像ファイル形式には主にJPEG形式、GIF形式、PNG形式があります。
 それぞれの特徴を下記の表にまとめてあります。
 ○、×は出来る出来ないではなく、向き不向きと言う事です。
 
 

ファイル形式 JPEG形式(*.jpg) GIF形式(*.gif) PNG形式(*.png)
画質の劣化 有り 無し 無し
色数 1677万色 256色 1677万色
写真
ロゴ、イラスト
ファイルサイズ ◎ 
(圧縮率変更可)
再加工 ×
特徴 とにかくファイルサイズが小さい。 
画質は劣化するが写真ならば分かりにくいので、写真は迷わずコレ!
256色しか使えないため、写真には向かない。 
画質は劣化せず、エッジがシャープなのでロゴはコレ!
1677万色使えて画質劣化無し。 
オススメだが、ファイルサイズが若干大きめなのと対応していないWebブラウザーがあるため使いどころが難しい。
サンプル画像 
拡大図 
(オリジナル画像データ 
写真、630*480ドット 
サイズ886KB 
ビットマップ形式)

23.6KB(圧縮率30%) 

75.5KB(圧縮率5%)

173KB

392KB
サンプル画像 
拡大図 
(オリジナル画像データ 
ロゴ、300*100ドット 
サイズ56.8KB 
ビットマップ形式)

3.24KB(圧縮率30%) 

6.4KB(圧縮率5%)

2.29KB

2.31KB

・上のサンプル画像の拡大図を見ていただければお分かりいただけると思いますが
 写真に関しては今回は画質に違いが感じられません。
 ただ、グラデーションがあるとGIF形式は256色なので極端にクォリティーが下がります。
 ファイルサイズの小ささからもJPEGが最適のようです。

・ロゴに関しては一目見て、PNG形式の圧勝です。
 JPEGは単色部分にむらが出来やすいため問題外。GIFは256色のため
 色変換の際に変なドットが混じってしまいました。

・元のイメージをそのまま残したいなら、ファイルサイズと相談してPNG選択がBetterです。



2.Paint Shop Proでの画像形式変換のワンポイント

○JPEGの圧縮率を変える。

名前を付けて保存する際に
JPEG形式にした後オプションをクリックする。
そうすると、下のような保存オプションが表示されます。
 
 
 
 
 
 
 
 
 
 
 
 
 
 

スライダーのつまみを左右に移動します。
左に寄せれば画質は良くなりますがファイルサイズは大きくなります。
右に寄せれば画質は悪くなりますがファイルサイズは小さくなります。
画像によりますが5~30程度でしょう。

ちなみに上のスタンダードエンコーディングにチェックが入っていると
読みこむ際に上から順に表示されます。
プログレッシブエンコーディングにするとモザイクが綺麗になっていくように
解像度の荒い画像が徐々に綺麗になっていき画像が表示されます。
 
 
 
 


○GIFで綺麗に保存する。

普通にGIF形式で保存しようとすると、256色以上の色を使用していてもいなくても
「256色に変換しますか?」という表示が出て、「はい」とするとGIFで保存されます。
しかし、ここで減色すると良い結果が出ないことが多いため
その前に自分で256色に減色しておいたほうが良い結果が出ることがあります。
 

カラー → 減色 → 256色(8ビット) とすると以下のようなダイアログが表示されます。

 

以下はパレットと減色方式の組み合わせのサンプルです。
 


オリジナル画像 
107色使用
近似色

グラデーションで階調が目立ちますがディザが出ないので 
イラストやロゴ向きです。

パターン

ディザがパターン化しているのが特徴です。

誤差拡散法

ディザで中間色を表現するためグラデーションが綺麗に出ます。

最適化(Median Cut)

若干色が変わってます。
--

ディザで中間色を表現しています。
最適化(Octree)

ほとんどそのままの色です。
--

ここではほとんどオリジナルのままですが、ディザが出ます。
標準

影のグラデーションが飛んで 
問題外です。

ディザで中間色を表現しています。

ディザで中間色を表現しています。

この様に減色の方法によってかなり画質に差が出てきます。
なるべくオリジナルに近く減色出来る様に、組み合わせを画像によって工夫して見てください。
画像にもよりますが、

色数の多い写真でなおかつグラデーションが多いのなら、最適化(Median Cut)-誤差拡散法
色数は多い写真だが、グラデーションは余り無い画像は、最適化(Median Cut)-近似色
イラストやロゴでグラデーションが多い場合は、最適化(Octree)-誤差拡散法
イラストやロゴでグラデーションが少なく、色や質感を余り変えたくない場合は最適化(Octree)-近似色

こういった組み合わせが一番よい結果が出るようです。

その後、GIF形式で保存するとそのまま保存できます。


以上の点に注意して画像を保存すればきっと満足する画像をホームページへ
掲載する事ができるはずです!