WordPressでAVIF画像を使うとサイト表示速度はどれだけ速くなるのか

Webサイトの表示速度を改善する上で、画像の最適化は非常に重要です。実際、多くのWebページでは画像がページサイズの大半を占めています。

近年注目されているのが、次世代画像フォーマット「AVIF」です。WordPressではWordPress 6.5(2024年3月)からAVIF画像のサポートが正式に追加されました。

AVIFはJPEGやPNGよりも高い圧縮効率を持ち、同じ画質でもファイルサイズを大幅に削減できる可能性があります。その結果、ページ読み込み速度の改善やCore Web Vitalsのスコア向上につながります。

AVIFはJPEGと比較して30〜50%ほどファイルサイズを削減できるケースがあります。

さらに、PNGなどの非圧縮画像では大きな改善が見られる場合もあります。実際に私の環境でテストしたところ、116KBのPNG画像が約20KBのAVIFに圧縮されるケースも確認できました。これは約80%以上の軽量化に相当します。

この記事では、AVIFとは何か、WordPressでの対応状況、導入方法、そして実際にどのようなメリットがあるのかを詳しく解説します。

AVIF画像フォーマットとは

AVIF（AV1 Image File Format）は、動画コーデック「AV1」をベースにした次世代の画像フォーマットです。Alliance for Open Media（AOM）によって開発され、高い圧縮効率と画質を両立しているのが特徴です。

JPEGより30〜50%小さいファイルサイズ
高い画質維持
透過画像（アルファチャンネル）対応
HDR対応
アニメーション対応

特に写真やグラデーションの多い画像では、JPEGよりも高い圧縮効率を発揮します。

AVIF・WebP・JPEGの違い

形式	圧縮率	透過	アニメーション	ブラウザ対応
AVIF	非常に高い	対応	対応	主要ブラウザ対応
WebP	高い	対応	対応	ほぼ完全対応
JPEG	標準	なし	なし	完全対応
PNG	低い	対応	なし	完全対応

現在のブラウザではChrome、Firefox、Edge、Safariなど主要ブラウザがAVIFに対応しており、Webサイトでも実用的に利用できる環境が整っています。

WordPressでのAVIF対応（WordPress 6.5）

WordPress 6.5から、AVIF画像の基本的なサポートが追加されました。

主な機能は次の通りです。

AVIF画像のアップロード
AVIF画像からサムネイル生成
画像のトリミング・回転など基本編集

ただし、WordPressのコア機能ではJPEGやPNGを自動でAVIFに変換する機能はありません。そのため、既存画像のAVIF変換には画像最適化プラグインや外部ツールを利用することになります。

AVIFを利用するためのサーバー条件

WordPressでAVIFを扱うためには、サーバーの画像処理ライブラリがAVIFに対応している必要があります。

GDライブラリ（AVIF対応）
ImageMagick（AVIF対応）

これらはレンタルサーバーやマネージドWordPress環境では既に対応していることが多くなっています。

AVIFがサイト速度を改善する理由

ページサイズの削減

AVIFはJPEGと比較して30〜50%ほどファイルサイズを削減できるケースがあります。

特に写真が多いブログやECサイトでは、ページ全体の容量を大きく削減でき、読み込み速度が改善します。

Core Web Vitalsの改善

画像最適化はGoogleの重要な指標であるCore Web Vitalsの改善にもつながります。

LCP（Largest Contentful Paint）の改善
INP（Interaction to Next Paint）の改善
ページ表示の高速化

画像の読み込みが速くなることで、ユーザー体験の向上とSEO評価の改善が期待できます。

WordPressでAVIFを使う方法

1 AVIF画像を作成してアップロード

もっともシンプルな方法は、AVIF形式の画像を作成してWordPressにアップロードする方法です。

AVIF変換には次のツールが利用できます。

Squoosh（Googleの画像変換ツール）
Photoshop（プラグイン利用）
ImageMagick（本記事の実験でも使用）

2 画像最適化プラグインを利用

既存の画像を自動的に最適化したい場合は、画像最適化プラグインを利用する方法があります。

ShortPixel
Imagify
EWWW Image Optimizer
Optimole

これらのプラグインはJPEGやPNGをAVIFやWebPに変換し、ブラウザに応じて最適な画像形式を配信できます。

ただし、私の運用では画像最適化プラグインは使用せず、ローカル環境で画像を変換してからアップロードしています。

理由としては次のような点があります。

変換後の画質やサイズを事前に確認できる
サーバー側のCPU負荷を増やさない
CDNやキャッシュとの挙動をシンプルに保てる

また、制作段階で画像を最適化しておくことで、本番サーバーの処理をシンプルに保てるというメリットもあります。

3 CDNによる自動AVIF変換

最近ではCDNによる画像最適化も一般的です。

例えば次のサービスでは、元画像がJPEGでも自動的にAVIF配信できます。

Cloudflare
Bunny CDN
Fastly

この方法ではサイト側の画像を変更する必要がなく、最も手軽にAVIFを導入できます。

