こんにちは、ほけきよです。
皆さん、ブログや文書を書くときに、画像を挿入することがあると思います。
画像の拡張子って色々ありますよね。pngとかjpg, epsなど。
こういうの、どれがどういう特徴を持っているかって知っていますか？
恥ずかしながら私はつい最近まであまり意識せずに使っていました。「texで文書ファイルを書くならepsでしょ」とか
「背景透過させるならpngだろ」とか、場当たり的な知識ばかり。
そこで今回は、主要な画像系拡張子をまとめてみました！
- ブログなどに使う画像ファイル
- 論文など正式な書類に使う画像ファイル
- 写真に使う画像ファイル
とかに興味があるかたは、是非参考にしてみてください。
一覧表
忙しい人のために、まずは一覧表です！これだけ見れば大体の特徴がわかるはずです*1
| 名前拡張子 | 読み方 | 圧縮/非圧縮 | ベクタ/ラスタ | 色 | 用途 |
|---|---|---|---|---|---|
| JPEG | .jpg |
圧縮(不可逆) | ラスタ | 1677万色 | 写真など |
| GIF | .gif |
圧縮(可逆) | ラスタ | 256色 | 簡単なアニメーション |
| PNG | .png |
圧縮(可逆) | ラスタ | 1677万色 | より精細なロゴ |
| TIFF | .tiff |
非圧縮 | ラスタ | 1677万色 | 印刷物の入稿(写真) |
| SVG | .svg |
- | ベクタ | 1677万色 | 印刷物の入稿(簡単な図) |
.pdf |
- | ベクタ/ラスタ | 1677万色 | 印刷物の入稿 | |
| EPS | .eps |
- | ベクタ | 1677万色 | 印刷物の入稿 |
| RAW | .CR2(Canon).NEF(Nikon).CRW(SONY) |
非圧縮 | ラスタ | 1677万色 | ガチカメラ撮影 |
| AI | .ai |
- | - | - | illustrator編集用 |
| PSD | .psd |
- | - | - | photoshop編集用 |
いろんな疑問に答えるよ
ここからは、上記の一覧表も利用しながら保存形式に関する詳細な疑問に答えていきます！
圧縮/非圧縮って何？
画像を小さくするかどうかということです。例えばカメラで撮影したデータだと、大きいもので10MBを超えるデータも出てきます。そのまま使うには大きすぎる場合は、圧縮してこのサイズを小さくすることができます。代表的なものがJPG, GIF, PNG形式です。
圧縮にもいろいろな方法しても可逆と不可逆の2種類があり、要は圧縮したものを元に戻せるかどうかということです。これは圧縮の方式により、一長一短あります。詳しくは話しませんが、JPGが不可逆、GIFやPNGは可逆です。
圧縮形式などを知りたい方は、こちらの記事がわかりやすくておすすめです。
ついでにこれら3つの特徴や使い道を簡単に話すと
- JPEGは写真画像の圧縮に非常に適している。
- GIFは色の制限があり、精細な画像は作れない。ファイルは小さくできるので、簡単なアニメーションを作ることも出来る
- PNGはフルカラーで可逆圧縮なので、ロゴなどの作成に良い。透過画像を作ったりと、透過度を調整できるところもポイント。
ブログなら、
とかがいいのではないでしょうか。
何で1677万色？？
一覧表にあった、1677万色。通称フルカラーと呼ばれています。*3フルカラーとは、
赤(Red)、緑(Green)、青(Blue)の各256階調を組み合わせた組み合わせの数
のことをいいます。色の三原色の強さを256段階に調節出来るようになっていて、その組み合わせ256×256×256=16777216色がフルカラーということですね！
パソコン業界ではこれをフルカラーと呼びますが、実はこれ以上に細かい階調ももちろん存在します。 あとで話しますが、高級なカメラに備わる保存形式RAWなどでは、256階調の16倍～64倍細かい階調だったりします。
GIFの256色ってなんで？
勘のい人は気づくかもしれません。
「256は3で割ることも出来ないし、3乗根でもない。どうなってんの？」
これはGIFの色の選び方が違っていて、GIFはフルカラー1677万色から任意の256色を選べるのです。これをインデックスカラーと言います。詳しくはWikipedia-インデックスカラーをどうぞ。
ラスタとベクタってなに？
一覧表にあるラスタとベクタというのが気になる方も多いでしょう。 画像形式には、表現の仕方として、2種類あります。
- ラスタ形式 : 画像をピクセルごとに色の付いた点として表現する。複雑な絵や写真が得意。一方で、拡大すると小さな点が目立ち雑に見える。
- ベクタ形式 : 画像を線や面を数式で表現する。拡大しても滑らかさを保つ。ただし複雑な図形だと処理が重くなり表示に時間がかかる。
ラスタとベクタの違い(Wikipediaより)
ベクタ形式は、解像度を全く気にしなくてもよいことが大きな利点です。「圧縮どうしよう。。。」と悩まなくて良いので、例えば本など印刷物に図を渡すときはベクタ形式で渡して、あとは向こう側でよしなにしてもらうのが良いでしょう。
本に適しているのは？web対応は？
ここで本というワードがでたので印刷物に適している拡張子はどれかについて簡単に説明します。
簡単な図を渡すときは先程の通り、解像度を任意に調整できるベクタ形式のEPSやPDFが適しています。
複雑な図や写真を渡すときは、TIFF形式は圧縮しないままで渡せる、多くのソフトウェアが対応している。などの利点から、推奨されています。
印刷物に強い一方で、EPSやTIFFはweb非対応の拡張子となっています。web対応の拡張子には
などを使いましょう。*4
RAWってなに？
一眼レフで写真をとる方たちは「RAW現像」などという言葉を一度は聞いたことがあるのではないでしょうか。ざっくりいうと、後でレタッチ(編集)作業をするためにカメラで保存する形式になっています。RAWが拡張子というわけではなく、一覧表のようにカメラメーカによって拡張子は異なります。
原理や詳細をここで語るには量を食ってしまうため、箇条書きで特徴を説明すると
- カメラのセンサが受けた情報をそのまま保持したものがRAW。センサ情報をカメラ内である程度処理して圧縮したものがJPEG
- 色(ホワイトバランス)の変更が柔軟にでき、本当に見たものに近い色を出せる
- JPEGよりも明るさを調整することができ*5、コントラストの変換が自在
- データは重い。JPEGの2～5倍程度のファイルサイズ
詳しく、でもわかりやすく知りたいという方は、この記事がオススメ。 RAWとJPEGの違いがめちゃくちゃわかりやすかったです。
.ai, .psdっていう拡張子も見るんだけど。
これらの拡張子は単なる画像以上に、それぞれの編集ソフトで編集したものという意味合いを持っています。
.ai: Adobe Illustrator.psd: Photoshop
の保存ファイルとなっていて、編集履歴が保存されているものになります。逆に言えば、これらのソフトウェア以外からは普通開けません。*6
正式名称は何なの？
ここまで話しといて最後にこれかよ！って感じですが、気になる人もいるかなと思ったので、メモ程度にどうぞ。
- JPEG : Joint Photographic Experts Group
- GIF : Graphics Interchange Format
- PNG : Portable Network Graphics *7
- SVG : Scalable Vector Graphics
- PDF : Portable Document Format
- EPS : Encapsulated PostScript
- TIFF : Tagged Image File Format
- AI : Adobe Illustrator
- PSD : Photoshop Data
おわりに
いかがでしたか？ 知っている拡張子から、聞き慣れない拡張子までいろいろあったと思います。 また知っている拡張子でも、違いって意外に知らなかったりしますよね。
この記事で画像にたいする理解が深まったら良いなと思います！
*1:保存拡張子の形式はまだまだたくさんあり、この限りではありません。代表的なものを選んでみました。
*2:この一覧表はあくまで代表的なものなので、詳しくは少し異なる場合もあります。より詳しいことが気になる方はWikipedia-画像ファイルフォーマットをご覧になってください
*3:トゥルーカラーとも呼びます。むしろこっちが正式名称っぽいです。
*5:JPEGは256階調, RAWは4096～16384階調
*6:.aiを無料で開け、編集できる有名なフリーソフトがあります。(Inkscape)使ってみてはいかがでしょうか
