JPEGには2種類ある！プログレッシブとベースラインの違いは何？

ブログで画像を使うとき、JPEG・GIF・PNGのいずれかを使いますよね。

このうち、主にカラフルな画像や写真などで使われるJPEGには「ベースライン」と「プログレッシブ」という2つの種類があることはご存知でしたか？

というわけで、今日のテーマはこちらです。

さっそく見ていきましょー。

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

まず、こちらのJPEG画像をご覧ください。

元画像は大きさ 3456 × 2304 で容量は3MBほどあるため、リンクをはっておきます。スマホの3G回線だとちょっと重いかも。

» ベースライン形式

» プログレッシブ形式

どちらも見た目は変わりませんが、実は表示方法が違います。

ひと昔前の携帯電話ではプログレッシブJPEGが表示できないなどの問題がありました。

そのため今でも一般的に使われているのはベースラインのほうですが、現在はどのブラウザでも問題なく表示されます。通信環境も整っているため、どちらを使っても表示に影響はないと考えてよいでしょう。

ただし、画像は少しでも軽くして使いたいので次にベースラインとプログレッシブの容量を比較してみます。

ベースラインとプログレッシブの容量比較－軽いのはどっち？

先ほどの画像を比べてみるとこのような結果になりました。

プログレッシブのほうがやや軽いですね。

一般的な個人ブログでは、これほど大きな画像を取り扱う機会はそれほどないと思います。もう少し現実的なサイズで比べてみましょう。

当ブログでよく使っている 600px × 400px のサイズで比較してみます。

元画像：4368px × 2912px（3.3MB）

横幅600pxのJPEG画像を比較

上記画像をPhotoshopでリサイズしてみました。その結果がこちら。

この大きさでもプログレッシブのほうが軽いようです。

圧縮ツールJPEGmini使用後の容量比較

さらにこれをJPEGminiで圧縮して比較してみましょう。

やはりプログレッシブに軍配が上がります。

EWWW Image Optimizer 使用後の容量比較

このブログでは、WordPressプラグイン「EWWW Image Optimizer」を使っていますので、アップロード時にさらに圧縮されます。その結果が下表。

あれ？ベースラインがわずかに逆転しましたね。ということは、WordPressで使うならベースラインが最適ということでしょうか。

いえいえ。実はこれにはカラクリがあるんです！

ベースライン・プログレッシブの判別方法

一般的にJPEGといえばベースラインなのですが、パッと見てどちらの形式か判別することはできません。

そこで、このようなツールを使います。

プログレッシブJPEG判定機（Windowsのみ）

ブログにアップした画像を再ダウンロードして判定してみましょう。

EWWW Image Optimizer はプログレッシブに変換する

まずはプログレッシブJPEGのほうから。

ちゃんとプログレッシブとなっていますね。

今度はベースラインでアップした画像。

あらら？　ベースラインのはずがプログレッシブになっています。同じ画像の使いまわしじゃないですよ！

念のため、アップロード前の画像を判定してみます。

一般的なJPEG（＝ベースライン）でした。

ということは、「EWWW Image Optimizer」はプログレッシブJPEGに変換している、ということですね。実はこの記事を書くまで僕も知りませんでしたｗ

過去記事の画像を調べたところ、ベースラインで作成した画像がすべてプログレッシブになっています。冒頭のリンク先にある花の画像はFTPで直接アップロードしましたが、こちらはプラグインを介していないのでベースラインのまま。

アップロード時に容量がほぼ同じになった理由はコレだったんですねー。

プログレッシブJPEGの作り方

もしWordPressでプラグイン「EWWW Image Optimizer」を使っているなら、わざわざプログレッシブJPEGを作る必要はなさそうです。

上記のとおり、アップロード後の容量に大きな変化は見られません。

もっとも、元画像の色数や大きさによって多少の変化はありますし、リサイズ時にニアレストネイバー法を使うかバイキュービック法を使うか…というのでも変わります。

参考ニアレストネイバー法やバイキュービック法でのリサイズやJPEG圧縮などを検証したよ。

こっちが絶対に良い！ということは言えません。徹底的に軽さにこだわるなら、画像作成時にベースラインとプログレッシブの2種類を作って、実際に容量を比較するのが確実です。

画像素材サイトなどで配布されているのはほぼベースライン。プログレッシブJPEGを作る方法は主に2通りです。

画像編集ソフトでも、無料オンライン版ではプログレッシブ形式が選択できないこともあります。

もう少し詳しくご紹介します。

PhotoshopやGIMPで作る方法

フォトショではJPEG画像作成時にオプションを指定することができます。廉価版のElementsでも、細かく指定可能。

バージョンによって違いはありますが、JPEG保存時にこんな感じでオプションが出てきます。

「スキャン」というのは何段階で表示させていくか、の数値です。上記のように「3」にしておくと、低解像度→中解像度→高解像度、という感じで徐々にくっきり表示されます。

回線が速ければ、600pxぐらいの画像は一気に表示されますけどね。あまり気にしなくて良いです。

無料ツールでおなじみのGIMPでも保存時に形式を選択できます。

ベースラインをプログレッシブに変換する方法

無料オンライン画像編集ツールだと先日ご紹介した「PIXLR」が有名ですが、こちらは保存形式がベースラインのみ。では、これをプログレッシブに変換してみましょう。

参考Photoshop高いんだよなー、という人は無料のPIXLRを使うと幸せになれるよ

ツールはいろいろありますが、ここでは「Jpeg Resizer」をご紹介します。

使い方は簡単で、画像を選んで圧縮モードを選択して保存するだけです。

フォトショやGIMPを持っていなくて、わざわざプログレッシブに変換するだけのために入手するのもなー、という時は便利ですよ。

まとめ

画像素材サイトやギャラリーサイトを運営するのでなければ、JPEGの形式にさほどこだわる必要はないかもしれません。

少しでも軽くしたいなら、ベースラインとプログレッシブの2種類を作って容量の小さなほうを選択しましょう。

WordPressなら「JPEGmini」＋「EWWW Image Optimizer」で十分だと思います。画像によっては、あまり劣化せずに容量を元の半分以下まで落としてくれるので使わない手はありませんね。

それでは、また。