AVIF導入時の注意点

エンコード時間が長い

AVIFは圧縮効率が高い反面、画像生成に時間がかかる傾向があります。大量の画像を一度に変換する場合はサーバー負荷に注意が必要です。

画質設定

AVIFでは品質設定によってファイルサイズが大きく変わります。一般的には品質50〜70程度が実用的な設定とされています。

まとめ

AVIFは現在もっとも高い圧縮効率を持つ画像フォーマットの一つであり、WordPressサイトの表示速度改善に大きく貢献します。

JPEGより30〜50%軽量化
PNGでは大幅なサイズ削減が期待できる
Core Web Vitals改善
モバイル表示速度の向上
SEOにも好影響

WordPress 6.5以降ではAVIF画像のアップロードが可能になり、サイト高速化の選択肢が広がりました。画像最適化プラグインやCDNと組み合わせることで、さらに高いパフォーマンス改善が期待できます。

サイトの表示速度改善は、ユーザー体験やSEO評価に直結します。AVIF画像の導入を検討してみてはいかがでしょうか。

おまけ：Mac / Linuxで画像を一括変換する簡単スクリプト

当社では現在、サイトに掲載する画像の多くをWebPで運用しています。Mac上でシェルスクリプトを用意し、画像を一括リサイズしてWebPに変換 → WordPressへアップロード、というワークフローです。

WebPはすでに多くのブラウザでサポートされていますが、近年はAVIFに対応するブラウザも増えてきました。そのため、将来的にはAVIF形式への移行も検討しています。

参考までに、当社で使用しているWebP変換とAVIF変換のシェルスクリプトを掲載します。どちらもImageMagick（magick）で動作するため、必要なツールは基本的にImageMagickのみです（macOSのsipsは標準搭載）。

ImageMagickが未導入の場合は、以下でインストールできます。

macOS（Homebrew）：brew install imagemagick
Ubuntu / Debian：sudo apt update && sudo apt install -y imagemagick

MacやLinuxを使っている方で「自分の環境でも使えそう」と思われた場合は、自己責任の範囲で試してください。

WebPへ変換するスクリプト

#!/usr/bin/env bash
set -Eeuo pipefail

unset MAGICK_CODER_MODULE_PATH
unset MAGICK_HOME
unset MAGICK_CONFIGURE_PATH

MAX_WIDTH=1500
OUT_DIR="output_webp"
QUALITY=50

mkdir -p "$OUT_DIR"

command -v sips >/dev/null 2>&1 || { echo "sips が見つかりません" >&2; exit 1; }
command -v magick >/dev/null 2>&1 || { echo "magick が見つかりません" >&2; exit 1; }
command -v uuidgen >/dev/null 2>&1 || { echo "uuidgen が見つかりません" >&2; exit 1; }

while IFS= read -r -d '' file; do
  rand=$(uuidgen | tr -d '-' | cut -c1-6)
  base="$(date +%Y%m%d)-$rand"
  out="$OUT_DIR/${base}.webp"

  tmp_base="$(mktemp "${TMPDIR:-/tmp}/resized.XXXXXX")"
  tmp_png="${tmp_base}.png"

  cleanup() {
    rm -f "$tmp_png"
  }
  trap cleanup RETURN

  sips -s format png --resampleWidth "$MAX_WIDTH" "$file" --out "$tmp_png" >/dev/null
  magick "$tmp_png" -quality "$QUALITY" "$out" >/dev/null

  echo "$file -> $out"
done < <(
  find . -maxdepth 1 -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -print0
)

#!/usr/bin/env bash

set -Eeuo pipefail

unset MAGICK_CODER_MODULE_PATH

unset MAGICK_HOME

unset MAGICK_CONFIGURE_PATH

MAX_WIDTH=1500

OUT_DIR="output_webp"

QUALITY=50

mkdir -p "$OUT_DIR"

command -v sips >/dev/null 2>&1 || { echo "sips が見つかりません" >&2; exit 1; }

command -v magick >/dev/null 2>&1 || { echo "magick が見つかりません" >&2; exit 1; }

command -v uuidgen >/dev/null 2>&1 || { echo "uuidgen が見つかりません" >&2; exit 1; }

while IFS= read -r -d '' file; do

rand=$(uuidgen | tr -d '-' | cut -c1-6)

base="$(date +%Y%m%d)-$rand"

out="$OUT_DIR/${base}.webp"

tmp_base="$(mktemp "${TMPDIR:-/tmp}/resized.XXXXXX")"

tmp_png="${tmp_base}.png"

cleanup() {

rm -f "$tmp_png"

}

trap cleanup RETURN

sips -s format png --resampleWidth "$MAX_WIDTH" "$file" --out "$tmp_png" >/dev/null

magick "$tmp_png" -quality "$QUALITY" "$out" >/dev/null

echo "$file -> $out"

done < <(

find . -maxdepth 1 -type f $ -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" $ -print0

)

