コンテンツのトップページへ 超初心者向け
フォトショップ・エレメンツ de ゴーゴー!
第10回 インターネットで使える画像の研究(1)
JPEGとGIFの特長 その1. 2006/02/22
 
1.画像ファイルの保存
2.ファイル形式とは?
3.インターネットで利用されている画像ファイル形式(JPEGとGIF)

Clickで拡大

JPEGは高画質の画像か、容量サイズの小さい画像かを圧縮率で調節できる特長があります。

 
1.画像ファイルの保存
ひとつ前のページに戻るこのページのトップへ
Clickで拡大

画像A 
Photoshop Elementsで画像を新たに保存する場合は「ファイル」→「別名で保存」を選択します

Clickで拡大

画像B
「別名で保存」ウィンドウで「ファイル形式」を選択すると、保存する画像フォーマットを選ぶことができます。


 

 Photoshop Elements では、レタッチや加工した画像を様々なファイル形式で保存することができます。画像の保存はメニューバーから「ファイル」→「別名で保存」を選択して表示される"別名で保存ウィンドウ"で行います。ここでは保存するフォルダとファイル名が指定できますが、その際に「ファイル形式」も選択することができます。

 これらの操作は初心者の方でもたいていはご存じだと思いますが、さて「ファイル形式とはなに?」「どれを選んだらいいの?」と聞かれると、思わず答えに詰まってしまう人も意外と多いのではないでしょうか。

今回から数回に渡って、そのあたりを基礎から詳しく研究してみましょう。

 「ファイル形式」欄は、言い換えれば「どのような画像フォーマットで保存するか?」を指定する欄です。「▼」をクリックすると、選択できるファイル形式(画像フォーマット)が羅列されます。

 画像ファイル形式(画像フォーマット)の種類って、こんなにあるのかと驚愕するかもしれませんが、Photoshopシリーズをはじめとして、アドビシステムズ社のアプリケーションソフトの最も大きな特長のひとつが、対応しているファイル形式が豊富なことです。ただ、豊富な選択肢も初心者にとっては恐ろしく煩雑な羅列にしか見えないかもしれませんね。だからこそ、その一部でも攻略したいと思います。

 

2.ファイル形式とは?
ひとつ前のページに戻るこのページのトップへ

 ファイル形式と聞くと、みなさんはどのようなものを思い浮かべるでしょうか?

 一般には、文章などのテキスト、画像、音声、動画など様々なファイル形式がありますが、Photoshop Elementsは画像ソフトなので、一覧には画像フォーマットの一覧が表示されます。フォーマットとはそのまま直訳して形式のことです。画像のファイル形式(フォーマット)には、JPEG、BMP、GIF、TIF、RAW・・・などが有名ですね。Photoshop シリーズでは専用のPSDという形式が用意されています。Photoshop Elementsは、画面に表示して、レタッチや加工などをしている画像を、PSDをはじめとして、これら様々なフォーマットで保存することができます。


画像C

 スタグラはデジタルカメラ・ユーザーが多いウェブサイトですから、みなさんに馴染みがある画像フォーマットの筆頭は「JPEG」(ジェイペグ)ですよね。なんだか顔がつぶれたワンちゃんのような名前ですが、画像もつぶれます・・(なんて乱暴な)。デジタルカメラに限らず、JPEGは世間一般に最も多く利用されているデジタル画像フォーマットといえるでしょう。誰かが、「JPEGを世間一般に最も利用していきましょう」と言ったわけもないのに、世間一般に最も利用されているデジタル画像フォーマットと言い切ってしまう理由は、デジタルカメラとパソコン、そして何よりインターネットで利用されているからです。

 画像を保存するファイル形式、すなわちフォーマットを間違えて保存すると正しくそれを利用できません。BMPやTIF(TIFF)は、よく知られているファイル形式ですが、インターネットでは利用することができません。それでもBMPやTIFにはJPEGにはない良いところがあるので、今でも利用されているのです。

このあたりを攻略するときっともっとデジタル画像に親しみを感じることでしょうぞ。

3.インターネットで利用されている画像ファイル形式(JPEGとGIF)
ひとつ前のページに戻るこのページのトップへ
Clickで拡大
画像D
GIF形式は最大256色でカラーを表現します。色数を減らすとファイル容量は小さくなりますが、階調表現にザラ付きが発生します(Clickすると別の大きな画像で見られます)。
Clickで拡大

画像E
JPEGの最大の特長は圧縮率により、画質と容量サイズを調節できること。

Clickで拡大

