画像ファイル形式について(gif、jpg、png、tif、bmp、svg)

てっちゃん
てっちゃん

写真やイラストなどとってもよく目にするし仕事とかになると画像のやり取りがあったりします。
そこで、一部の画像ファイル形式についてちょっとだけ説明をしてみます!

はじめに、ラスターデータとベクターデータについて

ラスターデータ

あまり聞きなれないかもしれませんが、ラスターデータとはビットマップ画像のことです。
写真などのように、1ピクセル単位が集まってできてる画像ですね!
解像度が低くなると滑らかな表現ができず、せっかくのきれいな写真が汚くなってしまいます・・

ベクターデータ

ラスターデータとは違い、ベクターデータはピクセル単位で色を出すのではなく、線で表現していきます。
なので、直線も曲線もどんなに拡大しても乱れることはありません!どこまでいってもきれい~

そう聞くと「ベクターデータの方がいいじゃん!」って思っちゃいますが、実は・・・
ベクターデータは写真のように複雑な画像を表現するのがとても難しいんです。

以上が、画像の作成する際のデータの種類についてです。
ではいよいよ、画像ファイル形式について!

【GIF(ジフ)】形式について

gifアニメーションって言葉を聞いたことがある人も多いのではないでしょうか?
gifはアニメーションを作ることが一番のポイントのように思います。

gif形式のメリット

  • 透明を使うことができます
  • 画像の圧縮率が高く、容量の小さなデータを作るのが得意です
  • アニメーションを作ることができる

gif形式のデメリット

  • 使用できる色数が限られていて、MAX256色です
  • きれいなグラデーションが表現できません
  • 半透明は使うことができません

以上のことから、GIFはべた塗りのイラストを作成するのに最適です

【JPG(ジェイベグ)】形式について

普段の生活で一番目にすることが多いのではないでしょうか。
カメラで写真を撮ったりすると、多くはこの形式で保存されると思います(一部例外はありますが・・)

また、拡張子は「.jpg」や「.jpeg」で表示されていますが、どちらも同じデータです。

jpg形式のメリット

  • フルカラーで1670万色まで使えます
  • 高品質・高圧縮です(圧縮率は編集ソフトでいろいろ変更できます)

jpg形式のデメリット

  • 透明・半透明が使えません
  • 一度圧縮してしまうと元に戻すことが不可(※非可逆圧縮のため)

jpg形式はイラストだとモヤモヤとした色が出てしまうことがありますが、写真にはとっても最適です!

【PNG(ピング)】形式について

webのために(!)作られた形式です!比較的新しい形式なので、古いブラウザには非対応だったりします。(現状、あまり考えなくて大丈夫です)
使える色数も多く透明・半透明も使えることから使いやすい形式です。

png形式のメリット

  • jpg同様たくさんの色数を使えます
  • 透明・半透明まで使えます

png形式のデメリット

  • 圧縮率はそれ程高くありません
  • 一度圧縮しても元に戻すことが可能(※可逆圧縮のため)
  • CMYKが使えないため、印刷には不向き
  • 古いブラウザには非対応

pngは一見、「もうこれ一本でいいじゃん」って思っちゃいそうですが、低圧縮だったり印刷で色が変化して見えてしまったりするので
乱用したり用途によっては少し注意しなくてはいけません。

【TIF(ティフ)】形式について

高解像度なTIF

また、拡張子は「.tif」や「.tiff」で表示されていますが、どちらも同じデータです。

tif形式のメリット

  • 圧縮していないので、そのままの画像を印刷することが可能

tif形式のデメリット

  • データ容量がかなり高くなるので、読み込みに時間かかったりデータの圧迫になります
  • ソフトを使った編集は可能ですが、webブラウザでは非対応です

印刷等できれいな画像が必要な時には最適です。

【BMP(ビットマップ)】形式について

こちらもTIF同様、圧縮していない高解像度な画像です。

Windows用の画像形式なので、見たことがある人も多いのではないでしょうか。

bmp形式のメリット

  • 圧縮していないので、そのままの画像を印刷することが可能

bmp形式のデメリット

  • データ容量がかなり高くなるので、読み込みに時間かかったりデータの圧迫になります
  • ソフトを使った編集は可能ですが、webブラウザでは非対応です

印刷等できれいな画像が必要な時には最適です。

【SVG(エスブイジー)】形式について

ベクター用の画像形式です。

拡縮してもデータが乱れることはありませんが、ベクターデータなので写真には不向きです

svg形式のメリット

  • 高圧縮なので、とても軽量です
  • 元がベクターデータなので、拡大・縮小にも強い

svg形式のデメリット

  • 写真のようなデータを扱うことができません

最近はwebサイトでもsvgを使ったアニメーションなどが多く、知らず知らずのうちに見たことがある人も多いと思います。
CSSなどで動きを付けたり、色を変更することもできるのでとても便利!

他にもさまざまなファイル形式に溢れている世の中ですが、
少しでも特徴を知って、最適な形式を選択できるといいなと思います!

関連記事