ウェブアートデザイナー保存時のファイルサイズ | ホームページビルダー・グレート初心者講座

　ホームページビルダー・グレート初心者講座

　ウェブアートデザイナーで画像を保存する際のファイル形式

ホームページビルダーに付属する画像編集ソフト「ウェブアートデザイナー」の
操作方法について説明してきます。

画像を保存する際に選択できるファイルタイプや保存の設定を説明しています。

　編集していた画像の保存

インターネット上で使用できる形式に保存するにはツールバーの
「ファイル」から「WEB用保存ウィザード」を実行します。

携帯用のホームページなどは特定の形式しか使えない場合もありますが、
パソコン向けのホームページに使用する場合は、保存する画像によって
適した形式を選択すれば良いと思います。
WEB用保存ウィザードは途中で戻り、形式の選択からやり直す事ができますので、

GIF

・ 256色（インデックスカラー）
・透過ができる
・アニメーションができる

単純なイラストなどに適した形式です。
色数が256色までしかありませんので、写真などには適しませんが、
単色や少ない色数のイラストなどは他の形式に比べ、サイズを小さくする事ができます。
イラストでも滑らかな描写が必要なものなどはJPEGもしくはPNGの方が適しています。

JPEG

・ 1670万色（24ビットフルカラー）

写真に適した形式です。
ファイルサイズを小さくするには「品質」を落として調節しますが、品質を落とすと
ブロック状のノイズが出ます。
写真や文字の入った詳細なイラストなどはPNGのほうが小さく鮮明になる場合も
ありますので、ウィザードを途中で戻り、画質やサイズをPNGと比べてから決めても
良いと思います。

PNG

・フルカラー
・透過ができる

文字が入ったり詳細なイラストに適した形式です。
写真によってはPNGのほうが小さくなる場合もあります。
規格上は24ビットフルカラー（1670万色）の他、48ビットフルカラーも扱えます。
比較的新しい規格の為、古いブラウザで表示できない可能性がありますが、
現在のブラウザでは問題なく表示できます。

　実際に保存した例

色々な画像を各形式で保存してファイルサイズや劣化の度合いなどを確認します。
ここでは小さな画像の為、差が数バイトしかありませんが、数十KB～数百KBの
大きな画像になると、数十KB単位の大きな差ができます。

保存時にGIF形式とPNG形式は「ディザ」の有無を設定できます。
ディザとは、色数を少なくした場合も立体感などを保つ為の粒々で、「あり」にすると若干
サイズが大きくなります。
画像によっては「なし」のほうが綺麗に見えますので、プレビュー画面で確認しましょう。

グラデーションの画像

グラデーションの画像をデフォルトの設定で保存してみました。
GIFは色数が少ない為に段々になりグラデーションが正しく表現されていません。
JPEGは多少縦に線が入ったようなノイズが入っています。
PNGは全く劣化しておらず、ファイルサイズも一番小さくなりました。

JPEGをPNGと同じサイズまで小さくしようと思うと、さらに激しいノイズが入ります。

GIF	JPEG	PNG
1.31KB	0.988KB	0.705KB

・ 256色・ディザ有・透明化	・品質 75	・フルカラー

グラフの場合

簡単なグラフの画像をデフォルトの設定で保存してみました。
GIFはサイズが小さく画像も正しく表現されています。
JPEGはかなりノイズが入っており、さらにサイズも最も大きいです。
PNGはフルカラーにしたので若干サイズが大きくなりましたが、その下の
256色のものは GIFよりも小さくなっています。

GIF	JPEG	PNG
1.54KB	2.83KB	2.64KB

・ 256色・ディザ有・透明化	・品質 75	・フルカラー

		PNG
		1.38KB

		・ 256色

写真の場合

写真を保存してみました。
GIFは256色の為、微妙な部分がつぶれています。

JPEGは最もサイズが小さく、劣化も少ないです。
品質を100にすると劣化はほとんど無く、サイズも24.4KBとPNGに比べると小さいです。

PNGは劣化がほとんど無かったものの、サイズが異常に大きくなってしまいました。
256色にするとサイズは小さくなりましたが、色数が少ない為につぶれています。

GＩＦ	JPEG	PNG
16.3KB	5.37KB	55.6KB

・ 256色・ディザ有・透明化	・品質 75	・フルカラー

	JPEG	PNG
	24.4KB	14.6KB

	・品質 100	・ 256色

　各ファイル形式の比較

イラストなどは画質、サイズ共にPNGが非常に優秀な結果になり、写真については
JPEGが最も良い結果です。
GIFは単純なイラストで比較的良い結果だったものの、同じ画質であればPNGのほうが
若干サイズが小さくなる結果となりました。

PNGはイラストであればGIFに対して画質、サイズ共に優秀ですが、比較的新しい規格の為、
古いブラウザでは表示できない場合があるようです。
携帯の一部のブラウザなどを除けば現在のブラウザでは問題なく表示できます。

ほとんどの場合、上記と同じような結果になると思いますが、画像によっては
逆の結果になる事もありますので、保存ウィザードでサイズが確認できる画面まで進み、
サイズや画質を確認したら、戻って別の形式も確認してみると良いと思います。

>> ウェブアートデザイナーの説明一覧へ戻る