はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

JPEG、PNG、GIF、Webサイトで使う画像ファイル形式の違いをサクッと復習。

JPEG、PNG、GIF、Webサイトで使う画像ファイル形式の違いをサクッと復習。

Web担当者として、当たり前になっている画像フォーマット。WebサイトやSNSなど画像を使わない日はありません。

それぞれのファイル形式をテキトウに使ってしまったり、そういえば、どんな特徴があるんだっけと忘れてしまうこともあるかもしれません。

一般的によく使われる「JPEG」「PNG」「GIF」の3つに絞って、復習がてらアウトプットしたいと思います。

JPEG

まずはJPEG(ジェイペグ)です。ファイル拡張子は.jpgです。.jpegも同じですが、一般的には.jpgが使われています。

JPEGはフルカラー(1670万画素)まで使うことができます。

JPEGの良いところ

フルカラーが使えるので、写真やグラデーションに向いています(デジカメの画像データは.jpgが多い)

また画像のファイルサイズを小さくしたい(軽くしたい)ときに便利なフォーマットです。

JPEGに適した画像

  • 写真
  • 使用する色が多い画像

JPEGの注意点

JPEGは、非可逆圧縮の画像形式で、データを圧縮する(保存する)際に、データを捨ててしまいます。そのため一度、圧縮してしまうと、圧縮前の状態には戻せません。

例えば、画像サイズを小さくして保存をしたあとで、元のサイズに戻すと、画質がかなり悪くなります。また、加工→保存→加工→保存を繰り返すと、そのたびに画像が劣化します。

また、圧縮率が高くなるほど、ファイルサイズが小さくなりますが、画像が劣化(↓の劣化テストの右側の画像)が大きくなります。

写真でも試してみましょう。右側の画像が粗くなっているのがわかりますね。

PNG

続いてPNG(ピング)です。ファイル拡張子は.pngです。

PNGは、JPEGとGIFの特徴を持つフォーマットで、フルカラー(PNG-24)にも、8bit(PNG-8/256色)にも対応しています。

PNGの良いところ

PNGは可逆圧縮の画像形式です。画像を圧縮してもデータが残るので、JPEGのように保存するたびに画像が劣化することはありません。

また画像の一部を透過させる(透過度の調整も可能)ことができます。ロゴ画像で背景を透明にしたいような場合に適しています。

pngで背景を透過

PNGに適した画像

  • ロゴ
  • イラスト
  • 透過画像

PNGの注意点

JPEGよりも高品質の画像を作ることができますが、そのぶんJPEGよりもファイルサイズが、大きく(重く)なりやすいです。

同じ画像の場合、GIFよりもファイルサイズが小さくなります。

GIF

最後にGIF(ジフまたはギフ)です。ファイル拡張子は。gifです。

GIFは8bit(256色)まで使うことができます。使える色が少ないぶん、ファイルサイズも小さく抑えることができます。

GIFの良いところ

Gifアニメーションでもわかるように、アニメーション画像を作ることができます。

また画像の一部を透過させる(指定した色を完全に透過させることができる)ことも可能です。ただしPNGのように透過度の調整はできません。

via GIFMAGAZINE

GIFに適した画像

  • ロゴ(単色)
  • ボタン画像(単色)
  • アニメーション画像

GIFの注意点

Gifは、8bit(256色)までしか使えないので、使う色が多い写真などには向いていません。

また使う色が少なくなると、当然、画像の鮮明度も下がり、粗い画像になります。

必要に応じてフォーマットを選ぼう

Webサイトでは、表示速度が早いことが重要視されてきています。そのためWebサイトで使う画像のファイルサイズには気を使うことが多いでしょう。

かといって、ファイルサイズが小さければいいということでもありません。あまりにも画質の悪い画像(粗い画像)を使うのは、汚らしく見えてしまいます。

ちなみに私は、なるべくJPEGを使い、どうしてもキレイに見せたいときや透過を使うときにPNGを選んでいます。

どのフォーマットを選ぶかは、どこで何を目的に使うのかを考え、それぞれのフォーマットの特徴を考慮するのがいいでしょう。