AVIFへ変換するスクリプト

#!/usr/bin/env bash
set -Eeuo pipefail

unset MAGICK_CODER_MODULE_PATH
unset MAGICK_HOME
unset MAGICK_CONFIGURE_PATH

MAX_WIDTH=1500
OUT_DIR="output_avif"
QUALITY=50

mkdir -p "$OUT_DIR"

command -v sips >/dev/null 2>&1 || { echo "sips が見つかりません" >&2; exit 1; }
command -v magick >/dev/null 2>&1 || { echo "magick が見つかりません" >&2; exit 1; }
command -v uuidgen >/dev/null 2>&1 || { echo "uuidgen が見つかりません" >&2; exit 1; }

while IFS= read -r -d '' file; do
  rand=$(uuidgen | tr -d '-' | cut -c1-6)
  base="$(date +%Y%m%d)-$rand"
  out="$OUT_DIR/${base}.avif"

  tmp_base="$(mktemp "${TMPDIR:-/tmp}/resized.XXXXXX")"
  tmp_png="${tmp_base}.png"

  cleanup() {
    rm -f "$tmp_png"
  }
  trap cleanup RETURN

  sips -s format png --resampleWidth "$MAX_WIDTH" "$file" --out "$tmp_png" >/dev/null
  magick "$tmp_png" -quality "$QUALITY" "$out" >/dev/null

  echo "$file -> $out"
done < <(
  find . -maxdepth 1 -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -print0
)

#!/usr/bin/env bash

set -Eeuo pipefail

unset MAGICK_CODER_MODULE_PATH

unset MAGICK_HOME

unset MAGICK_CONFIGURE_PATH

MAX_WIDTH=1500

OUT_DIR="output_avif"

QUALITY=50

mkdir -p "$OUT_DIR"

command -v sips >/dev/null 2>&1 || { echo "sips が見つかりません" >&2; exit 1; }

command -v magick >/dev/null 2>&1 || { echo "magick が見つかりません" >&2; exit 1; }

command -v uuidgen >/dev/null 2>&1 || { echo "uuidgen が見つかりません" >&2; exit 1; }

while IFS= read -r -d '' file; do

rand=$(uuidgen | tr -d '-' | cut -c1-6)

base="$(date +%Y%m%d)-$rand"

out="$OUT_DIR/${base}.avif"

tmp_base="$(mktemp "${TMPDIR:-/tmp}/resized.XXXXXX")"

tmp_png="${tmp_base}.png"

cleanup() {

rm -f "$tmp_png"

}

trap cleanup RETURN

sips -s format png --resampleWidth "$MAX_WIDTH" "$file" --out "$tmp_png" >/dev/null

magick "$tmp_png" -quality "$QUALITY" "$out" >/dev/null

echo "$file -> $out"

done < <(

find . -maxdepth 1 -type f $ -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" $ -print0

)

実行例

スクリプトと同じディレクトリに、変換したい画像ファイルを配置してコマンドを実行します。

yabea@edel image % chmod +x avif.sh   # 初回のみ実行権限を付与
yabea@edel image % ./avif.sh
./screenshot 2026-03-05 19.15.02.png -> output_avif/20260305-F3A76A.avif
./screenshot 2026-03-05 13.46.49.png -> output_avif/20260305-F09AA3.avif
./screenshot 2026-03-05 19.03.27.png -> output_avif/20260305-E4577D.avif
./screenshot 2026-03-05 19.12.06.png -> output_avif/20260305-54153E.avif

yabea@edel image % chmod +x avif.sh # 初回のみ実行権限を付与

yabea@edel image % ./avif.sh

./screenshot 2026-03-05 19.15.02.png -> output_avif/20260305-F3A76A.avif

./screenshot 2026-03-05 13.46.49.png -> output_avif/20260305-F09AA3.avif

./screenshot 2026-03-05 19.03.27.png -> output_avif/20260305-E4577D.avif

./screenshot 2026-03-05 19.12.06.png -> output_avif/20260305-54153E.avif

実測：WebPとAVIFのファイルサイズ比較（4枚）

同一画像を同じワークフローで変換し、WebPとAVIFのファイルサイズを比較しました（Finder表示のKBは丸めのため概算）。

No.	WebP（KB）	AVIF（KB）	削減（KB）	AVIFは何％小さい
1	30	19	-11	36.7%
2	62	41	-21	33.9%
3	22	10	-12	54.5%
4	48	25	-23	47.9%
合計	162	95	-67	41.4%

この4枚では、AVIFがWebPより合計で約41%小さくなりました。画像の種類（写真/スクショ/イラスト）や画質設定によって差は変動しますが、AVIFは「同等画質でさらに軽量化」できるケースが多い傾向があります。

WordPressの画像最適化をさらに進めたい場合は、SVGファイルのアップロードを許可する方法についても解説していますので、こちらの記事も参考にしてみてください。

JPEGより50%軽い？WordPress 6.5から使えるAVIFでLCPスコアを爆上げしよう