CREATIVE X 第2弾
CREATIVE X 第2弾
2015.10.06

画像ファイル形式の基礎と特徴まとめ(JPEG・GIF・PNGなど)

emi

とあるWEB会社のwebディレクターのemiです。

撮影した写真は、パソコンで写真を保存するときにどの形式を選んでいますか? 形式といってもいろいろありますが、WEBサイト制作では主にJPEG・PNG・GIFの3つの画像フォーマットが中心に使われています。これらはすべて主要WEBブラウザで表示できますが、それぞれに特徴があり、用途によって使い分ける必要があるのはご存知でしょうか。

そこで今回は、WEBサイト制作に使える主な画像ファイル形式と、その特徴についてまとめます。

※この記事は、2014年3月19日に公開された記事を再編集したものです。

JPEGファイル形式の基礎

そもそもJPEGとは

JPEG(Joint Photographic Experts Group)とは静止画像データの圧縮方式の一種です。規格を制定した組織の略称が方式名として使用されています。

圧縮率が高く、フルカラー(約1,677万色)の画像を扱えるため、デジカメ写真の記録に使用されることが多いです。

知っておきたいJPEGの特徴

デジカメの普及により一般的に知られているJPEGですが、WEB制作などの場面では以下の2つの特徴があります。

1. 拡張子がたくさんある

使用するパソコンやソフトによって、有名どころでは「.jpg」や「.jpeg」、他にも「jpe」「jfif」「pjpeg」「pjp」などの拡張子が混在していますが、すべて同じものなので基本的には「.jpg」や「.jpeg」を使うのが良いでしょう。

かつてMS-DOSの時代は拡張子は3文字までという制約があり、その流れで現在でも拡張子は3文字で表記する習慣が残っているため「.jpg」を一般的に使用することが多いようです。

また、Windowsでは大文字と小文字が区別されません。したがって aaa.jpg も aaa.JPGも同じものとして認識されますが、UNIX上では大文字と小文字が区別されるので注意が必要です。

2. 上書き保存で画質が劣化する

JPEGで加工した画像は、何も気にせず上書き保存すると劣化する場合があります。

加工前の「LIG」のロゴ画像と加工後の「LIG」のロゴ画像を比較した画像

左が加工前、右がPhotoshopで保存を5回繰り返した加工後のものです(JPEG形式、高圧縮率で保存)。右の画像は文字の周囲が少し汚れているように見えませんか?

JPEGは不可逆圧縮を行うため、画質が劣化してしまうのがデメリットなんです。「不可逆圧縮」とは、一度圧縮すると元には戻せない方法のことを指します。

容量が多い画像データをとても小さくできるのがJPEGのメリットですが、圧縮の際に一部のデータを切り捨ててしまうため、画質が劣化してしまうのです。

JPEG圧縮で画像が劣化するしくみ

JPEGによる圧縮では、画像を8×8ドット単位の正方形で区切り、この正方形をひとつのブロックとして近い色に置き換えています。その際にデータを切り捨てているため、元に戻すことができません。また、圧縮しすぎるとブロック単位で色が均一化され、画像がモザイク状になってしまいます。

単に画像を開いて閲覧したり、画像のコピーを作成する分には劣化は起こりません。Photoshopなどの画像加工ソフトで開き、「上書き保存」や「別名で保存」を行う際に上記の圧縮処理が行われて画像が劣化します。数回の保存では劣化は目立たないので神経質になる必要はありませんが、仕事で画像加工する場合などは注意が必要です。

画像加工ソフトには圧縮率を選択できるものがあるので、目的に応じて使い分けられるように、設定を確認してみましょう。

画像編集ソフトの「JPEGオプション」画面のキャプチャ画像

JPEGの扱い方

圧縮率が高くなるほど画像サイズは小さくできますが、その分画像は劣化してしまいます。JPEGではいくら低圧縮に設定しても多少の劣化は避けられないので、事前に容量と画質のバランスを見ながら圧縮比を試してから作業するようにしましょう。

上記に気をつければ、JPEGは写真の圧縮に適した非可逆圧縮方式であり、写真画像に限ってはJPEGのほうが見た目はそのままにファイルサイズが小さくなることが多いです。