主な画像ファイル形式の基礎知識

画像を保存・書き出しするとき、形式の選び方を間違えると、画質・ファイルサイズ・透過背景のいずれかが思ったとおりにならないことがある。ここでは代表的な画像形式の違いを整理する。

JPG/JPEG:非可逆圧縮で、写真向き

非可逆圧縮のアルゴリズムを採用しており、ファイルサイズを大きく圧縮できるため、色のグラデーションが豊かな写真系の画像に向いている。欠点は透過背景に対応していないこと、そして保存し直すたびに圧縮によって画質がわずかに劣化していくため、同じファイルを何度も編集する用途には向かない。

PNG:可逆圧縮で、透過背景に対応

可逆圧縮のため、何度保存しても画質が劣化せず、透過チャンネルにも対応している。アイコンや透過背景のデザイン素材、文字のエッジをくっきり保ちたいスクリーンショットなどでよく使われる。欠点は、同程度の画像でもJPGよりファイルサイズが大きくなりやすいこと。

GIF:色数は少ないが、簡単なアニメーションが作れる

使用できる色数は最大256色までで、色数の多い写真には向かないが、複数の画像を組み合わせて単純なループアニメーションを作ることができる。初期のネット文化における動く画像やリアクション画像の定番フォーマットだった。

SVG:ベクター形式で、拡大縮小しても劣化しない

これまでのピクセルの格子で構成される形式とは異なり、SVGは数学的なパスで図形を記述するため、どれだけ拡大・縮小してもギザギザやぼやけが生じない。サイズを変えてもくっきり表示したいアイコンやロゴによく使われるが、写真のような大量のピクセル単位の細部情報からなる複雑な画像の表現には向かない。

WebP:比較的新しい、サイズと画質を両立した形式

Googleが開発した形式で、非可逆・可逆どちらの圧縮にも対応し、GIFのように簡単なアニメーションも作成できる。同程度の画質であればファイルサイズはJPGやPNGより小さくなることが多く、現在では主要なブラウザや多くのプラットフォームで広くサポートされているが、一部の古いソフトや機器では完全に対応していない場合もある。

透過背景に対応しているかどうかが選定基準になりやすい

透過背景を維持したい場合は、アルファチャンネルに対応したPNG、一部のGIF、WebPなどが適している。JPGは透過チャンネルに対応していないため、透過背景の素材をJPGとして書き出すと自動的に単色の背景で塗りつぶされてしまう。

「万能な1形式」を探すのではなく、用途に応じて選ぶ

写真系のコンテンツはJPGかWebPを優先的に検討し、アイコンや透過背景が必要なデザイン素材はPNGかSVGを優先的に検討する。さまざまなサイズで表示するロゴ系の図形はSVGを優先的に検討するとよい。あらゆる場面で最適な万能形式というものは存在しない。

非可逆圧縮と可逆圧縮の本質的な違い

非可逆圧縮は、圧縮の過程で人間の目には気づきにくい画像の細部情報を一部間引くことで、ファイルサイズを小さくする。圧縮率が高くなるほど、画質の劣化も目立ちやすくなる。一方、可逆圧縮はより効率的な符号化によってファイルサイズを圧縮する方式で、復元した画像の情報は元のファイルと完全に一致し、圧縮によって細部が失われることはない。

ラスター画像とベクター画像は画像の表現方法がまったく異なる

JPG、PNG、GIF、WebPはいずれも本質的にはラスター(ビットマップ)形式であり、格子状に並んだピクセルで構成されているため、ある程度以上拡大するとギザギザやぼやけが生じる。一方SVGはベクター形式に属し、数式によって形状・色・パスを記述するため、どの拡大率でもエッジがくっきりしたまま保たれる。アイコンやロゴ素材にベクター形式が向いているのはこのためである。

よくある質問

ウェブサイトの画像はJPGとWebP、どちらを使うべきか

対象のプラットフォームや訪問者が使うブラウザが広くWebPに対応しているなら、同程度の画質でもWebPのファイルサイズはJPGより小さくなることが多く、ページの表示速度向上に役立つ。非常に古いブラウザやソフトとの互換性も重視する必要がある場合は、JPGの方が依然として無難な選択肢であり、実際の訪問者の環境や対応状況に応じて判断するとよい。

JPGをPNGに変換すれば、失われた画質を取り戻せるのか

取り戻せない。JPGを保存する際に生じる画質の劣化は不可逆であり、PNGに変換するのは現在の画像をあらためて可逆圧縮の容器形式で保存し直しているだけで、すでに非可逆圧縮によって失われた元の細部情報が復元されるわけではない。