画像ファイルの形式について

画像フォーマットのひとつで、正式名は『Graphics Interchange Format』(グラフィックス・インターチェンジ・フォーマット)です。拡張子は『.gif』となっています。

一般的に『ジフ』とか『ギフ』と呼ばれています。どちらの呼び方でも問題ありませんがGIF画像を開発した人は『ジフ』と読んでいるようです。

ちなみに著者は今まで『ギフ』と呼んでいたのですが、ある時「『ギフ』って呼ぶのはおっさんの証拠ですよ」とさらっと言われ泣きそうn・・・（略

こいつの特徴としてはデータ量が格段に軽いことです。通信速度が遅かった昔は画像といえばこいつを使っていました。

ただし、8ビットの色彩データとなっているので最大256色までしか表現できません。ですので画質に関しては決して良いとはいえないですね。

それと『透明色』を表現することができます。これはとても重要なので確認してみましょう。以下に背景が透明なGIF画像を用意しました。

今この記事は背景が真っ白なのでちょっとわかりづらいですね。下に猫ちゃんの背景画像を入れた要素を用意したので重ねてみましょう。

(´-`).｡oO（猫ちゃん画像は写真素材ぱくたそ様より拝借させて頂いてます。)

どうでしょうか。ちゃんと画像が透過して重なっていると思います。

このようにGIF画像は『透明色』が使えます。ただしGIF画像の透明色は『完全な透明』となり、『半透明』は表現することができません。ここは要注意です。

その他の機能としてアニメーションさせることができたりします。（GIFアニメーションと呼ばれています。）「GIFアニメ　おすすめ」とgoogle先生に聞いてみるとかなり楽しめるかと思います。個人的に『シネマグラフ』というのが好きです。『シネマグラフ』ではよくGIFアニメーションが使われているので良ければこちらも検索してみてください。

という感じでGIFアニメは容量が軽く、簡単に作れるので今でも沢山の人に愛されていますが、ごく普通の画像としてのGIFに関しては著作権の問題などもあり昨今のウェブサイトでの使用頻度は下がり続けています。

高速な通信環境が当たり前になってしまった昨今ではデータ量などの問題も障害ではなくなってしまい、GIF画像よりも画質が良いPNG画像が主流となっています。

よくネット上で「ジェイペグ」と呼ばれているのはこいつです。正式名は『Joint Photographic Experts Group』と呼び、略して『JPG』となることから「ジェイペグ」と呼ばれています。

拡張子は『.jpeg』、『.jpg』、『.jpe』等がありますが、一般的にウェブで使われる拡張子は『.jpg』です。

JPEG画像の特徴ですが高品質な画質を維持したまま綺麗に圧縮ができ、データ量もかなり抑えられるのが特徴で、昔からデジカメの写真などで使われることが多いです。写真に特化した画像フォーマットといった感じですね。

表現可能色数は24ビットフルカラーまでサポートしており、最大色数はなんと16777216色まで表現できます。GIFとは桁違いですね。

かなり素晴らしい画像フォーマットとなっているのですが、少しだけ問題があります。

まずJPEG画像は透明色が使えません。実際に確認してみましょう。先ほどと同じような画像をJPEG画像で用意しました。

では先ほどと同じように背景画像が設置された要素と重ねてみましょう。

上記のサンプルでは背景画像に先ほどと同じような猫ちゃんの画像を設定しているのですが大部分が隠れてしまっていますね。このように透明色は使用できません。

それともう一点、JPEG画像は非可逆圧縮方式でデータ圧縮されています。非可逆圧縮とは簡単に説明すると『データをかなり圧縮できるけどその代わり元に戻せません！』という技術です。

これはつまり同じJPEGファイルを『画像編集ソフトで開く→ jpgで保存→ 画像編集ソフトで開く→　jpgで保存→...』とずっとやり続けるとデータが劣化し続けてしまうということですね。

「JPEG画像は保存するたびにデータが劣化していってしまう！」と世間では言われていますがそれはこれが原因です。ただし、これは『画像編集ソフトなどで開いてjpgで保存した場合のみ劣化していく』という話です。

JPEG画像を普通にファイル複製したり(つまりコピペのことです)、どこかのウェブサイトからダウンロードしたりというようなデータの複製処理で劣化していってしまうというわけではありません。間違えないようにしてくださいね。パソコンの世界ではベリファイと呼ばれるデジタルデータの照らし合わせ処理が必ず入るのでコピーに失敗しない限りファイル複製でデータが劣化するということは構造上ありえません。

こちらの正式名称は『Portable Network Graphics』です。略して『ピング』とか『ピーエヌジー』とか呼ばれています。ちなみに開発された方々は『ピング』と呼んでいるようです。一般の方も『ピング』と呼んでる方が多いです。拡張子は『.png』です。

このPNG画像はGIF画像に取って代わり、今ではウェブで使用される主流の画像フォーマットとなっており、良くウェブサイトで見かけるクリックボタンの画像やロゴ画像などは今ではほとんどPNG画像です。

こちらの特徴のひとつめは、8ビットカラー形式と24ビットカラー形式、つまり256色モードと16777216色モードで使い分けが出来るということになります。

古い携帯電話用のウェブサイトなどはデータ量の少ない256色のPNG画像を使ったり、色鮮やかなスマホ用サイトなどは16777216色のPNG画像を使ったりとニーズに合わせて使い分けができます。

しかも、同じ8ビットカラー形式（256色）ならば、GIF画像よりもPNG画像の方がデータ量が軽いです。

一般に8ビットカラー形式のPNG画像は『PNG-8』、 24ビットカラー形式のPNG画像は『PNG-24』と名付けられています。そしてここがちょっとややこしいのですが、『PNG-8』も『PNG-24』も保存する際の拡張子は同じく『.png』となりますので間違えないようにしましょう。

透明色も対応しており『PNG-8』ではGIF画像と同じく完全透明色を表現できます。そして『PNG-24』に関しては『アルファチャンネル』という各ピクセルに対する透明度のデータを含めることができますので0～255の範囲で透明度を設定できます。

ちょっと確認してみましょう。Photoshopで透明度50%の青い背景を設定して『png-24』で書き出ししてみました。

白い背景の当サイトでは分かりづらいのでまたもや以下に猫ちゃんの背景画像を入れた要素を用意しました。こちらに重ねてみましょう。

背景色が透過しているのが確認できたと思います。こんな感じでPNG画像はかなり優秀な画像フォーマットとなっています。

可逆圧縮となっており画像編集ソフトで何度も保存しても劣化することはありませんが、写真などの詳細な画像ではJPEG画像よりもデータ量は重いです。なので写真のような素材ならばJPEG画像、ロゴなどはPNG画像といった感じで使い分けると良いです。

ちなみにPNG画像はアニメーションさせることはできません。しかし、PNGの発展フォーマットである『APNG』という規格があり、将来は全てのブラウザで『APNG』でアニメーションをさせることができるようになるかと思います。

• データが軽い
• 256色
• 完全透明色使える
• アニメーションできる

• 高画質な割にデータが軽め
• 不可逆圧縮なので画像編集ソフトなどで保存しまくると劣化する
• 16777216色表現できる
• 透明色は無理

• GIF画像よりデータが軽い
• 256色
• 完全透明色使える
• アニメーションは無理

• 16777216色表現できる
• 256段階のアルファチャンネルを設定できる
• 同レベルの画質だとJPEG画像よりも重い