COLUMN 採用お役立ちコラム

目次

1. 1.JPEG（ジェイペグ）
2. 2.PNG（ピング）
3. 3.GIF（ジフ）
4. 4.まとめ

1.JPEG（ジェイペグ）

正式名称は「Joint Photographic Experts Group」
JPEGとは静止画像データの圧縮方式の一種です。
フルカラー1670万色まで扱うことができ、色数の多い写真や、グラデーションのように色が細かく変化する画像の保存に適しています。
パソコンによっては「.jpg」とも「.jpeg」とも表記されますが、その二つには違いがなく、どちらも内容は全く同じです。

色の境界がはっきりしているイラストやアイコンだと、色の境目が明確に区別されず、もやっとした表現になってしまうことがありますので、使い分けが必要です。

JPEGはデータを圧縮して画像サイズを小さくすることはできるのですが、画像を圧縮すると元のサイズには戻せません。保存を繰り返すと画質が劣化してしまうので、ご注意ください。

2.PNG（ピング）

正式名称は「Portable Network Graphics 」
PNG（ピング）は、とくにウェブで使われるために生まれた画像形式です。

256色を扱える形式と、JPEG同様フルカラー（1677万色）を扱える形式のどちらにも対応可能なため、グラデーション画像にも境目のくっきりしたアイコン画像にも利用できます。

JPEGと異なり、保存を繰り返しても画質は劣化しません。
また、透過も可能で、画像の透明度を自由に設定できます。

GIFが不得意なグラデーションや色数の多い表現も可能なので、写真を丸く切り抜いて背景を透明にしたい場合や、グラデーションをつけたい場合に適しています。

3.GIF（ジフ）

正式名称は「Graphics Interchange Format」
最大256色の限られた色数で構成される可逆圧縮形式の画像で、アイコンや図形など、色数が少なくて済む図形に適した画像形式です。

GIFにも透過機能があり、PNGのように調節はできませんが、指定した色を完全に透明にすることができます。
ロゴやボタンなど背景が不要な画像によく利用されます。

GIFは複数の画像を重ねてアニメーション表現ができるのが他の画像形式と大きく違う点です。数秒のものであれば、動画よりも軽いGIF形式で作られているケースがあります。
従来はこうした表現は「FLASH」という仕組みが使われていましたが、スマホの普及につれ、iPhoneに対応していないFLASHからGIFに利用が移ってきました。
広告バナーなどで、ちょっと動くものはGIFで作られていることが多いので、注目してみてください。

4.まとめ

簡単にまとめると・・・
・普通の写真や、多彩な色を使用したイラストなどを載せる場合は「JPG」
・色の少ないロゴや単調なイラスト、アニメーションならば「GIF」
・画質をきれいに保ちながら背景を透過させたい場合は「PNG」

画像はユーザーの興味・関心を引く要素の1つです。
画像の特徴をよく理解し、最適な使い方をしていくことで、サイトに載せている画像の見栄えも大きく変化します。

パソコン、スマホ、タブレット等、ネット接続環境が多種多様になってきているのに加え、
各デバイスの解像度も飛躍的に上がっているため、掲載する画像の質には十分気をつけましょう。

また不必要に大きなデータを使ってしまうと、サイトの速度にも影響してしまいます。
サイトの読み込みスピードを上げるためにも、画像形式をしっかりと理解して、
適したものを選択できるように確認しておきましょう。