高画質と省ファイルサイズは両立できる！PNG・JPG・GIFの効果的な使い分け方

画像・写真入りのブログを書いていると、保存形式（ファイルフォーマット）に悩むことが多々あります。

なお、画像フォーマットと言えば、以下の４形式が有名です。

• BMP（Windows bitmap）
• GIF（Graphics Interchange Format）
• JPG（Joint Photographic Experts Group）
• PNG（Portable Network Graphics）

BMP はともかく、それ以外の３形式については、どのように使い分けたら良いか迷われている方も結構いらっしゃるのではないでしょうか。

そこで今回は、各フォーマット毎の特徴＆当ブログで実際に行っている "画像フォーマットの使い分け方" をご紹介していこうと思います。

各フォーマット毎の主な特徴

• GIF： ある程度の高画質を維持しつつファイルサイズが抑えられるが 、使える色数に限りがある（256色までしか使えない）ため、写真や画像をキレイに保存するのには不向き。モノクロ画像などに向いている。アニメーション画像の作成はコレ１択。
• JPG： 画質の劣化さえ気にならないのであればファイルサイズが大幅に抑えられるため 、写真の大量保存に最適。ただし "注釈を入れた写真は文字が滲んでしまう" ため、PNG で保存したほうが見栄えは良い。
• PNG：キャプチャ画像に最適。サイズがかさばるが、注釈の文字が綺麗に表示されるという利点がある。
• BMP：基本的に "無圧縮" で生成されるため、ファイルサイズが非常に大きい。

各フォーマット毎の画像の見え方

保存時の条件は、このようになっています（『Photoshop』を使って、特に設定を弄らず保存しました）。

• GIF：表示色→256 / 透明→なし / マット→なし / ディザ→なし
• JPG：画質→低（高圧縮率）/ 形式→プログレッシブ
• JPG：画質→最高（低圧縮率）/ 形式→プログレッシブ
• PNG：圧縮→最小 / インターレース→なし
• BMP：形式→Windows標準 / 色数→24bit

GIF

色数の多い画像をよくよく見てみると、のっぺりとした質感

になってしまっています（コーヒーの辺りとか）。初代プレステ時代のムービーや Windows95 時代の画像を彷彿とさせる安っぽさです。

一方で、テキスト主体の画像やモノクロ画像は綺麗に表示されています。

JPG

JPG は圧縮レベルによって仕上がりが大きく変わります。

高圧縮のものは注釈が滲み、画像全体にブロックノイズが入ってしまうのが特徴です。

一方、低圧縮で保存した画像は、肉眼では PNG と違いが分からないほど綺麗に表示されています。

ただしその分、ファイルサイズも "PNGよりは多少マシ" 程度までしか抑えられません。

また『Skitch』などのシンプルな画像加工ソフトは保存時に圧縮率を選べない場合があるため、JPG 形式で保存した場合どうしても汚らしい仕上がりになってしまいがちです。

PNG

そもそも PNG には圧縮率という概念自体があまりなく、低圧縮の画像と最高圧縮の画像を見比べても肉眼では画質の違いが分かりません。ここが、あからさまに違いが出てくる JPG と大きく異なる点です。

注釈（文字）入りの画像を最高圧縮で保存しても画質が劣化しにくいため、当ブログでは PNG を使うことが多いですね。

BMP

BMP画像も一応作成したのですが、あまりにもファイルサイズが大きいので掲載は控えました。

パッと見は PNG 画像とほとんど変わりませんし、あえて BMP で保存する意義は無いと思います。

各フォーマット毎のファイルサイズについて

画像１（カラー写真）

JPG低画質(44.3KB) ＞ GIF(118KB) ＞ JPG高画質(295KB) ＞ PNG(444KB) ＞ BMP(800KB)

画像２（モノクロ写真）

JPG低画質(49.6KB) ＞ GIF(191KB) ＞ JPG高画質(198KB) ＞ PNG(305KB) ＞ BMP(800KB)

画像３（キャプチャ画像）

JPG低画質(29.9KB) ＞ GIF(36.7KB) ＞ PNG(121KB) ＞ JPG高画質(142KB) ＞ BMP(600KB)

画質の善し悪しは一旦置いといて、ファイルサイズが小さいものから順に並べています。

画像３のみ PNG と JPG(高) の位置が入れ替わっていますが、ファイルサイズの大小については、どの画像も同じような結果になりました。

PNG / JPG / GIFの使い分け方

BMP は論外なので省きました。

当ブログで画像を挿入する際は、以下のような感じで使い分けています。

• 普通のカラー写真 → JPG
• 普通のモノクロ写真 → GIF
• 注釈を入れた写真 → PNG
• 画面キャプチャ → PNG
• アニメーション画像 → GIF

注釈が入っていない普通の写真は、低圧縮 JPG で保存した後に画像圧縮ツール（サイト）を使ってファイルサイズを縮小しています。

一方、注釈を入れた写真は JPG で保存するとほぼ確実に画質が劣化してしまいます。そのため、PNG で保存した後に画像圧縮ツールを使うことで、"画質の維持" と "ファイルサイズ縮小" との両立が可能です。

盲点なのが、PC やスマホのキャプチャ画像です。JPG で保存するとなぜか PNG よりもファイルサイズが若干大きくなってしまいます。こういった画像はむしろ PNG で保存したほうがファイルサイズを稼げるようです。

アニメーション画像については GIF 一択になります。なぜなら、2MB以上の画像はサーバーにアップロードできないからです。以前、アニメーションPNG（APNG）形式の画像を作ってアップロードしようとしたら弾かれてしまい、その時に初めて知りました。

最後に

画像フォーマットの使い分けは正直面倒ですが、一度自分の中でルールを作ってしまうことで多少はラクになります。

ファイルサイズの大きい画像フォーマットを多用していると、ベンチマークサイトで低評価を受けることも多いです。ただ、画質劣化を気にせずファイルサイズの節約ばかりを考えていると見た目が貧乏臭くなってしまうため、なかなか難しいところですね。

まだ違いがよく分からないという方は、とりあえず PNG をメインに使っておけば良いでしょう。PNG も圧縮すれば結構ファイルサイズを稼げますし、そこまで神経質にならなくても良いかと思います。

関連記事

PNG/JPG画像をサクッと圧縮できる『tinyPNG』の使い勝手が良い！