Web担当者の皆様は、画像の形式を気にしていますか?
画像を保存する際、末尾に「.jpeg」や「.png」という拡張子がついているのを見たことはあっても、それぞれどのような特徴を持っているかまでは知らない方が多いのではないでしょうか。

今回は、Web上でよく利用されるJPEG・GIF・PNGそれぞれの特徴を解説します。

ホームページの見栄えを左右する画像は、コンテンツの重要な一要素です。使い分けせずなんとなく利用していたという方は一度確認してみましょう。

画像形式の種類

JPEG(ジェイペグ)

JPEGはフルカラーの1,677万色を表現できる点が利点で、草花などの繊細なグラデーションや自然色の多い画像に適した形式です。
その反面、色の境界がくっきりしたアニメ風イラストやアイコンなどの画像とは相性が悪く、色と色の境目が明確に区別されず、曖昧な表現になってしまいます。

JPEGはデータを圧縮して画像サイズを小さくすることはできるのですが、一度画像を圧縮すると元のサイズには戻せません(不可逆圧縮)。
つまり、画質を一度下げて保存してしまうと、もう元の画質には戻すことはできず、保存を切り返すと画質が劣化してしまいます。

ちなみに、画像形式でよく見かける「.jpg」はJPEGと同じものと捉えて問題ありません。

PNG(ピング)

PMGは、他の画像形式に比べると比較的新しく開発された拡張子で、様々な点で高い利便性を持ちます。
256色を扱える形式と、JPEG同様フルカラー(1677万色)を扱える形式のどちらにも対応可能なため、グラデーションにも境目のくっきりしたアイコン画像でも問題なく表示できます。
JPEGと異なり、保存を繰り返しても画質は劣化しません。
また、透過も可能で、画像の透明度を自由に設定できます。

フルカラーで保存した場合には、JPEGよりも画像サイズはが大きくなってしまうため、あまりにも大きい場合はJPEG形式で保存する方が良いでしょう。

GIF(ジフ)

GIFは256色までの対応が可能で、アイコンや図形など、色数を必要としない図形に適しています。
GIFにも透過機能があり、PNGのように調節はできませんが、指定した色を完全に透明にすることができます。ロゴやボタンなど背景が不要な画像によく利用されます。
GIFは複数の画像を重ねてアニメーション表現ができるため、ちょっとした短い動画はGIF形式で保存されているケースが多くあります。

6/30追記:誤った記載があったため、該当箇所を削除しました。大変失礼いたしました。

まとめ

画像は、ユーザーの興味・関心をひくのに欠かせない要素の1つです。
デスクトップパソコン、ノートパソコン、スマホ、タブレット等ユーザーのネット接続環境が多種多様になってきているのに加え、各デバイスの解像度も飛躍的に上昇しているため、掲載する画像の質にはできるだけ気をつけるようにしましょう。

色数が多い画像はJPEG、透明度を調整したい場合はPNGといったように、画像によって形式を使い分け、少しでも気を配るだけでも見栄えに差が出てきます。

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