GIMP2の画像ファイル保存方法
GIMP2の画像ファイル保存方法
GIMPの画像ファイル形式と言えば、「XCF（eXperimental Computing Facility）」です。
んーどうでしょう・・・よほど画像関係に興味のある人でなければ、聞いたことがないのではないでしょうか。いわゆるひとつの・・・アイドンノウ。（シゲオ）
画像ファイル形式でメジャーどころと言えば、jpeg、gifです。こちらは、一度くらいは耳にしたことがあるのではないかしら。
さて、いろいろと画像ファイル形式があるわけですが、どのように使い分ければ良いのでしょうか？今回は、次の順番でお話は進みます。
GIMPの導入手順については、記事「GIMP2の導入手順」が参考になります。
デジタル画像の基本的なこと
はじめに、デジタル画像についての基本的なお話をしておきます。
1：画像ファイルに求められること
ネット上で、静止画像ファイルを使う場合に特に気になるのは、次の2つのことではないでしょうか。
- よりきれいに表示したい。
- より速く表示したい。
この2つのことを実現するために、画像ファイルを最適な状態にしておく必要があります。
2：きれいに表示すると言うのはどういうことか？
みなさんは、デジタルカメラで撮った写真などの表示倍率を、大きくして見てみたことがあるかしら？
倍率を上げて一部分を拡大表示すると、デジタル画像は次のように四角の集まりで出来ていることが分かります。これは、画素（ピクセル）と呼ばれています。
この四角（画素）の集まり具合と、ブログに貼り付けた画像が、きれいに表示されるかどうかは、密接に関係します。
例えば、9個のマスに分けられた箱を思い浮かべてみてください。
この9個のマスに、四角を9個入れる場合より、四角を36個入れた場合の方が、より肌理（きめ）細やかな表現ができることが分かるでしょうか。
より肌理（きめ）細やかに設定できれば、表現の幅が広がるため、人間から「きれい」と感じてもらえる可能性は増えます。
この肌理（きめ）の細やかさの設定のことを、「解像度」と言います。単位には、ppi、dpiなどが用いられます。
ppi | 1インチあたりの画素数（ピクセル）を表す単位です。ピクセル パー インチ（pixels per inch）の略で、パソコンのモニタなどで使われる解像度の単位です。 |
|---|---|
dpi | 1インチあたりの点（ドット）を表す単位です。ドット パー インチ（dot per inch）の略で、プリンタやスキャナなどで使われる解像度の単位です。 |
つまり、解像度の数値（ppi、dpiの数値）が高ければ、よりきれい（鮮明）に表示されるわけです。
3：でも、表示が遅いとみんな帰ってしまう
解像度の数値が高ければ、よりきれいに表示されることは、お分かりいただけたかしら？
ただ、「それじゃあさぁ、出来るだけ解像度を高くしておけばいいってことなんだね！」と考えてしまうと、ちょっと困ったことが起きます。
解像度の数値が高いということは、それだけ情報量が多くなるので、画像ファイルの容量も大きくなりがちです。
デジタルというのは、0と1の情報で出来ている世界です。例えば、それぞれの色が次のように0と1で構成されていると仮定すると、情報量は大きく違ってきます。
左側は、0000が3個、0010が3個、0101が3個で済みますが、右側はすべて6個ずつ必要です。
左側 | 右側 |
情報量が多いということは、サーバからパソコンへ届ける量も多くなるということです。届ける量が多くなれば、表示が遅くなってしまうので、閲覧者は待っているのがいやで帰ってしまうかもしれません。
4：解像度の設定範囲
解像度が、低いときれいに見えないし、高いと表示が遅くなってしまいます。それでは、どのくらいに設定しておけば良いのでしょう。
みなさんは、自分が撮った写真を、プリンタで印刷してみたことはあるかしら？
家庭用のプリンタなどで写真を出力したときに、「肌理（きめ）が粗いなぁ」と感じた経験があるのではないでしょうか。
実は、画像ファイルが高解像度であったとしても、必ずしもそのまま「きれい」に出力されるとは限らないのです。
これは、パソコンのモニタについても同様です。出力限界があるのです。
おおよそ、画像ファイルの解像度は、次のような範囲で設定しておくのが一般的です。
モニタで表示する場合 | Macでは72ppi、Windowsでは96ppiを標準としているので、72〜100ppiくらいが目安になります。 |
|---|---|
プリンタで出力する場合 | 印刷物は、350〜400dpiが目安になります。 |
つまり、ブログに、72ppiの画像を載せても、1億ppiの画像を載せても、モニタを通して見るユーザからは、同じようにしか見えません。
「過ぎたるは、及ばざるが如し」ですね。単純に解像度が高ければ良いというものではないということが、分かっていただけたかしら？
画像ファイル形式の使い分け
1：どうして画像ファイル形式を使い分ける必要があるのか？
画像ファイル形式（jpeg、gifなど）によって、圧縮率の高いもの、機能面を優先しているものなど、得意なことが違うのです。
それぞれの画像の内容によって、最適な画像ファイル形式を選ぶ必要があるわけです。
2：ネットでよく利用される画像ファイル形式
ネットでよく利用される画像ファイル形式は、jpeg（じぇいぺぐ）と、gif（じふ）です。さらに、次のように使い分ける傾向があります。
形式 | 特徴 |
|---|---|
jpeg | 写真のような色数の多い画像に向いている。 |
gif | イラストのような色数の少ない画像に向いている。 |
必ず写真ならjpeg、イラストならgifと言うことではありませんが、不慣れなうちはそのように覚えておいて差し支えないと思います。
実際は、その画像ごとに、どの画像ファイル形式が最適かチェックして決めます。
3：ネットではあまり利用されない画像ファイル形式
さて、他にも画像ファイル形式がございます。
有名な画像ファイル形式を一部ご紹介いたします。また、どうして、あまりネット上では利用されないのか？理由を書いておきます。
形式 | 理由 |
|---|---|
png | gifの代替として登場したが、一部のブラウザで正常に表示されない場合がある。 |
psd | Photoshopで保存するときに使う。 |
xcf | GIMPで保存するときに使う。 |
bmp | 無駄に容量がかさむようで、ネットでは嫌がられている。 |
eps | 商業印刷向け。 |
tiff | 商業印刷向け。 |
ちょっと、png（ぴんぐ）については、誤解をうみそうなので、もう少し補足しておきます。
何かpngに問題があるわけではなく、高機能なpngに、古いブラウザや性能の低いブラウザが対応できていないと言った方がより正確かと思います。
pngが悪いわけではありません。
GIMP2でファイルを保存する
それでは、記事「Web素材の作り方（アイコン1）」にてxcfで保存しておいたファイルを使って、各画像ファイル形式を試してみましょう。
有名なjpg、gif、pngの3つを試してみます。
1：背景を非表示にしておく
（01）
背景を透過させたいので、レイヤーの背景を非表示にします。
背景が白塗りになっているため、表示させたままだと背景が白になります。（当たり前か）
そうすると、ブログの背景の白い箇所以外で使用すると、次のようにかっこう悪い感じになります。
2：jpegで保存してみる
jpegで保存してみます。
「ファイル」から「コピーを保存」をクリックします。
（02）
「画像のコピーを保存」が表示されます。
「ファイルタイプの選択（拡張子で判別）」のあたりをクリックします。
（03）
画像ファイル形式が、アルファベット順にずらずら表示されます。
「jpeg 画像」をクリック（選択）し、[保存]ボタンをクリックします。
（04）
ファイルをエクスポートするか聞いてくるので、[エクスポート]ボタンをクリックします。
xcfファイルから、jpegファイルを書き出すのです。エクスポートは、xcfファイルを版画の元板、jpegファイルを紙と考えれば、イメージしやすいかもしれません。
（05）
「jpeg形式で保存する」にて、特に変更する箇所もなさそうなので[保存]ボタンをクリックします。
おそらく「品質」にて圧縮率を変更できるのだと思います。
3：gifで保存してみる
（06）
gifで保存してみます。
jpg同様に「ファイル」で「コピーを保存」をクリックし、「画像のコピーを保存」で「gif画像」を選び[保存]ボタンをクリックしてください。
ファイルをエクスポートするか聞いてくるので、[エクスポート]ボタンをクリックします。
GIFアニメの場合は、ここで「アニメーションとして保存」を選択します。
（07）
「GIF形式で保存」にて、[保存]ボタンをクリックします。
「インターレース」と言うのは、モザイクなぼやっとした状態から鮮明な画像を表示させるgifの機能のひとつです。（通常は、上から少しずつ表示されます）
時間に余裕があれば、おもしろいのであとで試してみてください。
4：pngで保存してみる
（08）
pngで保存してみます。
jpg同様に「ファイル」で「コピーを保存」をクリックし、「画像のコピーを保存」で「PNG画像」を選び[保存]ボタンをクリックしてください。
ファイルをエクスポートするか聞いてくるので、[エクスポート]ボタンをクリックします。
（09）
「PNG 形式で保存する」にて、[保存]ボタンをクリックします。
5：画像ファイルを比べてみましょう
（10）
さて、これでjpeg、gif、pngと3つの画像ファイル形式で保存することができました。
どの画像ファイル形式も、エクスポートして保存しただけで、見た目にもあまり違いが分かりませんね。
ちょっと分かり難いので、拡大して見てみましょう。赤い背景に並べてみると、おおよそ次のようになります。
それぞれの特徴を整理すると次のようになります。この結果から考えると、pngにしておくと良さそうです。
jpeg | 3つの内で、最もきめ細かく色の数も多い。しかし、背景が透明にならずに白くなっている。 |
|---|---|
gif | 3つの内で、最も目が粗くカクカクしている。 |
png | jpegとgifの中間くらいに位置する感じだ。 |
（11）
次に、それぞれの画像ファイルの容量を見てみます。
jpeg | 514バイト |
|---|---|
gif | 132バイト |
png | 457バイト |
jpegは写真のような微細な画像の場合は、他の画像ファイル形式より容量が少ない傾向にありますが、この画像のようにあまり色数がないものは、他の画像ファイル形式より容量が大きくなる傾向があります。
pngにしても、gifの約3.5倍ほどあります。
これらのことを踏まえて、どの画像ファイル形式を選ぶか決めるわけです。カクカクしていても容量が少ない方が良いと思えば、gifにするとかね。
どの画像ファイル形式を選ぶかは、あなたのブログの方針によります。
どれが正解とは必ずしも言えませんが、容量を少なく済ますことを一番に考えるのが良いと思います。
なぜなら、いくらきれいに表示される画像があっても、表示が遅くてユーザが帰ってしまったら、見てもらう以前のお話しになってしまうからです。
「じゃあ全部gifにしたらいいじゃん」と思った方は、写真をgif保存してみてください。まず見られたものではありません。繰返しになりますが、画像ごとに使い分ける必要があるのです。
pngは、最適化して画像ファイルの容量を減らすことができるツールがあります。
次回予告
次回は、またWeb素材を作成してみようと思います。グラデーション、角丸などを予定しています。
えー、決めました。矢印にグラデーションにします。小さいサイズなので、角丸は止めました。
関連記事
画像編集ソフトGIMPに関連する記事を、ご紹介します。
1：GIMP2の導入
2：GIMP2で写真を編集する
3：GIMP2の基本
4：無料Web素材の作り方
作成日：2008/02/05 更新日：2008/02/05
« 「Web素材の作り方（丸1）」｜「Web素材の作り方（矢印1）」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/174-8b169eb7
