画像フォーマットの使い分け表——JPEG・PNG・WebP・AVIF・SVGを用途で比べる

画像形式は、容量の小ささだけで選ぶより、先に「写真か図か」「透過は要るか」「元データをどの形式で持つか」を決めると迷いが減ります。私はカンプの書き出しから実装までを一人で往復してきたので、形式の迷いはデザインと実装の間の手戻りになりやすいと感じています。

表示速度の計測や改善の流れは以前の記事で書いたので、今回は形式の選び方だけを扱います。

5形式を並べた使い分け表

MDNの画像形式ガイドをもとに、案件で確認する項目に絞ると次のようになります。「気をつけること」の一部は私の整理です。

形式	圧縮	透過	向く用途	気をつけること
JPEG	非可逆	なし	写真	図や細い線では輪郭が乱れることがある
PNG	可逆	あり	正確に再現したい画像、透過が必要な画像	WebPやAVIFと比べると容量で不利になりやすい
WebP	可逆・非可逆	あり	写真、透過つきの画像、簡単なアニメーション	編集用の元データは別に残しておく
AVIF	可逆・非可逆	あり	写真、アニメーション	段階的な表示に対応しない。変換に時間がかかりやすい
SVG	ベクター	背景なしで描ける	アイコン、ロゴ、図解	写真には向かない

SVGだけは仕組みが違います。MDNの説明のとおりXMLで図形を記述する形式で、表示サイズが変わっても滑らかに拡大縮小されます。

容量の差は、出典つきで目安として読む

「どれくらい軽くなるのか」と聞かれたら、出典と条件をつけて伝えるのが安全です。

• Googleの資料では、WebPの可逆圧縮はPNGより26%小さく、非可逆圧縮は同等のSSIM品質でJPEGより25〜34%小さいとされています
• Next.jsのドキュメントでは、AVIFはWebPより20%ほど小さくなる一方、変換に50%ほど長くかかると説明されています

どちらも資料が示す一般的な数字で、手元の画像で同じ差が出るとは限りません。ロゴの入った写真、細かい文字を含む図など、案件の代表的な画像を数枚変換して見比べるほうが、説明の材料として確かです。

対応状況と、古い環境への逃がし方

Can I Useの2026年9月時点のデータでは、世界の利用環境のうちAVIFは約96%、WebPは約97%が対応しています。割合は高いものの、Internet Explorerなど対応しない環境は残っています。MDNもAVIFについては、WebP・JPEG・PNGの代替を<picture>で用意するよう案内しています。

書き方は<picture>要素で次のようになります。

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="店内の写真" />
</picture>

ブラウザは対応していないtypeの<source>を読み飛ばし、どれも合わなければ<img>の画像を使います。後ろに置く<img>が最後の受け皿です。

SVGには配置の注意もあります。MDNによると、<img>などの画像として読み込むと、ブラウザによってはJavaScriptの無効化や外部リソースの読み込み制限がかかります。外部ファイルを参照するSVGは、<img>で読み込むと表示が変わる場合があると覚えておくと、原因を探しやすくなります。

このサイトで決めていること

このポートフォリオでは、作品画像の元データをほぼJPEGで置き、Next.jsのImageコンポーネントで配信しています。既定の設定はWebPで、ブラウザが送るAcceptヘッダーを見て出力形式を決めます。AVIFも追加できますが、同じドキュメントには形式ごとに別々にキャッシュされるため保存容量が増えるとあります。このサイトは今のところ既定のままです。

例外がプロフィール画像です。1ドットが1pxの2色ディザ画像なので、最適化で縮小やぼかしが入らないよう、PNGのままunoptimizedで配信しています。「軽さより、ドットが崩れないことを優先する」という判断は、形式を一律で決めていると出てきません。

案件で最初に決めるのは、次の3つです。

1. 元データの形式と置き場所：配信用に変換した画像だけが残ると、差し替えのたびに画質が落ちていきます
2. 配信形式を誰が作るか：フレームワークや画像配信サービスが変換するのか、人が書き出すのか
3. 更新担当者が触れる形式：CMSから写真を入れる人がいるなら、入稿してよい形式とサイズを手順に書きます

明日から試せる一手

いま担当しているサイトのトップページで、表示されている画像を10枚だけ書き出してみてください。ブラウザの開発者ツールのNetworkタブで「Img」に絞れば、形式と容量が並びます。図なのにJPEG、写真なのにPNGといった組み合わせがあれば、そこが最初の見直し候補です。全画像の一括変換を始める前に、まず代表的な1枚を変換して見比べると、どの形式に揃えるかの判断材料になります。