画像形式の基礎：圧縮、透過、フォールバック配信

画像形式の失敗は、拡張子だけを見て決めたときに起きがちです。本来は、元データが何か、透過が必要か、後で編集するか、Webだけで使うのか、対応していない環境では何にフォールバックするのか、という流れで判断する方が安定します。

この記事では、PNG、JPEG、WebP、AVIFを技術的な仕組みから整理します。すぐに形式を選びたい場合は、実務向けの PNG/JPG/WebP/AVIFの選び方ガイド を参照してください。ここでは、圧縮方式、アルファ透過、レスポンシブ配信、SVGからの書き出しまで一段深く扱います。

拡張子ではなく、画像の流れから考える#

形式を決める前に、次の5点を確認します。

1. 元データはSVG、スクリーンショット、UI画像、写真、生成画像のどれか。
2. 透明ピクセルが必要か。
3. 後で編集するのか、文書に貼るのか、Webで表示するだけなのか。
4. サイト側で複数形式を生成できるか。
5. 古いブラウザ、CMS、メールクライアント、デスクトップアプリで使えない場合の代替形式は何か。

同じ画像でも、用途によって複数の形式が必要になることがあります。ロゴはWebヘッダーではSVGのまま使い、資料配布用にはPNGにし、大きな装飾画像として配信する場合だけWebPやAVIFを検討する。商品写真は高品質の元画像を残し、WebではAVIF/WebP、外部サービスではJPEGを使う。このように考えると判断しやすくなります。

可逆圧縮と非可逆圧縮が基本の分かれ目#

画像形式の重要な違いは、「新しいか古いか」ではなく、可逆圧縮か非可逆圧縮かです。

可逆圧縮は、ピクセル情報を復元できる形で保存します。Webでよく使われる例がPNGです。アイコン、スクリーンショット、UIキャプチャ、図解、技術図、文字入り画像のように、エッジの正確さが重要な場面に向いています。

非可逆圧縮は、人間の目で気づきにくい情報を捨てて小さくします。JPEG、有損WebP、有損AVIFが代表例です。写真、自然なグラデーション、複雑な質感のように、完全なピクセル一致よりファイルサイズが重要な画像に向いています。

内容と圧縮方式が合わないと問題が起きます。

また、繰り返し変換にも注意が必要です。JPEGを何度も保存すると劣化が積み重なります。AVIFをPNGに変換すると互換性は上がりますが、AVIF側で失われた細部が戻るわけではありません。

透過が必要なら候補は変わる#

透過は小さな機能ではありません。形式選びを大きく変えます。

JPEGはアルファ透過に対応していません。透明なSVGやPNGをJPEGに変換する場合、透明部分は何らかの背景色で塗りつぶされます。白背景の商品画像なら問題ないこともありますが、明るい背景と暗い背景の両方で使うアイコンやロゴでは不向きです。

PNG、WebP、AVIFは透過を扱えます。ただし実務上の扱いやすさは同じではありません。

白フチやにじみにも注意します。透明画像が変換前に白背景へ合成されていると、暗い背景に置いたときにフチが見えることがあります。ロゴ、アイコン、バッジは、可能なら元のSVGまたは透明PNGを残しておきましょう。

各形式の役割#

安定した画像運用では、各形式の役割を分けます。

PNG は、精度と互換性を優先する形式です。スクリーンショット、UI画像、透過素材、文字入り画像に向いています。大きな写真には重くなりやすいため、無劣化保存が必要な場合以外は避けます。

JPEG は、写真用の安全なベースラインです。ブラウザ、CMS、メール、SNS、文書ソフトなどで広く扱えます。透過はできず、UIや文字のシャープな線には向きません。

WebP は、現代のWeb配信用として実用的です。有損、可逆、透過、アニメーションに対応できます。主要ブラウザでは広く使えますが、ブラウザ外ではPNGやJPEGの方が無難な場面があります。

AVIF は、Webパフォーマンス面で強い形式です。写真や高解像度画像で特に有効で、透過や高ビット深度にも対応できます。ただし、フォールバックを用意した方が安全で、CMSや文書ツールでは受け付けないことがあります。詳しくは AVIF画像形式ガイド を参照してください。

picture要素で形式をフォールバックする#

公開サイトでは、すべてのユーザーに同じ形式を強制する必要はありません。ブラウザが対応している形式を選べるようにします。

写真の場合：

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <source srcset="/images/product.webp" type="image/webp">
  <img
    src="/images/product.jpg"
    alt="白いテーブル上の木製デスクオーガナイザー"
    width="1200"
    height="800"
    loading="lazy"
  >
