AVIF画像形式ガイド：使うべき場面とPNGに変換すべき場面

AVIFは、現代のWeb画像配信で有力な形式です。写真を小さく保ちながら見た目の品質を維持しやすく、透過や高いビット深度にも対応できます。画像が多いWebサイト、商品一覧、モバイル向けページでは大きな効果があります。

ただし、AVIFはすべての場面で便利な形式ではありません。資料作成、CMSへのアップロード、デザインデータの受け渡し、古い画像ビューアー、Office文書などでは、PNGやJPEGの方が扱いやすいことがあります。

つまりAVIFは、主にWeb配信用の形式として考えると分かりやすいです。相手に渡すファイルや文書に入れる画像では、PNG版を用意した方が安全な場面があります。

AVIFとは#

AVIFは AV1 Image File Format の略です。AV1動画圧縮技術をもとにした画像形式で、静止画を効率よく圧縮できます。

特徴をまとめると次の通りです。

• 写真系の画像を小さくしやすい
• 透過を扱える
• 高ビット深度に対応できる
• 現在の主要ブラウザでは広く対応している
• Web配信には向いている
• 古いアプリや文書ツールでは扱いにくいことがある

AVIFは「表示を軽くするための形式」としては優秀ですが、「どこでも開ける受け渡し形式」としてはPNGほど無難ではありません。

AVIFが向いている場面#

AVIFが力を発揮するのは、画像ファイルサイズがページ体験に直結する場面です。

向いている例：

• 写真が多いブログやメディアサイト
• 商品一覧やギャラリー
• モバイルユーザーが多いページ
• ヒーロー画像や大きめの写真
• PNGでは重すぎる透過装飾画像
• CDNやビルド処理で複数形式を自動生成できるサイト

たとえば商品一覧で画像が30枚ある場合、1枚ずつのサイズ削減がページ全体の軽さにつながります。LCPや総転送量にも影響します。

また、空、影、グラデーションのようななめらかな表現では、高ビット深度のメリットが出ることがあります。

AVIFが向かない場面#

AVIFはブラウザでは使いやすくなっていますが、ブラウザ以外の環境ではまだ注意が必要です。

困りやすい場面：

• CMSのアップロード欄がAVIFを受け付けない
• 画像ビューアーでプレビューできない
• 古いPhotoshopや編集ソフトで開けない
• PowerPoint、Word、Keynoteで扱いづらい
• SNSやチャットアプリで再圧縮・拒否される
• 取引先やチームメンバーがPNGを指定している
• 透過PNG素材として渡す必要がある

こうした場面では、PNGがまだ強いです。PNGはファイルサイズが大きくなりやすい一方で、透過、シャープなエッジ、文書やアプリでの互換性に優れています。

AVIFとPNGの違い#

AVIFとPNGは競合というより、役割が違う形式です。

Webページで配信する写真ならAVIFが有利なことがあります。資料に貼る画像、透過ロゴ、スクリーンショット、編集用の中間ファイルならPNGの方が安心です。

AVIFをPNGに変換すると何が変わるか#

AVIFをPNGに変換しても、元画像以上に細部が増えるわけではありません。変わるのは主に互換性と圧縮方式です。

変換後に起きること：

• 開けるアプリが増える
• ファイルサイズは大きくなりやすい
• 透過は維持できる場合がある
• AVIFで失われた細部は戻らない
• 編集や文書挿入はしやすくなる

AVIFからPNGへの変換は、画質を上げるためではなく、使える場所を増やすために行うものです。

PNGに変換すべき場面#

次のような場合はPNG変換が向いています。

1. PowerPoint、Word、Keynoteに挿入したい。
2. CMSやアップロード先がAVIFを受け付けない。
3. 透過背景の画像素材として渡したい。
4. 画像編集ソフトで扱いたい。
5. 古いビューアーや業務ソフトで開けない。
6. AVIFに詳しくない相手へファイルを渡す。

このような場合は、AVIF to PNG コンバーターを使うと、ブラウザ内でPNGに変換できます。画像はサーバーにアップロードされません。

PNGに変換しない方がよい場面#

AVIFを何でもPNGにする必要はありません。

避けた方がよい例：

• Webサイトで表示するだけ
• ファイルサイズを小さく保ちたい
• CDNがAVIF/WebP/JPEGを自動配信している
• 大きな写真で透過が不要
• PNGにしてから再びWebへアップロードする

大きな写真をPNGにすると、ファイルサイズが何倍にも増えることがあります。最終的な用途がWeb表示なら、AVIFを残し、必要に応じてWebPやJPEGのフォールバックを用意する方が自然です。

Webでのおすすめ実装#

公開サイトでは、AVIFを単独で使うより、フォールバック付きで使うのが安全です。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="商品写真" loading="lazy">
</picture>

ブラウザは対応している最初の形式を選びます。AVIF対応ブラウザではAVIF、そうでなければWebPやJPEGを表示します。

透過画像では、最後のフォールバックをPNGにすることもあります。

<picture>
  <source srcset="badge.avif" type="image/avif">
  <source srcset="badge.webp" type="image/webp">
  <img src="badge.png" alt="バッジ画像">
</picture>

判断チェックリスト#

AVIFを使う前に、次を確認しましょう。

• 主な用途はWeb表示か
• フォールバック形式を用意できるか
• 透過が必要か
• ほかの人が編集・アップロードするか
• 文書やスライドに挿入するか
• ファイルサイズと互換性のどちらを優先するか

Web表示が主目的ならAVIFは良い選択です。文書、編集、アップロード、受け渡しが主目的ならPNG版を用意しましょう。

まとめ#

AVIFは、Web画像を軽くするための強力な形式です。ただし、すべての画像をAVIFだけで管理するのは現実的ではありません。Web配信用にはAVIF、文書や編集、受け渡し用にはPNGという使い分けが安定します。

AVIFが開けない、アップロードできない、資料に入れたい、透過PNGとして渡したい。そういう場面ではPNGに変換し、元のAVIFはWeb最適化用として残しておくのがよい運用です。