画像F
画質でみると「0」が最も粗く、「12」は高画質となります。

Clickで拡大

画像G
左が最高「12」、右が低「0」で保存したJPEG画像。0で保存すれば画像の劣化は著しいものがあります(Clickすると別の大きな画像で見られます)。


 

 インターネットではJPEGとGIFが主に使われています。使えるファイル形式はほかにPNGもありますが、まずはJPEGとGIFにフォーカスして話を進めるべきでしょう。

256色のGIF

 余談ですが、僕は今から10年前、脱サラして単身、米国のシリコンバレーに渡って、仕事をすることにしました。その頃はインターネットの黎明期で、インターネットでヒトヤマ当ててやろうという野心家が起業したベンチャーがシリコンバレーには無数にあったからです。振り返ってみるとインターネットが急速に進歩して人々の生活に入り込んでからまだ10年程度しか経っていないのです。

 インターネットがまだ一般に認知される前、ネットの画像フォーマットと言えばパソコン通信(CompuServe)で利用されていた「GIF」でした。最大256色しか表現できません。日本人は「ジフ」と読みますが、米国で生活していた頃は「ギフ」と発音していました。GIFは、今でもインターネットで利用されています。

 更にちょっと余談を・・
 その頃パソコン業界は、Windows95が登場(95年末に発売されたので普及は1996年)し、一般ユーザーにも本格的なWindows時代が到来しました。デザイナーこそ100万円もするMacintoshでフルカラー画像を利用していましたが、一般ユーザは、MS-DOSでは「8色だ」とか「16色だ」とか、「FM TOWNSは256色だ」とか、Windows3.1で「256色対応のグラフィックアクセラレータボードをくっつけてどうのこうの〜」とか自慢していたわけですから、Windows95の登場でフルカラーが本格化し、今では誰もが当たり前にフルカラーを使っているのは大変な進歩と言えるかもしれません(まぁ、そんな昔話はそれほど役には立ちませんが…)。

 そういうわけで最大でも256色しか表現できない「GIF」(画像D)ですが、当時はそのきれいな画像に感動されつつ使われていたわけです。では、フルカラーのJPEGが流行っている今でも、そんなGIFが利用されている理由は何でしょうか?

 理由はいくつかありますが、それを理解するためには、その前にJPEGの特質も理解しておきたいところです。

フルカラーで非可逆圧縮のJPEG

 JPEGがインターネットで利用された最も大きな理由は、フルカラーが扱えることと、画像の圧縮にあります。JPEGは画像を保存する際に圧縮率を指定することができます。圧縮率を高く指定すればするほどファイルの容量サイズは小さくなり、その代償として画質が劣化します。逆に高画質で保存したければ、圧縮率を低く指定しますが、その代償としてファイルの容量は大きくなります。
 Photoshop Elementsでは、JPEGで保存する際に「JPEGオプション」ウィンドウが表示され、「画質」を指定することができます(画像E,F)。「0」が低画質/小容量サイズ、「12」が高画質/大容量サイズ、となります。

 圧縮によって画質が劣化して、四角くブロック状に潰れることをブロックノイズと呼んでいます。右の画面のように同じJPEGで保存しても、12(左)と0(右)で指定して保存した画質ではずいぶんと異なります。右の低画質の画像は、花弁や花びら、葉の部分にブロックノイズが見られ、おかしな色も混入(これもノイズの一種)しているのが解りますね。

 一方、GIFは最大256色のパレットから色を当てはめて表現します。水彩画を描くときに、パレットに256色の絵の具を出して、そこから一番近い色を筆にとって描くようなイメージです。圧縮ではなく、パレットの色数を減らすことでファイルの容量を減らします。
ファイルの容量を小さくするには、256色のパレットを128色にしたり、64色に減らすのです。色数(パレットの色数)が減れば、滑らかなグラデーションが出なくなったり、違う色の点を混ぜて似させる技法がとられることになり、結果的に画質は著しく低下します(画像D)。

 次回は、JPEGやGIFの更なる特長と違い、Photoshop Elements上で、どのように操作して調整すると良いのか、などの解説しましょう。

 また、更に様々な画像ファイル形式についても研究していきたいと思います。お楽しみに。


メールマガジンに登録しませんか
 
※Photoshop等はアドビシステムズ社の商標です。
 
初出:2006/02/22
  このページのトップへ
 

     
 
 

     
 
Presented by
飛鳥のWEBサイトへ
Created by
サンタ・クローチェ
トライセック
リンクについて
著作権について
プライバシーポリシー