公式サイトやSNS等には欠かせない画像データ。でも画像データの保存形式（ファイル形式）をいつも適当にしている…という人も多いのでは？画像データの保存形式には、JPG・PNG・GIF等の様々な種類があります。ホームページを軽く快適に、なおかつ見栄え良く作るためには、データに合わせたファイル形式を選ぶことが大切なんです。
今回はファイル形式の中でも主力となるJPG・PNG・GIFの使い分けについて、詳しく解説をしていきましょう。
JPGの特徴とJPG保存に適した画像
JPG（JPEG）とは「Joint Photographic Experts Group」を省略したデジタルデータ圧縮方式の名称です。データ名の後ろにつく拡張子は「.jpg」もしくは「.jpeg」となります。いずれの場合も「ジェイペグ」と読むので、覚えておきましょう。
もともとの省略名称は「JPEG」なのですが、かつてのMS-DOS、並びにその流れを組むWindowsOSでは拡張子を3文字までしか指定できず、長年「jpg（JPG）」という3字拡張子が主流となっていました。しかし現在のOSでは拡張子を4文字にもできるため「.jpeg」という拡張子も登場しています。
【JPGの特徴】
・見た目には比較的高画質。人間の目には画像の劣化が判別しにくい。
・画質を落としていくとノイズ（ブツブツのような柄）が出る。
・一度JPGで落とした画質は元に戻すことができない。
【JPGの強み・メリット】
・1600万色までを再現できる（多色使いに強い）
・色数の調整でデータを軽くできる
【JPGの弱み・デメリット】
・シンプルでシャープな輪郭ほど、ノイズが出やすく目立つ
・赤い色が劣化しやすい
・シンプル・色数が少ない画像でJPGを使うとファイルサイズが大きくなりやすい
JPG保存が適している画像データとは？
以下のような画像データは、JPGで保存するのが一般的です。
1）自然物・人工物等を撮影したいわゆる「写真」のデータ
2）色数が非常に多い多い図版や絵（複雑なカラーチャート、グラデーションが多い絵柄、繊細な絵）
画像データの鮮やかさ・リアルさを決める大きな要素が「色数の多さ」です。例として、今のあなたの左手を見てみましょう。手は「肌色」ではありますが、実際には手全体がどこもかしこも同じ色ではありませんよね。赤っぽい箇所、白っぽい箇所、静脈が透けた緑色っぽい箇所、更にシワがある箇所には深い色が必要ですし、光が当たる箇所・当たらない箇所でも色味は異なります。「人間の手」という写真データを作るだけでも、何万色もの色数が必要になるのです。
画像を圧縮しながらも最高1600万色の色味を表現できる「JPG」は、このような「微妙な色味の違いが続く複雑なデータ（＝写真）」の保存に適しています。例えば人間の写真、動物の写真、空や川等の風景画像、車や洋服の写真等等… 非常にカンタンな言い方をすれば「スマホのカメラで撮った、デジタルカメラで撮ったといった写真データはJPG保存にしましょうね」ということになります。
なお2）の図版・絵については、次項の「JPGに適していない画像データ」で詳しく解説します。
JPG保存に適していない画像データとは？
以下のようなデータは、JPGでの保存・Web掲載には向いていません。
2）色数が少ない図表、図版、グラフ
3）Word、Excel等で作ったデータのキャプチャ
4）Webページのキャプチャ
5）ロゴマーク
6）赤色の表現がメインとなる画像 等
JPGの圧縮プログラムは、前述の通りその特性として「シンプルな直線・曲線ほどノイズが出やすい（線がガタつきやすい）」という弱みを持っています。
また色数を下げて圧縮した場合、単色使いの箇所ほどザラザラとした質感が目立ちます。つまり「塗り絵」みたいな絵柄や色数が少ないイラストをキレイに保存するのがすごく苦手…というわけなんですね。「アンパンマンはJPGに向いていない」と覚えておくとわかりやすいかもしれません。
また同様に、グラフやテキストのキャプチャ、ロゴマーク等もJPGで保存するとノイズが目立ってしまいます。非常にザックリと言えば、「絵とかグラフとか、写真じゃないデータはJPGに合ってない！」ということです。ただしイラスト・絵の全部がJPGに合ってないか…というと、そういうわけでもありません。
【JPG保存の方がキレイに保存できるイラストのケース】
・繊細な多色使いをする絵
・グラデーションを多用している絵（墨絵のようなボヤけ具合等）
・写真のような書き込み・色使いの細かさがある絵
上記のような絵の場合には、JPG保存の方が圧縮による粗が目立ちにくく、なおかつ発色の良さをアピールできることもあります。
PNGの特徴とPNG保存に適した画像
PNGは「Portable Network Graphics」の略称で、画像をビットマップ画像として圧縮するファイルフォーマットです。「ピング」もしくは「ピン」と呼びますが、業者によっては「ピーエヌジー」とアルファベットをそのまま発音することもあります。（PNGの読みがわからない方が多いので、齟齬を減らす一環であるとも考えられています）拡張子は「.png」が一般的です。
【PNGの特徴】
・JPGと同じ24bitフルカラーに対応する他、8bitフルカラー（256色）に色数を落とせる
・圧縮してもデータが劣化せず、元に戻すことができる
・透明・半透明の画像も扱うことができる
【PNGの強み・メリット】
・画質が一切劣化しないので、編集の途中の保存等をしても安心
・色数を落とすことでJPGよりもデータを軽くできる
【PNGの弱み・デメリット】
・フルカラー（24bit・16bit）の場合、JPGよりもデータが重くなりやすい
PNG保存が適している画像データとは？
以下のような画像データは、PNGで保存するのに適しています。
1）作業途中の画像データ
2）PC等のスクリーンショット、キャプチャ画像
3）シンプルな線画
4）色数が少ない絵や図版、グラフ
5）ロゴマーク
6）背景を透過させたデータ 等
PNGが得意とするのは、JPGとは真逆の「シンプルなイラスト」や「グラフ」「図版」といったデータの保存です。シンプルなイラストは元々の使用色数が少ないので、8bit（256色）に色数を落としても色味の変化が殆ど起こりません。JPGのようなノイズも出さず、更にデータを軽くして快適なサイトを作ることができる…というわけなんですね。
またPNGはJPGとは異なり可逆性圧縮（高圧縮したあとでも、圧縮前の状態に戻すことができる）ので、編集等の作業中には必ず「PNG」で保存をしておくようにしましょう。一度でもJPGで保存すると、いくら「高画質」を選んでも画像は劣化しますし、これをやったら二度と画質は戻りません。しかしPNGであれば、圧縮しても後から元の状態に戻せるので安心です。「まだアップする前」等の画像データはPNG保存しておくと良いですね。
PNG保存が適していない画像データとは？
2）グラデーションが多いイラスト、リアルな写真のような絵 等
「圧縮をしても元に戻せる」という特性を持つPNGは、使用する色数が多い場合だとJPGよりも遥かにデータが重くなります。そのため色数が多くないと表現できない「人間や自然を撮った写真、車や道路等の写真」等をPNGの24bitフルカラーで保存すると…JPGの何倍、もしくは何十倍といった巨大で重いデータになることに。このPNGデータをサイトにアップしたら、「写真はキレイだけど、ページがとにかく重い！」というトラブルが起きる可能性が大なんです。
画質重視で重いページは、ハッキリ言ってユーザーにものすごく嫌われます。ページ表示に5秒かかるサイトの直帰率は、1秒で表示できるサイトの800％以上！「5秒かかるなら、もうそれ以上見ない！」と感じているユーザーがとても多いというわけですね。
Webサイトに掲載するPNGデータは、基本的に「8bit」で色数を抑え、なおかつ色の減少による画質劣化が目立たないもの、ということになります。色数を減らすと途端に品質劣化が目立ってしまうような写真（人間や自然物等を撮影したデータ）は、原則としてPNGでのアップには不向き…というわけですね。
またこれと同様に、イラストでもグラデーションが非常に多いもの、色使いが繊細で写真のようにリアルなもの等は、PNG（8bit）には向いていません。色数を極端に減らすと、グラデーションの部分の色味がキッパリと分かれてしまい、色味の違う細いリボンを何本も垂らしているような見栄えになります。これではせっかくのイラストの醍醐味は失われてしまいますね。
GIFの特徴とGIF保存に適したデータ
GIFは「Graphics Interchange Format」を省略した、画像フォーマット形式の名称です。長年「ギフ」と読むのか「ジフ」と読むのかで意見が分かれていましたが、フォーマットの製作者が「ジフだ」と明言したことでこの議論は2013年にようやく終了しました。拡張子は一般的に「.gif」が用いられます。
【GIFの特徴】
・色数は256色以下
・圧縮率はJPEGよりも高い
・PNGと同じ可逆圧縮（画質の劣化が生じない）
・GIFアニメーション機能がある
【GIFの強み・メリット】
・シンプルなアニメーション作りに適する
・透過画像・透明画素に対応する
・ごくシンプルな画像の場合にはデータが軽い
【GIFの弱み・デメリット】
・色数が少ないので色表現が限定される
GIF保存が向いている画像データとは？
1）動く顔文字や絵文字のようなデータ
2）動くバナー
3）動画にすると重いと感じられる場合のGIFアニメーションづくり
GIF保存形式の基本的な特徴は、PNGとほぼ同じです。そもそもGIFが特許問題でユーザー離れを起こした時に、「ほぼ同じ機能」として使われるようになったのが「PNG」。そのため使用できる色数の違い等を除けば、GIFとPNGはほぼ同じような特性を持っています。
またGIFの方がPNGよりもデータがやや軽い傾向はありますが、そこまで大きな違いでも無い、というケースの方が多いです。そのためイラストやロゴデータの場合、PNGとGIFを無理に使い分けず、PNG一本で保存してしまう方も多々居ます。
ただ「アニメーション」的な動きのあるデータを作る場合には、GIFが断然便利です。「GIFアニメーション機能」を使えば、イラストを動かしたり、動きのあるバナー等を比較的カンタンに作ることができます。画面に動きを出したい、動きを付けて目立たせたいという場合にはGIFが便利です。
またGIFアニメは静画を動かす「パラパラアニメ」のようなデータなので、いわゆる動画データに比べるとデータが軽いのも魅力。「カンタンな動画を載せたいけど、データが重くなりそうだな」「ほんの数秒の動きなので、わざわざ動画を掲載するほどではないんだよな…」こんな時にGIFアニメをうまく使えば、サイトを重くせずに「動画っぽい」コンテンツを作れます。
GIF保存が向いていない画像データとは？
2）グラデーション等が多いイラスト・図版データ
GIFは256色しか使えないので、鮮やかな写真データの表現等はできません。動画風のアニメーションも、どこかザラリとした独特の質感になります。ただそのややレトロにも思える質感を「デザイン」として捉えて、新たなWebデザインを生み出す人も居ます。
おわりに：保存形式・フォーマットに迷った時には？
JPG・PNG・GIFの使い方をザックリとまとめると、以下のようになります。
写真、色数が多く細かい絵→JPG
シンプルな絵やグラフ、キャプチャ→PNG
静画を動かすアニメーション→GIF
ただ画像データの中には、なかなかこの分類に合わないものもありますよね。例えば「写真＋ロゴマーク（自然物＋イラスト）」といった組み合わせの画像データだと、「JPGが良いのかPNGが良いのか」は微妙なところです。このような場合には、元データをきちんと保存しておいた上で、JPGフォーマット・PNGフォーマットのそれぞれのバージョンを作り、見栄えやデータの大きさ（重さ）を比較することをおすすめします。
フォーマットに気を遣ってあげるだけでも、サイト・ホームページの見栄えや快適さは大きく変わってくるものです。知識が無かった頃に掲載したままの重い画像・粗く見える画像がサイトやブログに放置されている…といった場合には、早めに画像を置き換えてあげましょう。
こんにちは。【検索上位表示ホームページ制作】中小企業様の集客に特化したコンテンツ作成＆Webマーケティングのアドバイザーをしております。貴社の魅力を引き出し大企業と渡り合えるコンテンツ作りには自信がございます。Web事業歴15年目。「地域一番を目指したい」と言うweb担当者様お気軽にご相談ください。