ブログで使う画像の形式は、JPEG・PNG・GIF が一般的です。最近では WebP や AVIF も使われるようになってきましたね（JPEG 2000 はどこへやら）。
このうち、写真素材でよく使われる JPEG 形式には「ベースライン」と「プログレッシブ」という 2 つの種類があるのはご存知でしょうか。本記事では以下 4 点について詳細に解説しています。
JPEG 画像の「ベースライン」と「プログレッシブ」は、表示方法に違いがあります。
| 形式 | 表示方法 |
|---|---|
| ベースライン | 上から徐々に読み込んで表示する |
| プログレッシブ | 画像全体を低解像度で表示し、徐々に高解像度にしていく |
ベースラインとプログレッシブでどのように表示されていくか、以下のサイトで比較デモをご覧いただけます。
左がベースライン、右がプログレッシブです。
昔はプログレッシブ形式に対応していない携帯電話（ガラケー）があったので、ベースライン形式を使うのが一般的でした。
現在はどのブラウザでもプログレッシブ形式に対応しています。通信環境も整っているため、どちらを使っても問題ありません。よほど大容量の画像でなければ、見た目もわからないですしね。
ベースラインとプログレッシブでは、どちらが軽いのでしょうか。
以下は、かなり大きなサイズの容量を比較してみたものです。1MB も変わらないぐらい。
Web サイトで使うなら、高解像度の画像は必要ありません。
もう少し現実的なサイズで比較すると、7KB ほどの差となりました。
そこまで大きな差はないものの、サイズに関わらずプログレッシブ形式のほうが容量は軽いことがわかります。サイズを 100px まで極端に小さくしても結果は同じでした。
画像の表示は速いに超したことはないので、どちらかと言えばプログレッシブ形式にしたほうがよさそうです（※ 何がなんでもそうしろ、ということではありません）。
作成またはダウンロードした JPEG 画像がベースライン形式かプログレッシブ形式か、見た目ではわかりません。
判別するには画像ビューアソフトが必要です。ここでは「IrfanView」を使ってみたいと思います。
ビューアで画像を読み込み、Image > Information をクリックして「Compression」欄をチェック。
「progressive」と表示されていたらプログレッシブ形式です。
ベースライン形式の画像
プログレッシブ形式の画像
プログレッシブ形式の JPEG 画像を作成する方法は、以下の 3 つです。
Photoshop などの一般的な画像編集ツールは、JPEG 形式で保存するさいにベースラインかプログレッシブかを選択できます。
以下は Photoshop Elements の設定画面。
※「Web 用に保存」ではなく「別名で保存」を選択する
「スキャン」は、何段階で画像を表示するか、という意味です。デフォルトでは 3 で、このままでとくに問題ありません。
ポチップ
「Squoosh」や「あっしゅくま」などの画像圧縮ツールを使うと、自動的にプログレッシブ形式に変換されます。
ドラッグ＆ドロップで放り込むだけで、さらに軽量化してくれるので楽ですね。
JPEG・PNG 画像 圧縮軽量化 無料オンラインツール 10 選
「EWWW Image Optimizer」などの画像軽量化用 WordPress プラグインを使うと、画像をアップロードしたとき自動的にプログレッシブ形式に変換してくれます。
オンライン画像圧縮サービスも画像軽量化プラグインも、強制的にプログレッシブ形式となるようです。
あまりないとは思いますが、どうしてもベースライン形式を使いたいならオンラインサービスやプラグインは使わず、FTP で直接アップロードしましょう。
Web サイトで使うならどちらでもよいですが、少しでも容量を小さくして表示速度を上げたいならプログレッシブがおすすめ。ただ、普段からそこまで気にする必要はありません。
印刷目的であればベースライン形式を指定されることがあるので、画像編集ツールで保存するときは気をつけてください。
