GIMP2の画像ファイル保存方法

ブログが作りたい!GIMPで画像編集 > GIMP2の画像ファイル保存方法

GIMP2の画像ファイル保存方法

GIMPの画像ファイル保存方法

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個ずつ必要です。

左側
000000000000
000100010001
010101010101

右側
000000000000000000000000
000100010001000100010001
001000100010001000100010
001100110011001100110011
010001000100010001000100
010101010101010101010101

情報量が多いということは、サーバからパソコンへ届ける量も多くなるということです。届ける量が多くなれば、表示が遅くなってしまうので、閲覧者は待っているのがいやで帰ってしまうかもしれません。

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 画像」をクリック(選択)し、[保存]ボタンをクリックします。

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つの画像ファイル形式で保存することができました。

どの画像ファイル形式も、エクスポートして保存しただけで、見た目にもあまり違いが分かりませんね。

jpegの画像 gifの画像 pngの画像

ちょっと分かり難いので、拡大して見てみましょう。赤い背景に並べてみると、おおよそ次のようになります。

拡大した画像

それぞれの特徴を整理すると次のようになります。この結果から考えると、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に関連する記事を、一部ご紹介します。

GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。

作成日:2008/02/05 更新日:2008/02/05

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

伝わりにくい

どなたかが どこかで 同じ質問をされてましたが 回答者の方にはうまく伝わりにくい質問のようです。ここがコメント欄であるのは承知ですが 伏して質問です。フォトショで ウエブ用に保存 てのがあって ファイルの大きさによる見え方を とりあえず4種見せてくれて 変更も容易なんです。ウエブでの重さと綺麗さを選択するのに便利なのです。gimpには その操作が可能なのでしょうか?

ウエブ用に保存

モモ輔さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

んー、同様のご質問をいただいた記憶がありませんが、
もしそのような方がいらっしゃったなら、

申し訳ないことをいたしましたねー。(´・(ェ)・`)


さて、それではお答えいたします。

バージョンによっても違ってくるので、
一概には申し上げられませんが、

現行のGIMPの標準機能には、
「ない」と考えていただいてよろしいかと思います。

Photoshopや、Fireworksのように、
「ウエブ用に保存」する機能はありません。

ただ、プラグインとして存在する可能性もありますから、
もちろん「絶対」というわけではございません。

こればかりは、探してみてくださいとしか、
申し上げられませぬ。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/174-8b169eb7
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて