次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解

次世代画像形式のWebP、そしてAVIFへ
–変わり続ける技術に対応するweb制作の黄金解–

AVIF（AV1 Image File Format）という画像形式をご存知でしょうか。長い間、ウェブサイトの静止画は大部分がJPEG/GIF/PNGのいずれかでした。その後WebPが普及しましたが、いま注目したい形式がAVIFです。主要ブラウザーでも表示できるようになった一方、従来形式のまま納品・公開されていることも少なくありません。

この記事では、AVIFの特徴や変換方法を中心に解説します。WebPとの比較や、書き出し・ビルドでの変換手順も交えます。

※ この記事の初版は2020年10月の公開ですが、各ブラウザーの対応状況等は2026年7月に最新の内容に更新しています。

ウェブサイトで使いたい形式：WebPとAVIF

ウェブサイトの画像形式は、長いあいだJPEG/GIF/PNGの使い分けが一般的でした。写真はJPEG、ロゴや透過はPNG、アニメーションはGIF、といった使い分けです。

※主要な画像形式にはもうひとつSVGがあります。SVG画像はその他のラスター画像（JPEGやPNG）とは仕組みも利用範囲も大きく異なるので、この記事では扱いません。

いまウェブサイトで使いたいのは、JPEG/GIF/PNGの置き換え先として定着したWebPと、さらにサイズを抑えやすいAVIFです。

WebPはJPEG/GIF/PNGの役割を一形式でカバーできる

WebPを使うと、用途や画像の特徴ごとに分かれていた形式をひとつにまとめやすくなります。主な特徴は次のとおりです。

高い圧縮率：同じ画質品質のJPEGと比較して、ファイルサイズを25〜34%削減（JPEGの置き換え）
不可逆圧縮と透過アニメーションの併用（透過アニメーションでも画質を犠牲にしてサイズを削減できる）（GIF/PNGの置き換え）
画質劣化のない可逆圧縮もサポート（GIF/PNGの置き換え）

WebPの特徴

WebPの圧縮設定や画質比較は、以前の記事『WebP画像を作成できるアプリ「WebP画像を作る君」を公開』で解説しています。ぜひ確認して手元でも試してみてください。

AVIFは同程度の見た目でさらに小さくしやすい

WebPでJPEG/GIF/PNGの多くを1つの形式にまとめられるようになった一方、配信時のファイルサイズをさらに抑えたい場面ではAVIFが有力です。AVIFは全ブラウザー（Chrome・Firefox・Safari・Edgeなど）で対応しています。主な特徴は次のとおりです。

多様な色空間やサンプリング方式をサポート
WebPよりもさらに高画質でコンパクト（同じサイズでも画質が高く、JPEGに特有のブロックノイズも発生しない）
Amazon・Netflix・Google・Microsoft・Mozilla等の幅広い企業によるコンソーシアムが共同で開発（FacebookやAppleも後から参画）

AVIFへの変換は、後述するPhotoshopやffmpegでも行えます。2025年10月にはAVIF v1.2.0が公開されました。以前はOS側でWebPやAVIFをプレビューしづらいこともありましたが、最近のmacOSやWindows 11では状況が改善しています。

なお、次世代の画像形式としてはJPEG XLもあります。ただし、ブラウザー対応やウェブサイトでの採用は、いまのところAVIFやWebPほど進んではいません。

なぜJPEG/PNGのままなのか

ブラウザーが対応していても、JPEGやPNGを使い続けることは珍しくありません。CMSやテンプレートの初期設定が従来形式のままであること、チーム内でAVIFの扱いがまだ決まっていないこと、WebPやAVIFはSafariの対応が遅かったため、いまも様子見が続いていることなどが重なっています。

PNGやJPEGは普段から触れていて取り回しやすく、プレビューや差し替えも簡単です。ウェブサイト制作では公開する画像のファイルサイズがページ表示に直結するので、「書き出し形式」と「配信形式」をわけるのは効果的でしょう。制作フローはJPEGやPNGのままでよく、公開時だけAVIFに変換できます。

AVIFを作るタイミング

AVIFのデータを作るタイミングは大きく分けて3つあります。作るタイミングによって、作業する人やツール、メリットとデメリットが変わってきます。順番に見ていきましょう。

A. デザイン作業の一環としてデザイナーが作成

一番シンプルなのが、素材データの一部としてAVIFやWebP画像を出力してしまうことです。

Adobe Photoshop（2025年6月版以降）ではAVIFの書き出しに対応しています。WebPについても、2022年2月リリースのバージョン23.2から標準で保存できます。どちらも［ファイル］→［コピーを保存］から形式を選べます。「アセットの書き出し」や「Web用に保存」では選べない点には注意が必要です。書き出し形式の違いや手順は、記事『Photoshop画像保存機能まとめ』も参考にしてください。

メインビジュアルのようにサイズと画質を細かく見たい画像は、デザイナーが確認しながらAVIFで書き出すのが向いています。

なお、一度PNG等で出力してから別なツールでWebPやAVIFに一括変換することもできますが、あまりおすすめはしません。 Photoshopを使うメリットは、デザイナーが画質とサイズを確認しながら最適なファイルを作れることです。一括変換するのであれば作業はエンジニアにまかせて、後述の方法で開発フローに組み込んでもらう方が効率的です。

