画像拡張子9種類の違いと、JPEG・PNG・WebPなどを用途で選ぶ方法

画像の拡張子は .jpg・.png・.webpのようにファイル名の最後に付く部分で、その画像がどの形式で保存されているかを表します。形式によって圧縮のしかたや透過・アニメーションへの対応が異なるため、写真やアイコンなど画像の中身に合わせて選びます。

この記事では画像ファイル形式の主な9種類について、違いと選び方を解説します。書く内容はMDN（Web技術の解説サイト）・Microsoft・Appleの説明にある性質だけで、ファイルサイズが何%小さくなるかといった数字は紹介しません。

画像拡張子9種類と圧縮・適した用途の一覧表

1つの形式に拡張子が複数あることもあり、.jpgと .jpegはどちらもJPEGです。圧縮には画質を落とさずにデータ量を減らす可逆圧縮と、画質の一部と引き換えにデータを大きく減らす非可逆圧縮があります。

MDNがWebで最も一般的に使われる形式として記載しているのは、9種類のうちJPEG・PNG・GIF・WebP・AVIF・SVGの6つです。TIFFに対応するブラウザーはSafariだけで、BMPもWebでは特殊な場合にしか使われません。

JPEGとPNGはどちらも静止画によく使われる形式ですが、圧縮と透過への対応が異なります。WebPはJPEGやPNGより圧縮に優れ、アニメーションと透過にも対応しています。

写真・アイコン・図・スクリーンショットに適した形式

写真・アイコン・スクリーンショット・図の4つに分けて適した形式を記載しているのが、MDNの「画像形式の選択」です。ただし、iPhoneで撮った写真の保存形式はMDNの分け方とは別に、カメラの設定によって変わります。

写真はJPEGかWebP、互換性を優先するならJPEG

写真は非可逆圧縮でも見た目を維持しやすいため、MDNはJPEGとWebPを勧めています。MDNによるとJPEGは開ける環境が広く、WebPはおそらく圧縮率が高いため、両方を用意しないなら互換性を考えてJPEGにするのが無難だとしています。

アイコンや図はSVGか可逆圧縮のPNG

アイコンのような小さい画像は細部が失われないよう可逆圧縮の形式で保存します。図形や線を描く命令で表せるアイコン・図・グラフなら、MDNはSVGを最初に選ぶ形式としています。

SVGはどの大きさで表示しても正確に描画されるため、表示する大きさが変わるWebのアイコンや図に適しています。SVGで表せない図は、PNGなど可逆圧縮の形式で保存します。

文字を含むスクリーンショットはPNGか可逆圧縮のWebP

画面のスクリーンショットは品質を落としたくなければ可逆圧縮の形式で保存します。文字は非可逆圧縮でぼやけやすいため、文字を含む画面ほど可逆圧縮で保存することが重要です。MDNはPNGがおそらく最善だとしたうえで、圧縮率では可逆圧縮のWebPが上回るとしています。

iPhoneは高効率でHEIF、互換性優先でJPEGになる

iPhoneで撮った写真の保存形式はカメラの設定で変わり、「高効率」にすると省スペースのHEIFに、「互換性優先」にするとJPEGになります。また、AppleはHEIFのほうがJPEGより圧縮率が高く、同等の画質になるとしています。

HEIFの写真をJPEGが必要な相手と共有するときは、変換してから送信します。iPhoneには最初からJPEGで撮る設定と、パソコンへ移すときに形式を選ぶ設定もあります。

透過やアニメーションにはPNG・GIF・WebP・AVIF

背景を透明にしたロゴやアニメーションするスタンプに使うことができる形式は、透過とアニメーションへの対応によって変わります。JPEGはアルファチャネル（透明度を記録する情報）に対応しないため、透明な背景を残すことができません。

GIFはトゥルーカラーに対応せず、色は最大256色のパレットから選びます。MDNによると、フルカラーの画像をGIFに変換すると満足のいく仕上がりにならないことがあるとのこと。

透過とアニメーションの両方が必要ならWebPかAVIFが適していて、AVIFをWebページに掲載するときは、対応の広い形式を<picture>要素で代替として含めるようMDNは勧めています。MDNが劣化のないアニメーションに最適とするAPNGも、画質を落とさずにアニメーションさせたいなら適しています。

画像拡張子を変更するなら変換ツールで別形式へ書き出す

別の形式が必要なときは変換ツールで画像を読み込み、目的の形式で保存し直します。また、sakuttoAIの画像一括変換はJPEG・PNG・WebP・GIF・BMPを読み込み、ブラウザ上でJPEG・PNG・WebPのいずれかに変換して保存します。

sakuttoAIの変換ツールで透明な部分のあるPNGをJPEGにすると、JPEGが透過に対応しないためにその部分が背景色で塗られます。画像一括変換では背景色を白・黒・薄いグレーから選ぶことができます。

Windowsでの.heic表示にはHEVCビデオ拡張機能

Windowsで .heic・.hif・.heifの画像を表示するには、MicrosoftのHEIF画像拡張機能に加えてHEVCビデオ拡張機能のパッケージが必要です。また、.avifの画像を表示する場合はMicrosoftがAV1ビデオ拡張機能のパッケージを必要としています。

拡張機能をインストールしない場合は、HEIC変換ツールでJPEGにしてからWindowsで開きます。Windowsで表示できないときの対処法は、拡張機能をインストールするかJPEGへ変換するかです。

画像の形式は拡張子でなく中身と必要な機能で選ぶ

画像の拡張子は形式の名前を表すもので、形式は画像の中身と必要な機能で選びます。つまり、要点は次の4つです。

• 写真の保存はJPEGかWebPにするのが基本で、片方だけ用意するなら互換性の高いJPEGにする
• アイコンや図はSVGか可逆圧縮のPNGにし、文字を含むスクリーンショットはPNGか可逆圧縮のWebPにする
• 透過ならPNG・WebP・AVIF、アニメーションならGIF・WebP・AVIFを使い、GIFは256色までと覚えておく
• 合わない形式の画像は変換ツールで保存し直し、Windowsで .heicを開くにはHEVCビデオ拡張機能をインストールする