ブログで使う画像の形式は、JPEG・PNG・GIF が一般的だ。最近では WebP も使われるようになってきた。
このうち、写真素材でよく使われる JPEG 形式には「ベースライン」と「プログレッシブ」という 2 つの種類がある。本記事では以下について詳細に解説していく。
- 容量はどちらが軽いのか
- ブログで使うならどちらが最適なのか
- プログレッシブとベースラインの判別方法
- プログレッシブ形式画像の作成・変換方法
ブログ運営に役立つヒントを定期的にお届けします。購読者のみ閲覧できる限定コンテンツも無料配信中。
目次
ベースラインとプログレッシブの違いは表示方法
JPEG 画像の「ベースライン」と「プログレッシブ」は、表示方法に違いがある。
| 形式 | 表示方法 |
|---|---|
| ベースライン | 上から徐々に読み込んで表示する |
| プログレッシブ | 画像全体を低解像度で表示し、徐々に高解像度にしていく |
実際に体感していただくために、サンプルとして 7087 x 4724 px の大きな画像を用意した。どちちらも 6MB 以上あるので、データ利用の上限があるスマホで閲覧するさいは注意してほしい。
以下のサイトのほうがわかりやすいかもしれない。ベースラインとプログレッシブでどのように表示されていくかの比較デモになっている。
左がベースライン、右がプログレッシブだ。
昔はプログレッシブ形式に対応していない携帯電話（ガラケー）があり、ベースライン形式を使うのが一般的だった。
現在はどのブラウザでもプログレッシブ形式に対応している。通信環境も整っているため、どちらを使っても問題ない。よほど大容量の画像でなければ、見た目もわからないと思う。
ベースラインとプログレッシブの容量比較
ベースラインとプログレッシブでは、どちらが軽いのだろうか。先ほどのサンプル画像の容量を比較してみよう。
ブログで使うなら高解像度の画像は必要ない。以下は現実的なサイズにリサイズして比較したものだ。
そこまで大きな差はないものの、サイズに関わらずプログレッシブ形式のほうが容量は軽いことがわかる。サイズを 100px まで極端に小さくしても結果は同じだった。
画像の表示は速いに超したことはないから、ブログで使うさいはプログレッシブ形式にしたほうがよさそうだ。
ベースラインかプログレッシブかを判別する方法
作成またはダウンロードした JPEG 画像がベースライン形式かプログレッシブ形式か、見た目ではわからない。
そこで、画像ビューアソフトを使ってみよう。ここでは「IrfanView」を紹介する。
ビューアで画像を読み込み、Image > Information をクリックして「Compression」欄をチェックする。「progressive」が表示されていたらプログレッシブ形式だ。
ベースライン形式の画像
プログレッシブ形式の画像
プログレッシブ JPEG の作り方
プログレッシブ形式の JPEG 画像を作成する方法は、以下の 3 つ。
- 画像編集ツールで保存時に「プログレッシブ」を選択する
- 画像圧縮ツールを使う
- WordPress 画像軽量化プラグインを使う
画像編集ツールを使う
Photoshop などの一般的な画像編集ツールは、JPEG 形式で保存するさいにベースラインかプログレッシブかを選択できる。
以下は Photoshop Elements の設定画面。
※「Web 用に保存」ではなく「別名で保存」を選択する
「スキャン」は、何段階で画像を表示するか、という意味。デフォルトでは 3 で、このままでとくに問題ない。
ポチップ
画像圧縮ツールを使う
「Squoosh」や「あっしゅくま」などの画像圧縮ツールを使うと、自動的にプログレッシブ形式に変換される。
WordPress 画像軽量化プラグインを使う
「EWWW Image Optimizer」などの画像軽量化用 WordPress プラグインを使うと、画像をアップロードしたとき自動的にプログレッシブ形式に変換してくれる。
オンライン画像圧縮サービスも画像軽量化プラグインも、強制的にプログレッシブ形式となる。
あまりないとは思うが、ベースライン形式を使いたいならオンラインサービスやプラグインは使わず、FTP で直接アップロードしよう（本記事のサンプル画像もそうしている）。
JPEG 画像に関するまとめ
本記事の解説をまとめておく。
ブログで使う形式はどちらでもよいが、少しでも容量を小さくして表示速度を上げたいならプログレッシブがおすすめ。ただ、普段からそこまで気にする必要はない。
印刷目的であればベースライン形式を指定されることがあるので、画像編集ツールで保存するときは気をつけてほしい。
NEXT WordPress で使う画像の推奨サイズ・形式・容量
記事執筆：瀬尾 真
Web 業界歴 20 年の知見と経験をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。Twitter では最新ニュース・小技集を配信中。
メールマガジン
限定情報を無料配信中
