画像形式とは?(GIF,PNG,JPEGなど)│Web用語集

画像形式とは?(GIF,PNG,JPEGなど)│Web用語集

パソコンやスマートフォンを使用していると、画像ファイルを閲覧する機会はとても多いはず。インターネットをしてWebサイトに表示される画像を見たり、デジカメで撮影した写真をパソコンに取り込んだり、スマホで写真撮影をしたり……と、少し考えただけでも画像ファイルを扱うシーンが次々に思い浮かびます。

これらの画像ファイルですが、同じ画像に見えても実はたくさんの画像形式があることをご存知でしょうか。

パソコンでは画像ファイルのファイル名のうしろに「.jpg」「.png」などという英字がついていますが、これは拡張子と言って、どんなファイル形式なのかを示すものとなっています。画像ファイルについている拡張子を見れば、どんな画像形式のファイルなのかわかるのです。

画像形式にはいろいろありますが、それぞれに特徴があり、それぞれに適した使い方があります。

詳しく知りたい方は以下をご覧ください。

目次

画像形式の種類
他のサイトでの説明
復習クイズ

●画像形式の種類

マニアックなものも含めるとかなりたくさんの画像形式がありますが、一般的なものについて紹介していきます。

■JPEG
「ジェイペグ」と読み、拡張子は「.jpg」や「.jpeg」になります。「Joint Photographic Experts Group」の略で、JPEGという画像形式を作った会社の名前がそのまま画像形式名になりました。

デジカメやスマホで撮影した画像は一般的にはこの形式で保存され、ウェブサイトにも使用されることが多いため、最も目にすることが多い画像形式と言えるのではないでしょうか。

目に見えないほど細かい色の違いを省略することでファイルの容量を小さくしているというのがJPEGの大きな特徴。普通に閲覧するには十分きれいな画質でありながら、ファイルサイズを軽くできるというのが、広くJPEGが使われている何よりの理由でしょう。

■GIF
GIFは「Graphics Interchange Format」の略で「ジフ」と読み、拡張子は「.gif」です。画像ファイルの中でも最も個性的な形式かもしれません。背景透過処理が可能で、動きをつけたアニメーション動画を作ることもできるからです。

GIFをウェブサイトに使えば、簡単なアニメーションのついたボタンを作ることができますし、近年は簡単な動画のキャプチャをGIFで表現することも増えてきました。ネット初期にはGIFを使ったパラパラ漫画のような作品を公開する人も多かったです。

ただし、GIFは256色までの色数しか表現できません。写真のような画像をGIFにしてしまうと、ほとんどの色が失われて一気に粗い画像になってしまいます。

■PNG
「ピング」と読み、拡張子は「.png」。「Portable Network Graphics」の略で、その名の通りインターネットに適した画像形式だとされています。

なぜインターネットに適している形式なのかというと、GIFと同様に背景透過処理が可能であり、なおかつ256色以上使用することができるから。GIFのアニメ機能がなくなったけど、JPEG並に画質が良い。そんな画像形式なのです。

写真を丸く切り抜いて背景を透明にしたい場合には、PNGが最適です。ちなみに容量は、同じ写真を同解像度で保存すると、JPEGよりも少し大きくなります。

■TIFF
「ティフ」と読むこの形式は、主にデジカメなどで高画質な画像保存をする際に使用される画像形式です。JPEGのように画像を圧縮せず、目で判別できない色もデータとして残されているため、ファイルサイズは非常に大きくなります。

プロカメラマンや、大きく印刷する前提の撮影などでない限りは、使う必要性はあまりないかもしれません。

■BMP
「ビーエムピー」は昔からWindowsを使用していた人にはおなじみの画像形式ではないでしょうか。「Microsoft Windows Bitmap Image」の略で、拡張子は「.bmp」になります。

Windowsのお絵かきアプリケーション「ペイント」で画像作成をすると、以前はBMPファイルでしか保存することができませんでした。しかもBMPはも画像を圧縮しない形式なので、ファイルサイズが大きくなりがち。せっかくBMPファイルの画像を作っても、サイズが大きくて送ることができない、なんていうこともありました。

 

●他のサイトでの説明

今回紹介した5つの画像形式が表で比較されているのでわかりやすいです。
https://sole-color-blog.com/blog/103/

JPEG,GIF,PNGについてさらに詳しく解説されています。
https://liginc.co.jp/web/design/material/50037

現在注目されている新しい画像形式「SVG」についての説明です。
https://ferret-plus.com/7089

どちらかと言うと「離脱」よりも「離脱率」について解説しているページが多くなっています。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

 

ランガレウェブのサイト制作