画像のフォーマット（形式）にはJPEG、PNG、TIFFなど様々ありますが、普段ネットで見る画像・写真の形式はぶっちゃけ９割以上JPEG（JPGとも）です。JPEGは圧縮することで画質をほとんど維持したままサイズ（MBやKB）を大幅に小さくできるというメリットがあるため、ネットのようなスピードが要求される場所では多く使われています。しかし圧縮すると元に戻せないと不可逆な性質があるのでクオリティが求められる場面では向いていません。

実は、その「JPEG」には２種類あるのをご存知ですか？ITに詳しいつもりの私（中学生の時から自作PCを作っていたので）でも最近知りました。プログレッシブとベースラインなのですが、とはいっても両者の拡張子や解像度は同じなんです。では何が違うのでしょうか？

読み込まれ方が違う

両者の違いはPCやスマホに保存された写真を見ているだけではわかりませんが、ウェブページで画像をを開いた（ダウンロードした）ときの読み込まれ方が違います。

ウェブページはなるべく速くローディングできる必要があります。テキストやHTMLは軽いのですぐ読み込まれますが、画像はサイズが大きいのでなるべく解像度を落とし、圧縮します。そうすることで回線の遅いスマホでも速く読み込むことができます。当サイトPhoto Mini運営者の私としても、このサイトは写真・画像の多いので（写真ギャラリーではありあませんが）なるべく画質を維持しつつサイズを落とすことに立ち上げ当初苦心していました。

ベースライン

ウェブブラウザが画像を読み込むときに左上の端からオリジナル画質で順に読み込みます。

プログレッシブ

ウェブブラウザが読み込むときに最初は全体的に画質の低い（＝ギザギザした）画像を読み込み、後から解像度を高くしていく方式です。

スマホのような遅い回線に有利で、ベースラインだと例えば30%しか読み込まれなかったら上の30%分しか表示されないのに対し、プログレッシブならすべての読み込みが終わらなくても全体像がある程度わかります。

どうやって選ぶ？

PhotoshopでJPEG保存するときに選択できます。意外と飛ばしがちな人が多いと思いますが。

1. メニュー＞ファイル＞別名で保存
2. フォーマット：JPEG
3. JPEGオプション
4. 形式オプション

ベースラインには「標準」と「最適化」の２種類があります。「標準」はブラウザで画像を読み込むときに左上から順に最高画質で読み込んでいく方式で、「最適化」は「ハフマン符号」というアルゴリズムで「標準」よりさらに圧縮します。

プログレッシブではスキャンの数を選ぶことができ、これはブラウザが何回に分けて読み込むかを指定します。3~5回の間です。

サイズが軽いのはどっち？

ベースラインとプログレッシブの特徴を紹介しました。では、同じ画像、同じ解像度、同じ圧縮率ではどっちがサイズ（KB、MB）が軽いのでしょうか？比べてみました。

Photoshopでそれぞれで保存してみました。

• ベースライン（標準）：781 KB
• プログレッシブ（スキャン３）：765KB

すると、わずかですがプログレッシブJPEGの方が軽いことがわかります。