2014/06/13
JPEGには2種類ある！プログレッシブとベースラインの違いは何？
ブログで画像を使うとき、JPEG・GIF・PNG のいずれかを使うことが多いと思います。
このうち、主にカラフルな画像や写真などで使われるJPEG 形式には「ベースライン」と「プログレッシブ」という 2 つの種類があることはご存知でしたか？
その詳細を解説していきます。
- ブログで使うならどちらが最適なのか
- 圧縮前後の容量はどちらが軽いのか
- 作成や変換の方法
Headline
ベースラインとプログレッシブの違い
まず、こちらのJPEG画像をご覧ください。
元画像は大きさ 3456 × 2304 で容量は 3MB ほどあるため、リンクをはっておきます。スマホの 3G 回線だとちょっと重いかも。
» ベースライン形式
どちらも見た目は変わりませんが、実は表示方法が違います。
| JPEG形式 | 表示方法 |
|---|---|
| ベースライン | 上から徐々に読み込んで表示する一般的な方式。 |
| プログレッシブ | 画像全体を荒く（低解像度）表示し、徐々に細かく（高解像度）表示する方式。一部未対応ブラウザあり。 |
ひと昔前の携帯電話ではプログレッシブ JPEG が表示できないなどの問題がありました。
そのため今でも一般的に使われているのはベースラインのほうですが、現在はどのブラウザでも問題なく表示されます。通信環境も整っているため、どちらを使っても表示に影響はないと考えてよいでしょう。
ただし、画像は少しでも軽くして使いたいので次にベースラインとプログレッシブの容量を比較してみます。
ベースラインとプログレッシブの容量比較
先ほどの画像を比べてみるとこのような結果になりました。
| JPEG形式 | 容量 |
|---|---|
| ベースライン | 3.09MB |
| プログレッシブ | 3.08MB |
プログレッシブのほうがやや軽いですね。
一般的な個人ブログでは、これほど大きな画像を取り扱う機会はそれほどないと思います。もう少し現実的なサイズで比べてみましょう。
600px × 400px のサイズで比較してみます。下の画像はもともと 4368px × 2912px（3.3MB）ですが、これをリサイズして検証します。
横幅600pxのJPEG画像を比較
上の画像を Photoshop でリサイズしてみた結果がこちらです。
| JPEG形式 | 容量 |
|---|---|
| ベースライン | 119KB |
| プログレッシブ | 114KB |
この大きさでもプログレッシブのほうが軽いようですね。
圧縮ツールJPEGmini使用後の容量比較
リサイズした画像を JPEGmini で圧縮して比較してみましょう。
| JPEG形式 | 容量 |
|---|---|
| ベースライン | 52.1KB |
| プログレッシブ | 51.4KB |
やはりプログレッシブに軍配が上がります。
EWWW Image Optimizer 使用後の容量比較
画像圧縮用の WordPress プラグイン「EWWW Image Optimizer」を入れていると、画像アップロード時にさらに圧縮されます。その結果がこちら。
| JPEG形式 | 容量 |
|---|---|
| ベースライン | 51.4KB（52,640 バイト） |
| プログレッシブ | 51.4KB（52,664 バイト） |
あれ？ ベースラインがわずかに逆転しましたね。ということは、WordPress で使うならベースラインが最適ということでしょうか。
いえいえ。実はこれにはカラクリがあるんです！
ベースライン・プログレッシブの判別方法
いま見ている JPEG 形式の画像がベースラインなのかプログレッシブなのか、よほど読み込みに時間がかかる容量でなければ見た目だけで判別することはできません。
そこで、このようなツールを使います。
プログレッシブJPEG判定機（Windowsのみ）
ブログにアップした画像を再ダウンロードして調べてみましょう。
EWWW Image Optimizer はプログレッシブに変換する
まずはプログレッシブJPEGのほうから。
ちゃんとプログレッシブとなっていますね。
今度はベースラインでアップした画像。
あらら？ ベースラインのはずがプログレッシブになっています。同じ画像の使い回しじゃないですよ！
念のため、アップロード前の画像を判定してみます。
一般的なJPEG（＝ベースライン）でした。
ということは、「EWWW Image Optimizer」は画像アップロード時にプログレッシブ JPEG に変換している、ということですね。
念のため過去記事の画像を調べたところ、ベースラインで作成した画像がすべてプログレッシブになっていました。冒頭のリンク先にある花の画像は FTP で直接アップロードしたため、プラグインの影響を受けずベースラインのままになっています。
アップロード時に容量がほぼ同じになった理由はコレだったんですね。
プログレッシブJPEGの作り方
少しでも容量を軽くするためにプログレッシブ JPEG にしたいなら、WordPress であればプラグイン「EWWW Image Optimizer」を入れておけば OK です。
上記のとおり、アップロード後の容量に大きな変化は見られません。
プログレッシブが絶対に良い！ ということはないと思いますが、徹底的に軽さにこだわるなら、画像作成時にベースラインとプログレッシブの 2 種類を作って容量を比較するのが確実です。
では、WordPress プラグイン以外でプログレッシブ JPEG を使いたい場合はどうしたらよいでしょうか。方法は 2 つあります。
- 画像編集ソフトで保存形式を選択する
- 圧縮ツールで変換する
PhotoshopやGIMPで作る方法
Photoshop は JPEG 画像作成時にオプションを指定することができます。廉価版の Elements でも大丈夫です。
バージョンによって UI は違いますが、JPEG 保存時にこんな感じでオプションが出てきます。
「スキャン」というのは何段階で表示させていくか、の数値です。上記のように「3」にしておくと、低解像度→中解像度→高解像度、という感じで徐々にくっきり表示されます。
回線が速ければ、横幅 600px ぐらいの画像は一気に表示されますけどね。あまり気にしなくてよいと思います。
無料画像編集ツールでおなじみの GIMP でも保存時に形式を選択できます。
「PIXLR」などの無料オンラインツールだとこうしたオプションが用意されていないので、別の変換ツールを使うとよいでしょう。
ブログのアイキャッチを作ろう！無料画像編集ツールPIXLRの使い方
ベースラインをプログレッシブに変換する方法
変換ツールはいろいろありますが、ここでは「Jpeg Resizer」をご紹介します。
使い方は簡単で、画像を選んで圧縮モードを選択して保存するだけです。
Photoshop や GIMP を持っていなくて、わざわざプログレッシブに変換するだけのために入手するのもな・・・、という時は便利ですよ。
その他、Vector にグラフィック変換ツールが多数公開されているので覗いてみてください。
まとめ
画像素材サイトやギャラリーサイトを運営するのでなければ、JPEG の形式にさほどこだわる必要はないかもしれません。
少しでも軽くしたいなら、ベースラインとプログレッシブの 2 種類を作って容量の小さなほうを選択しましょう。
WordPressなら「画像軽量化ツール」＋「EWWW Image Optimizer」で十分だと思います。画像によっては、あまり劣化せずに容量を元の半分以下まで落としてくれるので使わない手はありませんね。
JPEG圧縮・軽量化ツール9選－画像圧縮後の容量と画質を比較
それでは、また。