一点一点画像を「別名で保存」していく作業は時間もかかり、間違いも起こりがちです。この方法はトップページのメインビジュアルのような、サイズと画質をきっちりこだわりたい場所で利用するのが良いでしょう。

B. エンジニアがビルド時に生成

大量の画像を機械的に変換するのであれば、エンジニアがビルド等のタイミングで一括変換するのが良いでしょう。

コマンドラインで変換する場合、ffmpegを使うのが汎用的です。以降の例では、libaom-av1とlibwebpエンコーダーを利用できるFFmpegが必要です。利用できるエンコーダーはffmpeg -encodersコマンドで確認してください。AVIFへの変換例は次のとおりです。

ffmpeg  -i  元ファイル.png  -c:v libaom-av1  -still-picture 1  出力ファイル.avif

WebPへの変換も同様です。-c:v libwebpを指定して変換します。

ffmpeg  -i  元ファイル.png  -c:v libwebp  出力ファイル.webp

圧縮率等の設定を変えることもできます。オプションの意味と設定できる値の範囲はffmpeg公式ドキュメントの9.10 libwebpの項を参照してください。

ffmpeg  -i  元ファイル.png  -c:v libwebp  -quality 70  -preset photo  出力ファイル.webp

また、最近のウェブ開発ではVite（ヴィート）を使ってビルドプロセスを構成しているケースも多いでしょう。Vite自体については記事『Vite入門』で解説しています。画像の変換や圧縮を行うライブラリはnpmから多数提供されているため、それらを使うと簡単にビルド時にAVIFやWebPを生成できます。次の例はJPEG/PNGからAVIFとWebPを生成するvite.config.jsの例です。ここでは2種類の形式を例示しますが、プロジェクトによってはどちらかの形式のみにしていただいて問題ありません。

▼ vite.config.js

import { defineConfig } from "vite";
import { generateFormats } from "./plugins/generate-formats.js";

export default defineConfig({
  plugins: [
    generateFormats({
      srcDir: "public/img",
      webp: { quality: 80 },
      avif: { quality: 50 },
    }),
  ],
});

▼ plugins/generate-formats.js（抜粋）

import { readdirSync, readFileSync, writeFileSync, mkdirSync } from "node:fs";
import { join, parse } from "node:path";
import sharp from "sharp";

export function generateFormats(options = {}) {
  const { srcDir = "public/img", webp = { quality: 80 }, avif = { quality: 50 } } = options;

  return {
    name: "generate-formats",
    apply: "build",
    async closeBundle() {
      const inputDir = join(process.cwd(), srcDir);
      const outputDir = join(process.cwd(), "dist", "img");
      mkdirSync(outputDir, { recursive: true });

      const files = readdirSync(inputDir).filter((file) => /\.(jpe?g|png)$/i.test(file));

      await Promise.all(
        files.map(async (file) => {
          const inputPath = join(inputDir, file);
          const { name } = parse(file);
          const buffer = readFileSync(inputPath);

          writeFileSync(join(outputDir, file), buffer);
          await sharp(buffer).webp(webp).toFile(join(outputDir, `${name}.webp`));
          await sharp(buffer).avif(avif).toFile(join(outputDir, `${name}.avif`));
        }),
      );
    },
  };
}

コードを確認する

この方法は大量の画像を一括処理できますが、すべての画像に同じqualityなどの設定が適用されます。WebPとAVIFではqualityの基準が違うため、変換後は実際の画像を確認しながら調整しましょう。

AVIFはエンコードに時間がかかりやすい点にも注意が必要です。大量の画像を変換するときは、エンコードが速いWebPの方が向いている場合もあります。

可能ならPNGや高品質な元データから変換しましょう。ロゴやイラストの場合はPNG、写真の場合は高画質のJPEG等、できるだけ元データに近い画像を使うのが望ましいです。JPEGしかない場合でも変換自体は可能ですが、異なる方式で圧縮を繰り返すと世代劣化が生じやすいため、変換後の画質とファイルサイズを確認して採否を判断してください。

C. サーバーでオンデマンドに生成

Bの方法はフロントエンジニアには手軽で確実な方法ですが、あくまでビルド時の変換なので、動的に追加される画像には対応できません。ユーザーがアップロードした画像や、CMSを使って公開後に追加・変更される画像もAVIFに変換したい場合、サーバーサイドの処理が必要になります。

Cloudflare Imagesのような画像配信サービスを使う方法が現実的です。URLパラメーターで形式・サイズ・品質を指定でき、AVIFへの自動変換とCDNキャッシュをまとめて扱えます。

画像変換は決して軽い処理ではないので、一度変換した画像はキャッシュから返せるようにする必要があります。自前で構築する場合はCache-Controlヘッダーの設定に加え、CDNやキャッシュサーバーの追加も検討しましょう。自前構築ではクラウドの利用コストや障害時の対応など、考慮しなくてはいけないことが大きく増えます。その一方で、画像形式や画質の調整など、公開後の運用の自由度が上がるメリットもあります。

一般にはウェブサイトの規模が大きくなり、動的なコンテンツが増えるほど、サーバーサイドの対応が必要になります。どの時点でこの方法を採用するかは、チームのスキルや運用の負担、コストなども考慮して決めるのが良いでしょう。