ここでは,主に当サイトでよく使用される画像ファイル形式について簡単に説明したい。
画像を編集して使う場合,使用する編集ソフト(ワープロや画像編集ソフトなど)で利用できる画像ファイル形式をご確認ください。
● 概要
画像ファイルには大きく別けて以下の2つの系統がある。
- ラスタ(ペイント)系……代表的形式: JPEG,GIF,PNG。
代表的アプリ: アドビフォトショップ,MS ペイント,Gimp。
- ベクタ(ドロー)系……代表的形式: SVG,WMF,EPS,ODG。
代表的アプリ: アドビイラストレーター,Inkscape。その他,オフィスアプリのワープロなどで使う線画もこの系統。
「イラスト」で使うのならこちらの形式がおすすめ。ただし,お使いのソフトがこれら形式に対応しているかどうかは要確認。
次章以降でそれぞれの特徴を簡単に述べてみる。
● ラスタ(ペイント)系ファイル形式
ラスタ系は,キャンバスに絵の具で描くような,一般的なお絵描きに近い形式。画像は「画素(ピクセル)」と呼ばれる点の集まりでできていて,その点ごとに,何色かを決めてひとつの画像になる。
データ形式として「ラスタ画像」と呼ばれ,その形式の画像編集アプリのことを「ペイントソフト」などと呼ぶことが多い。
画素が「(正方形の)点」で,その集まりであるために,拡大するとその点が大きくなって「モザイク」のように見えたり,境界が「ギザギザ」になったりすることがある。また逆に縮小したり,90°の倍数以外の回転をすると,「にじみ」が出たりすることがある。だから,イラストとして使う時,拡大や縮小,回転させたりすると画質が落ちる可能性があるので要注意。ただし,ワープロの編集画面上で縮小した場合は,画面上では「にじみ」が見えていても,印刷すると元の解像度近くまで画質が上がることも多い。一方,「拡大」すると確実に画質が落ちる。
▼ 描画法「ペイント」と「ドロー」の違い |
ラスタ系画像ファイルを修正する場合,たとえば何かを「消したい」時,通常は「上から背景で塗り潰す」ことになる。青い背景の前にある何か別の画像を消したい時は,そこを背景と同じ青で塗り潰すことで,その画像を「消す」処理をすることになる。だから,背景が複雑な画像だと,「消す」だけでもちょっとたいへん。もし背景画像だけ別に保存できるなら,消したい部分をコピペで対応すると,少しラクできる。
が,編集や修正は後述「ベクタ画像」のほうが断然ラクである。
ここでは以下のラスタ系形式について述べる。
- JPEG
- GIF
- PNG
◆ JPEG(Joint Photographic Experts Group)
主に「写真」に使用される。境界のハッキリしない画像に適しているため,「線画」や,色指定で描かれるようなイラストには向かない。
拡張子(ファイル名の末尾)は“.jpg”,“.jpeg”などが多い。
ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがある。
JPEG は「透明」の画素を持たないため,イラストとして使う時に他の画像と組み合わせて使うと,背景の前面に置いた画像の周囲に,余白が四角く残ることがある。これを避けたい場合,余白の白い部分を透明として扱うよう指定できる機能がアプリに必要。それができない時は,画像を重ねるような加工をしたりせずにそのまま使うか,文字を前面に置く(画像を文字の背後に置く)ような使い方が適する。
▼ JPEG 画像を編集すると…… |
高い圧縮率,画質の指定ができるなどの特徴がある。一般的なものは「不可逆圧縮」で,ファイルをそのままコピーしている限り劣化しないが,編集を繰り返すと劣化する。ただ,最近では劣化のない可逆圧縮の規格もできたらしいが,あまり使われているような話は聞かない。
一般的なウェブブラウザでそのまま表示できることが多い。
◆ GIF(Graphics Interchange Format)
イラスト向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.gif”。
ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがある。
多重レイヤ(=1ファイルにいくつもの画像の「層」を収録できる)に対応していて,レイヤごとに 24 ビット(約 1677 万)の色から特定の 256 色までを選び,点(ピクセル)ごとに割り当てて収録される。
その「層」を時間を置いて表示させて,「パラパラアニメ(動画)」のように見せることが可能。「猫 GIF」とかっていうのはコレ。
「透明」の指定もできるので,余白に「透明」が指定されている画像では,背景の前に置いても JPEG のような四角い余白はできない。が,「100% 透明か色着きか」であり,「半透明」という指定はできないので,ただポンと置いただけでは,背景との境界がなめらかな合成画像にはならないことが多い。この点は後述の PNG のほうが有利。
▼ GIF 画像を編集すると…… |
「可逆圧縮」のため,色の設定を変更しない限り,編集を繰り返しても劣化しない。圧縮率は,色数が少なければまぁまぁの高圧縮率。
一般的なウェブブラウザでそのまま表示できることが多い。
◆ PNG(Portable Network Graphics)
イラスト向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.png”。
ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがあるが,境界線に透明度が使われていると,ある程度「滑らかさ」を保つことがある。
点(ピクセル)ごとに「透明度(アルファチャンネルとも言う)」を指定できるところが GIF と異なる。たとえば「全体が半透明な画像」を作ることもできて,その場合,背景が透けて見えるようになる。境界部分の透明度がうまく調整された画像では,他の画像の前に置いて合成した時,境界が適度にぼかされて,自然な感じで背景に溶け込む。
▼ PNG 画像を編集すると…… |
「可逆圧縮」のため,色の設定を変更しない限り,編集を繰り返しても劣化しない。圧縮率は,GIF より多少高いが,多くの色数を収録していることが多く,同じ画像でも結果としてサイズが大きいことが多い。同じ色数なら GIF よりサイズが小さくなることが多い。
「48 ビット」などという,人の目では識別できないレベルの色設定もできるらしい。
一般的なウェブブラウザでそのまま表示できることが多い。
● ベクタ(ドロー)系ファイル形式
ベクタ系はラスタ系とは異なり,自由に形を変えられる,色の着いた「ゴム板」あるいは「のし粘土」みたいな感じのものを重ねていくような描画法。これが紙だったら「切り絵」のような感じだが,「ゴム板」と言ったのは,ベクタ画像ではいくらでも自由に形を変えられるため。
データ形式として「ベクタ画像」と呼ばれ,その形式の画像編集アプリのことを「ドローソフト」などと呼ぶことが多い。
キャンバスを,数学で使う座標のついたグラフと考え,「点」の位置を座標上の x 軸,y 軸の数値で表わし,「この点とこの点を通る線があって,内部は××色で塗り潰されているゴム板」的なデータを1つの部品として扱い,その集まりで画像を構成する。
▼ 「ドロー」描画法の構造 |
拡大や縮小,回転などの編集をすると,コンピュータが,線が通る点の座標が「拡大,縮小,回転させるとどの位置に来るか」の数値を計算で求めて,その都度「画像を作り直す」ような処理をしている。そのためラスタ画像のように「モザイク」が目立ったり,境界が「ギザギザ」になったりせず,また 90°の倍数以外の回転をしても「にじみ」なども出ない。縦や横だけ伸縮させたり,ナナメに傾けたりする変形もできるうえ,部品ごとにコピーもできるので,ワープロやプレゼン作成ソフトなどでこの形式が使えれば,拡大,縮小,回転,変形,コピーなど,様々な加工と応用が利き,イラストではたいへん便利な形式。
「ゴム板」の部品単位でコピーしたり切り取ったりすることができるため,編集時,たとえば何かを「消したい」なら,その部品(ゴム板)を削除するだけ。部品を「重ねて」画像を構成しているため,たとえば「重なって描かれているものの手前は消さずに奥だけを消す」といった修正の場合も,その「奥の部品を消す」という操作だけで済む。これが「ペイント系」ソフトでは,手前の画像を消さずに奥だけを消す作業は面倒なことが多い。また,遠くにあるものと近くにあるものの位置関係を逆にしたい時も,ドローであれば,重ね順を変更して,拡大・縮小と組み合わせれば簡単……などなど,編集がいろいろとラクにできる。
筆者が障害者向けにパソコン指導をする際,「絵を描きたい」という要望が出たら,なるべくこの形式での描画を指導することにしている。というのは,描いた線を後から形を変えて修正できるため。テンキーを利用した「マウスキー機能」や,一部の障害者向け機器などでのマウス操作では,上下左右と斜めの8方向しか動かせず,前述のペイントソフトで線を引くと,それら8方向の直線以外は描きにくい。一方,ドローソフトを使うと,それらのマウス操作でも,一度描いた直線を,後から滑らかな曲線にいくらでも修正することが可能になる。
実際にこの方法で指導した方で,絵だけでなく文も書いて本まで出した方の話が以下にある。
筆者サイトのイラストも,たいていこの方式で描いている。
ここでは以下のベクタ系形式について述べる。
- SVG
- WMF
- EPS
- ODG
◆ SVG(Scalable Vector Graphics)
イラスト,特に「線画」向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.svg”だが,圧縮をしたものは“.svgz”の場合がある。
ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが,XML という形式の文字で表現されて,収録される方式。
編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは要確認だが,SVG 形式はベクタ画像ファイルとしては標準形式的な扱いなので,取り込めるアプリはワリと多いと思われる。
データサイズは「部品の数」によるため,部品の数が少ないイラストなら,画像の大きさに関わらずファイルのサイズは小さくなる。XML というのは,テキスト(文字)データの記載形式のため,圧縮されていない SVG ファイルをエディタなどで開くと,その「座標の数字」が見れるが,当然数字ばかりで何の絵だかは分からない。
圧縮ファイルの場合は「文字の圧縮」であり,可逆圧縮のため編集を繰り返しても劣化しない。ただし,圧縮に対応した閲覧ソフトが要る。
圧縮のないもの(.svg)は一般的なウェブブラウザでそのまま表示できることが多いが,古いブラウザでは未対応なものもあると思われる。
ドロー系フリーソフトの代表格である Inkscape(インクスケープ)でも標準のファイル形式。当サイトのイラストはこのソフトを利用させてもらっているものが多い。
◆ WMF(Windows Meta File)
イラスト,特に「線画」向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.wmf”。
ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される方式。
編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは,要確認。
前節 SVG と異なりバイナリ形式なので,エディタなどで開いても,数字どころか何もわからない。が,ファイルのサイズが多少小さい。
SVG より古くからある形式のようで,この形式に対応しているアプリは SVG より多いらしい。筆者も,異なるアプリ間でデータ変換をするための中間ファイルとして使うことがある。
◆ EPS(Encapsulated PostScript)
イラスト,特に「線画」向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.eps”。
ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される。
編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは,要確認。
開発会社(Adobe Inc. 社)独自の文字形式であるため,エディタなどで開くとその文字が見れるが,当然数字や記号ばかりで何の絵だかは分からない。
対応しているアプリも比較的多いようで,これも筆者は異なるアプリ間でデータ変換をするための中間ファイルとして使うことがある。
◆ ODG(Open Document Graphics)
イラスト,特に「線画」向きの画像形式。
拡張子(ファイル名の末尾)はほぼ“.odg”。
ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される。
編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは要確認だが,元々詳細が公開されている「オープン」な規格であるため,新しめのアプリなら読み書きできる可能性もわりと高いよう。
ODG は「オープンドキュメント形式」の一部。オープンドキュメント形式とは,ワープロや表計算といったオフィス系のファイル形式を統合したもの。ODG 以外にも,ワープロの形式として ODT,表計算形式として ODS などがある。
オープンドキュメント形式の主たる部分は,SVG と同様 XML によって記載されている文字データで,それが補助ファイルと共に ZIP 圧縮されたもの。
OpenOffice というフリーのオフィスアプリで採用されているのがこの形式。ワープロと相性がよく,PDF にもし易いので,PDF で配布したい画像や,複数ページを必要とする画像ファイルを作る時,筆者もよく利用させてもらっている。