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

: てっちゃん

2022.01.19

基礎知識

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

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

ラスターデータ

あまり聞きなれないかもしれませんが、ラスターデータとはビットマップ画像のことです。
写真などのように、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ブラウザでは非対応です