画像のいろは【jpg,gif,png,WebP,TIFFなど画像形式の違い】

こんにちは。両手にKY線を持つライター、ご飯固めです。
もうそれはしっかりと刻まれており、業(カルマ)と呼ぶにふさわしいです。
そして完全に遺伝です。３世代に渡り、血液型と共に受け継がれています。
風の噂によるとKY線を持つ人は変人だけど とても空気が読めるらしいですよ！
変人だけど！

はい、
今回は「画像のいろは」と題しまして、
画像形式それぞれの特徴や使い場所などを書かかせていただきます。

基本を押さえよう

画像形式についてお話するには拡張子と、圧縮方法の説明が欠かせません。
まずはその辺りについて、ざっくりと書いていきます。

拡張子

拡張子とは、ファイルの種類を判別するための文字列です。
写真は｢.jpg｣、Excelファイルは｢.xlsx｣、音楽ファイルは ｢.mp3｣など…。

拡張子は元々4文字だったのですが、
昔使われていたOS(MS-DOSや初期Windows)では
拡張子を3文字までしか扱えなかったので、
｢.html｣を｢.htm｣、｢.jpeg｣ を｢.jpg｣と記述していました。
現在は4文字でも大丈夫なのですが、
習慣的に3文字以内にしている方が多いようです。

私の場合は、最近Illustratorを使う機会が多いので、
.aiという拡張子がついたファイルがデスクトップにたくさんいます。
(.ai はAdobe Illustratorの頭文字のAとIを組み合わせたものです。)

圧縮方法

非圧縮、可逆圧縮と非可逆圧縮という３つの保存方法を簡単に記載します。

非圧縮

非圧縮とは読んで字の如く、圧縮をしない、保存形式です。
圧縮をしないということは画像がもともと持っている解像度だったり、
色彩、画像のサイズ、容量を損なわずに保存できる形式です。

可逆圧縮

可逆圧縮は一度圧縮(小さく)して保存した画像を、もう一度開いた際に、
圧縮する前と同じ、つまり、非圧縮と同じ状態で開くことができるのです。

非可逆圧縮

非可逆圧縮とは、逆圧縮ができない圧縮方式で、
“一度圧縮した画像は元には戻せない”方式です。

儚いですね。

一度握りつぶしたリンゴが元には戻らないのをご想像ください。

JPEG(ジェーペグ)とは？

正式名は「Joint Photographic Experts Group」で、
JPEGを作った組織の名前が由来です。
拡張子は｢.jpg(.jpeg)｣
写真に適した非可逆圧縮の画像形式です。

約1670万色で表現でき、グラデーションも得意です。
ファイルサイズも節約できる、
最もポピュラーと言ってもいい画像形式です。

優秀なJPEGですが、保存する度ファイルを圧縮してしまうため、
保存を繰り返すと画質が劣化し、ブロック状ノイズが出てしまいます。

左側が圧縮前のオリジナル画像で、右側が圧縮を繰り返した画像です。
ノイズが出て、荒い画像になっているかと思います。

GIF(ジフ)とは？

正式名称は「Graphics Interchange Format」
拡張子は「.gif」
最大256色で構成される可逆圧縮の画像形式です。

アニメーション作成や透過処理が可能というJPEGとは違った特徴を持ちます。
そして何より違うのは色数。最大256色まででしか表現できないため、
似たような色が隣接していると全て一緒くたにされる場合があります。
例えば、赤、朱色、ピンクが並んでいたら、赤、赤、赤にというように。
ゆえに、GIFはグラデーションの表現が苦手です。

非可逆圧縮と思われがちなGIFですが、実は可逆圧縮です。
JPEGやPNGで保存していた画像をGIFに変換すると色数が減少し、
減色後に圧縮されるために可逆圧縮となるのです。ややこしいですね。
可逆圧縮ではありますが、あの時の鮮やかな色彩が戻ってくることはないので、変換時には注意が必要です。

GIFといえばアニメーション(と私は勝手に思っている)ですが、
実はPNGをアニメーション化したAPNGという保存形式もあるようです。
ただしAPNGは、対応ブラウザがChrome、Firefox、Safariの３つしかないため、GIFが使われる機会のほうが多いようです。

これは余談ですが、学生時代に(とても優しい)IT有識者の前でギフと言ったら
｢あ？｣と言われたことがあります。｢ジフ、な？｣と。
今のところ「ジフ」と言ってキレられたことはないので、
ジフと呼ぶのが無難だと思います。

PNG(ピング)とは？

正式名称は「Portable Network Graphics」
拡張子は「.png」
WEBで使用するされることを目的に作られた可逆圧縮の画像形式です。

