プログレッシブJPEGとは?普通のJPEGと何が違う?

プログレッシブJPEGとは?普通のJPEGと何が違う?

Webページに写真などの画像を挿入するときは、JPEG形式ファイルをよく利用しますが、JPEGには、ベースラインJPEGとプログレッシブJPEGの2種類あるのをご存じでしょうか。

普段は「写真などの画像にはJPEG」ぐらいの認識で利用しており、両者の違いについて特に気にしていなかったのですが、ベースラインJPEGとプログレッシブJPEGの違いについて、自分の備忘録としてまとめておきたいと思います。

JPEGとは

JPEGは、非可逆圧縮の画像フォーマットで、おもに写真など自然画像の記録に適しています。

非可逆圧縮では、画質の劣化を許容することで圧縮率を高めファイルサイズを小さくでき、たとえば、人間の目にはほとんど見分けがつかないほどの圧縮でもデータ容量を数分の一程度に圧縮することができ、最も低い画質まで落とせば、データ容量が数十分の一から百分の一以下になることもあります。

ベースラインとプログレッシブの違いは

JPEGは、画像を8×8ピクセルの正方形のブロックに分け、ブロックごとに色情報を記録しており、画像はファイルの先頭から順に読み込まれ表⽰されます。

ベースラインJPEGでは、各ブロックのすべての色情報を順番に記録しており、上から徐々に表示されます。

一方、プログレッシブJPEGでは、ファイルの先頭に各ブロックの一部の色情報を記録し、次に残りの色情報の一部を記録し、という具合に何段階かに分けて色情報が記録しています。そのため、最初にぼんやりと全体像が表示され、データを受信するごとに次第に鮮明化していくように表示されます。

ベースラインかプログレッシブか

ファイルサイズ面

JPEGをベースラインにするかプログレッシブにするかの分かれ目は、ファイルサイズが10KB未満かどうかと言われています。

10KB未満ではベースライン、10KB以上ではプログレッシブの方が若干ファイルサイズが小さくなる可能性が高いようです。

ただ、画像を大量に扱うのでもなければ、この若干のファイルサイズの差を気にする必要性はほとんどないでしょう。

表示方法

通信帯域が細い場合に、プログレッシブJPEGの画像を表示させると、すべてのデータをダウンロードする前に大まかな全体像を確認できるため、その点ではメリットがあります。

しかし、昨今のインターネット回線の速度を考えると、プログレッシブJEPGの表示面でのメリットはほとんどないと思います。また、プログレッシブJPEGの表示に対応していないブラウザも若干あることを考えると、ベースラインJPEGにしておくのが無難かもしれません。

あとがき

昨今の通信環境を考えると、素材サイトなど画像を大量に使用するようなサイトを運営するのでなければ、JPEGの形式にこだわる必要はないかもしれません。

また、よほど大容量の画像でもない限り、画像表示時に形式の違いを感じることもないでしょう。