</picture>

透過画像の場合：

<picture>
  <source srcset="/images/badge.avif" type="image/avif">
  <source srcset="/images/badge.webp" type="image/webp">
  <img
    src="/images/badge.png"
    alt="セキュリティ認証バッジ"
    width="320"
    height="160"
  >
</picture>

順序は重要です。より効率のよい形式を先に置き、対応していない環境では互換性の高い形式へ戻します。ブラウザは選ばれた候補だけをダウンロードします。

形式だけでなく、寸法も最適化する#

AVIFやWebPを使っていても、必要以上に大きい画像を配信していれば最適化とは言えません。モバイルで390px幅に表示する画像に2400px幅を送ると、形式が新しくても無駄が残ります。

表示幅が変わる画像では、srcset と sizes を使います。

<picture>
  <source
    type="image/avif"
    srcset="/hero-640.avif 640w, /hero-1280.avif 1280w, /hero-1920.avif 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <source
    type="image/webp"
    srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
  >
  <img
    src="/hero-1280.jpg"
    srcset="/hero-640.jpg 640w, /hero-1280.jpg 1280w, /hero-1920.jpg 1920w"
    sizes="(max-width: 768px) 100vw, 1200px"
    alt="書き出した画像素材が並ぶデザイン作業スペース"
    width="1280"
    height="720"
  >
</picture>

これにより、「形式は新しいのに、ピクセルを送りすぎている」という状態を避けられます。

SVGを書き出すときは寸法を先に決める#

SVGはベクター形式です。PNG、JPEG、WebP、AVIFはラスター形式です。SVGをラスターに変換するときは、その時点でピクセルが作られるため、出力寸法を先に決める必要があります。

実務上のルール：

• アイコンやロゴで透過と互換性が必要ならPNGに書き出す。
• 実際の表示サイズ、または高密度画面向けに2倍・3倍で書き出す。
• 写真に近い内容で透過が不要な場合だけJPEGを検討する。
• WebP/AVIFはWeb配信用として使い、フォールバックを確認する。
• 編集用の元SVGは残しておく。

SVGからPNGにしたらぼやける、余白がずれる、透明背景が消える、といった問題は、SVGをPNGに変換するとぼやける理由 と 一括SVG変換のサイズ・余白・透明背景ルール で詳しく扱っています。

メタデータ、色、再圧縮#

画像ファイルには、カメラ情報、カラープロファイル、著作権情報、サムネイルなどのメタデータが含まれることがあります。最適化ツールはサイズ削減のためにこれらを削除する場合があります。通常のWeb画像なら問題になりにくいですが、写真作品、印刷用データ、アーカイブ用途では注意が必要です。

色が変わって見える場合は、元画像のカラープロファイルと、変換ツールがそれを保持したかどうかを確認します。Web配信では、特別な広色域管理をしない限り、一貫したsRGB出力にそろえる方が扱いやすいです。

Web用に圧縮した画像だけを唯一のマスターにしないことも大切です。安定した運用では、次を分けて残します。

• 元データまたは編集可能なファイル
• 必要に応じた高品質の中間ファイル
• Web配信用の出力
• 互換性のためのフォールバック形式

実務で使いやすい画像パイプライン#

信頼できる画像ワークフローは、次のようになります。

1. 元データを残す：SVG、デザインファイル、RAW写真、高品質ラスターなど。
2. Web出力を作る：現代ブラウザ向けにAVIFとWebP。
3. フォールバックを作る：写真ならJPEG、透過ならPNG。
4. 寸法、width、height、alt、loading、レスポンシブなsizesを設定する。
5. 書き出しファイル単体ではなく、実際のページ表示を確認する。
6. 受け渡し用ファイルとWeb配信用ファイルを分ける。

「一度保存して終わり」より手間はかかります。しかし、ぼやけたアイコン、重いページ、消えた透過、CMSでのアップロード拒否、古い環境での表示失敗を避けやすくなります。

公開前チェックリスト#

画像を公開する前に確認します。

• 形式が画像内容に合っている。
• 透過が保持されている、または意図して背景色を合成している。
• 出力寸法が表示サイズに対して大きすぎない。
• モダン形式には安全なフォールバックがある。
• 文字やロゴを低品質JPEGにしていない。
• Web画像に alt、width、height がある。
• 後で編集できる元データを残している。

最適な画像形式は、ひとつの拡張子ではありません。用途に対して十分にきれいで、十分に軽く、十分に互換性があり、後から直せる元データから生成された出力です。