PNGはGIFの代替として開発された画像形式ですので、GIFと同じように
イラストや図形に向いていますが、JPEGのように写真でも使える形式です。
8bit（PNG-8）と24bit（PNG-24）を選択でき、8bitの場合はGIFと同256色で保存ができます。24bitでは、jpegのように約1,677万色で写真が保存でき、加えて透過処理が行えます。

圧縮率が高いためGIF画像よりファイルサイズを小さくすることが可能ですが、
フルカラーの写真ではファイルサイズがJPGより大きくなってしまいます。
chromeやSafariなどの主要ブラウザで使用できますが、
ie7以前の古いブラウザには対応していません。

ほとんどのブラウザに対応してはいますが、
サイトの看板部分など、大切な場所には使わないほうが良いかもしれませんね。


左側がPNGで右がJPEGです。
ぱっと見は分かりませんが、倍率をあげるとJPEGのほうがアラが目立ちます。PNGが54KB 、JPEGが37KBで、
画質が良い分PNGの方がファイルサイズが大きくなってしまいました。

次はPNGとGIFを比べてみます。
ご飯固めの頭文字、Gです。

PNGは綺麗なGですが、GIFは輪郭が少しガタついていて、グラデーションもPNGほど滑らかではありません。
これはGIFが256色しか扱えないゆえのことです。
PNGは12KB、GIFは19KBとなりました。

WebP(ウェッピー)とは？

WebPはGoogleが開発しているWEB向けの画像形式です。
拡張子は「.webp」
WEB上の画像のファイルサイズの圧縮を目的としている可逆圧縮と非可逆圧縮に対応した画像です。

WebPで画像を圧縮すると、
一般的に利用されているJPEG画像と比べて40%近くの容量を削減できます。
それによりWEBページ上の画像の読み込み速度、
ひいてはWEBページの読み込み速度もより速くなるという画像形式です。
アニメーションにも対応しています。

JPEG先生、GIF先輩、PNGさんの対抗馬として登場したWebPくんですが、
対応OSはEdge、Firefox、Chrome(、Androidでも使用できます)。
Safari や iOS Safari には残念ながら対応していません。
そしてCMYKカラーモデルという、印刷機用のカラーに対応していないため、
印刷には不向きです。
JPEG先生達の仕事を一身に背負うには、もう一歩というところですね。

TIFF(ティフ)とは？

正式名称は「Tagged-Imagefile Format」
名前のように、画像データの先頭にファイル形式を記述したタグ（画像情報）が記録されています。
拡張子は「.tif(.tiff)」です。

一般的なカメラでは、撮影された画像は自動的にJPEG保存されるようになっていますが、高級なデジタル一眼レフカメラでは保存ファイルとしてTIFFも選べるようになっているらしいです。
(さすがに確認は出来ませんでした…。)

そんなTIFFは高解像度な代わりに容量がとても大きく、webでは使用できない画像形式なので、webで使用したい場合はJPEG等に変換する必要があります。

容量が大きい上にwebで使えないTIFF。
じゃあどこで使えるの？
ズバリ「印刷現場」です。

TIFFの最大の特徴、それは「非圧縮で保存ができる」ことです。
「基本を抑えよう」でも書きましたが、非圧縮とは圧縮をしない保存方法ですので、画像本来の解像度や色彩を損なうことなく保存できます。
加えて保存するたびに画像の劣化が起こることもないので、
画像品質を保ったままデータのやり取りが可能です。

つまり、TIFFは高解像度の画像を印刷する際に活躍する画像形式です。

JPEG2000(ジェーペグ にせん)とは？

JPEG2000とは、１番目に書いたJPEGを発展させた規格のことです。
「今はまだ使わないが、いつか必要になった時のためにJPEGの進化版を作っておこう」ということで、2000年代に入ってから作られたものです。

JPEGよりも高い圧縮率を持ち！
画質も高く！
同じサイズの(ただの)JPEG画像より
圧倒的に綺麗な画像を得られる！
という、圧倒的に素晴らしい画像形式です。

え、聞いたことない？
そうですね…正直、私もこの記事を書かせていただく中で初めて知りました。
何故なのか。

なんとこのJPEG2000、

圧 倒 的 に 処 理 が 重 い 。

そう。圧倒的に処理が重いのです。
加えて、対応ブラウザがsafariのみという状況。
ですので、JPEG2000は2020年現在ほとんど普及していません。
日の目を見る日は来るのでしょうか。

画像形式まとめ

早見表を作ってみました。

各画像形式のブラウザの対応表

画像形式の得意と不得意表

最後に

ここに載せたもの以外にもたくさんの形式があります。
今後、画像を扱う際には形式にも気を使って適材適所で使っていきましょう。
最後まで読んでくださりありがとうございました！

非圧縮,可逆圧縮,非可逆圧縮についての記事も公開中です。

画像圧縮のいろは【非圧縮,可逆圧縮,非可逆圧縮とは？】シンプルに解説