この記事は2015年7月15日に公開された記事を再編集したものです。

画像を扱うためにはデータ化する必要があり、様々な画像フォーマットが存在します。
多数の画像フォーマットの中でも、現在一般的に利用されるもの、知られているものといえばJPG、 PNG、 GIF、BMPの4つです。

これらの長所・短所についてしっかりと違いが理解ができているという方は案外少ないのではないでしょうか。
特にデザインを始めたばかりの方は、種類豊富な拡張子を見て何を選んだらいいのか分からないと悩んでしまいがちです。一口にフォーマットとはいっても、最適な使い道であったり対応している色数にも違いがあります。

ですから、用途に応じてどの画像フォーマットを選択すればいいかを知っておくことは、デザインをする際に非常に重要になるのです。

今回はJPG、 PNG、 GIF、BMPの4つの画像フォーマットについて、それぞれの特徴をまとめてみました。
今までなんとなく選んでしまっていた、という方はぜひご確認ください。

画像ファイルの拡張子別の特長

1.JPEG、JPG( ジェイペグ )

JPEG、JPG( ジェイペグ )

Joint Photographic Experts Groupの略です。
デジタル写真用に開発した画像フォーマットで、24ビット(1670万色)のフルカラーをサポートをサポートしています。
デジタルカメラの画像は大半がこの形式です。
サポートする色数が多いので、インターネットのホームページでフルカラーの大きな画像を使いたい時に最適です。

また、グラデーションがかかった画像のように色の変化のある画像にも向いています。
逆に平坦でシンプルな画像だとぼやっとした印象に見えてしまいます。

1/10〜1/50という高い圧縮率で保存することが出来る点が特徴的で、ファイルサイズを極端に小さくすることが可能です。非可逆圧縮方式のフォーマットなので元の画像の品質に戻らないという欠点を持っています。
圧縮すればするほどブロックノイズ、モスキートノイズが現れるようになり、解凍時の画像劣化もしやすくなるので注意が必要です。

とはいえ、普通に使う場合にはさほど気にならない程度の劣化で拡大表示すればぼやっとしたように見えるというレベルです。
画質に気をつけたい場合には、保存時に圧縮率に気をつければ画質劣化を防ぐことができます。気になる場合は、圧縮率を変えて何枚か画像を保存しながら最適な圧縮率を選択するのがオススメです。

JPEGで画像サイズを抑えたい場合には、画像内での色調変化を抑える(急な色変化、明るさの変化を減らす)、画像の面積を狭めると効果的です。

特徴

・非可逆圧縮方式で、圧縮後元の画像品質には戻らない
・透過はできない
・圧縮率の指定が可能

最適な使用用途

・フルカラーの写真

2.GIF( ジフ )

GIF( ジフ )

米国大手パソコン通信会社のCompuServeが開発したもので、Graphics Interchange Format の略です。

モノクロ2色から最大8ビット(256色)までサポートしており、圧縮技術に高圧縮が可能な「LZW」を使っています。
これらの特徴によりファイルサイズを小さく抑えることができ、インターネットで流通しやすいことからJPEGと並んで広く使われています。
平坦でベタの多いデザインの画像に使われることが多く、ロゴ、ボタン、アイコンといった色数をあまり使わないホームページの素材、イラストでの使用に最適です。
ファイルサイズを抑えられる反面、サポートしている色が少ないためフルカラーを使っての表現が必要な写真、画質を重要視する画像には不向きなフォーマットといえます。

透過ができるという特徴を持っており、画像の一部もしくはすべてを透明にすることが可能です。ただし、完全な透過・不透明のみが可能でPNGで扱える半透明はサポートしていません。

アニメーション設定ができるのも特徴で、パラパラマンガのような動きを表現することができます。
フラッシュのような滑らかな動きの表現には不向きなものの、ちょっとしたアイコンに動きを付けたりするのにはとても便利です。

特徴

・透過、アニメーション設定ができる
・ファイルサイズが小さい
・使える色が少ない

最適な使用用途

・単色、色数の少ない画像
・イラスト、ボタン、ロゴ

3.PNG( ピング )

PNG( ピング )

GIFに代わるライセンスフリーの画像形式として開発した、W3C(World Wide Web Consortium)推奨の比較的新しいフォーマットです。
Portable Network Graphicの略です。
フルカラーをサポートしており、最大48bit=281,474,976,710,656色(約280兆色)が保有できるもののRGBのみのサポートとなっています。

圧縮率が高めで、例えば同じ画像の場合GIF形式と比較して10%から30%程度ファイルサイズを抑えることが可能です。
可逆圧縮を採用しており、JPEGで見られる圧縮後の画質劣化がありません。
GIFでも可能な完全な透過・不透明に加え半透明を表現することができます。

但し、GIFのようにアニメーションには対応しておらず、フルカラーにした場合JPEGよりもファイルサイズが大きくなってしまうというデメリットがあります。
また、Windows版Internet Explorer4.0以上、Mac版Internet Explorer5.0以上、Netscape Navigator4.04以上のブラウザに対応しており、これらより古いバージョンには対応していません。
最近ではPNG非対応のブラウザのシェアが低くなってきているのでこれからPNGを使ってもさほど問題はありません。

特徴

・完全な透明、不透明、半透明の表現ができる
・フルカラーをサポートしている
・可逆圧縮方式で圧縮後に品質劣化がない

使用用途

・透明色を使った画像
・画質劣化をさせたくない画像

4.BMP( ビットマップ )

BMP( ビットマップ )

Windowsパソコンの標準的なフォーマットです。Microsoft Windows Bitmap Imageの略です。
フルカラーをサポートしています。
RLE圧縮を行うことも可能ですが、通常は無圧縮で画像を保存するため画像の劣化がほとんどないというメリットがある一方、データが大きくなるというデメリットもあります。

同じ解像度の画像の場合だと、先に挙げたJPEG形式データと比較するとファイルサイズが大きくなります。
そのためメール添付、配布には向きません。

GIF、PNGで可能な透過処理はBMPではできません。
サポートはRGBのみでCMYKはサポートしていませんので注意が必要です。
また、ウェブでは扱えないフォーマットです。

特徴

・無圧縮のため画像劣化がほぼ無い
・データが大きい

使用用途

・解像度の高い画像

まとめ

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

JPG、 PNG、 GIF、BMPの4つの画像フォーマットについてご紹介しました。
いかがでしたでしょうか。

せっかくデザインするなら、当然少しでも美しい仕上がりにしたいものです。
画像フォーマットの特徴を正しく理解出来ていると、綺麗でしかもサイズが軽いデータを作成することができます。
いずれも広く利用されている画像フォーマットですので、違いが今まで分かっていなかった、特に気にしていなかったという方は必ず抑えておきましょう。

このニュースを読んだあなたにおすすめ

コミカルなデザインで活用したいマンガ風フォントまとめ
無料で使えるのがビックリ!Wordpress最新テンプレート10選
【厳選】モバイルフレンドリーに対応した無料Wordpressテンプレート10選

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう