Web担当者として、当たり前になっている画像フォーマット。WebサイトやSNSなど画像を使わない日はありません。
それぞれのファイル形式をテキトウに使ってしまったり、そういえば、どんな特徴があるんだっけと忘れてしまうこともあるかもしれません。
一般的によく使われる「JPEG」「PNG」「GIF」の３つに絞って、復習がてらアウトプットしたいと思います。
Webマーケティングに関する法律・権利を学ぶオンライン講座
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の注意点
JPEGよりも高品質の画像を作ることができますが、そのぶんJPEGよりもファイルサイズが、大きく（重く）なりやすいです。
同じ画像の場合、GIFよりもファイルサイズが小さくなります。
GIF
最後にGIF（ジフまたはギフ）です。ファイル拡張子は。gifです。
GIFは8bit（256色）まで使うことができます。使える色が少ないぶん、ファイルサイズも小さく抑えることができます。
GIFの良いところ
Gifアニメーションでもわかるように、アニメーション画像を作ることができます。
また画像の一部を透過させる（指定した色を完全に透過させることができる）ことも可能です。ただしPNGのように透過度の調整はできません。
GIFに適した画像
- ロゴ（単色）
- ボタン画像（単色）
- アニメーション画像
GIFの注意点
Gifは、8bit（256色）までしか使えないので、使う色が多い写真などには向いていません。
また使う色が少なくなると、当然、画像の鮮明度も下がり、粗い画像になります。
必要に応じてフォーマットを選ぼう
Webサイトでは、表示速度が早いことが重要視されてきています。そのためWebサイトで使う画像のファイルサイズには気を使うことが多いでしょう。
かといって、ファイルサイズが小さければいいということでもありません。あまりにも画質の悪い画像（粗い画像）を使うのは、汚らしく見えてしまいます。
ちなみに私は、なるべくJPEGを使い、どうしてもキレイに見せたいときや透過を使うときにPNGを選んでいます。
どのフォーマットを選ぶかは、どこで何を目的に使うのかを考え、それぞれのフォーマットの特徴を考慮するのがいいでしょう。
スポンサーリンク
