WordPress 6.5のAVIF画像フォーマットサポートでサイト表示速度を高速化

WordPress 6.5で実現したAVIF画像フォーマットサポートの概要

2024年3月にリリースされたWordPress 6.5では、多くの新機能が追加されましたが、その中でもWebサイトのパフォーマンスに大きな影響を与える「AVIF画像フォーマットのサポート」が注目されています。AVIFは、同等の画質を保ちながらJPEG画像と比較して最大50%のファイルサイズ削減を実現できる次世代画像フォーマットです。

この記事では、AVIF画像フォーマットとは何か、WordPress 6.5でのサポート内容、そして実際にサイトに導入するメリットと方法について詳しく解説します。サイト表示速度の改善とCore Web Vitalsスコア向上を目指すサイト管理者にとって、必読の内容です。

AVIF画像フォーマットとは？次世代の画像圧縮技術

AVIF（AV1 Image File Format）は、Alliance for Open Media（AOM）によって開発された比較的新しい画像フォーマットです。AOMedia Video 1（AV1）コーデックをベースにしており、以下のような特徴を持っています：

高い圧縮率：JPEGと比較して30〜50%のファイルサイズ削減が可能
優れた画質：同等のファイルサイズでより鮮明な画像表示
透過サポート：PNGのようにアルファチャンネル（透過）をサポート
HDR対応：より幅広い色域と輝度範囲をサポート
アニメーション：GIFのような複数フレームアニメーションもサポート

AVIFは特に写真やグラデーションなどの複雑な画像で高い圧縮効率を発揮します。また、従来のJPEGで見られるブロックノイズや色にじみなどのアーティファクトが少なく、より自然な画像表示が可能です。

AVIF vs WebP vs JPEG：画像フォーマットの比較

主要な画像フォーマットの特性を比較してみましょう：

特性	AVIF	WebP	JPEG	PNG
圧縮効率	非常に高い	高い	中程度	低い
画質維持	優れている	良好	中程度	優れている
透過サポート	あり	あり	なし	あり
アニメーション	サポート	サポート	サポートなし	サポートなし
エンコード時間	遅い	中程度	速い	速い
ブラウザサポート	中程度（拡大中）	広範囲	すべて	すべて

AVIFの最大の強みは圧縮効率と画質維持のバランスにありますが、エンコード時間が比較的長い点と、ブラウザサポートがまだ完全ではない点が課題と言えます。

WordPress 6.5でのAVIFサポート内容

WordPress 6.5では、以下のようなAVIFサポート機能が追加されました：

AVIFファイルのアップロードサポート：AVIFファイルをメディアライブラリに直接アップロード可能に
サムネイル生成：アップロードされたAVIF画像から各種サイズのサムネイルを生成
画像編集機能：AVIF画像の回転、トリミング、リサイズなどの基本編集操作
AVIF形式での画像生成：アップロードされた他形式の画像（JPEG、PNGなど）からAVIFバージョンを生成（サーバー環境によって異なる）

これらの機能により、WordPressサイトでAVIF画像を活用するための基盤が整いました。ただし、既存の画像を自動的にAVIFに変換する機能はないため、新しくアップロードする画像や、別途プラグインを利用することになります。

サーバー要件：AVIFを使うための環境条件

AVIFをWordPressで活用するには、サーバー環境が以下の条件を満たしている必要があります：

PHP 8.0以上：AVIFサポートには比較的新しいPHPバージョンが必要
GDライブラリ（with AVIF support）：PHP画像処理ライブラリがAVIFをサポート
または、ImageMagick（with AVIF support）：代替画像処理ライブラリ
十分なメモリと処理能力：AVIFのエンコード/デコードは比較的リソース集約的

サーバー環境がこれらの条件を満たしているかどうかは、WordPress管理画面の「ツール」→「サイトの状態」で確認できます。また、「WP_DEBUG」モードを有効にしてAVIF画像をアップロードすることでも、互換性をテストできます。

AVIF画像がもたらすパフォーマンス上のメリット

AVIF画像をサイトに導入することで、以下のようなパフォーマンス上のメリットが期待できます：

1. ページ読み込み時間の短縮

画像はWebページの総ダウンロードサイズの中で大きな割合を占めることが多く、画像の最適化はサイト全体の読み込み速度に直接影響します。AVIFによるファイルサイズ削減は、特に画像が多いサイトで顕著な改善をもたらします。

実際のテストでは、画像を多用するECサイトでページ読み込み時間が平均20〜30%短縮されるケースも報告されています。

2. Core Web Vitalsスコアの向上

Googleが重視するサイトパフォーマンス指標「Core Web Vitals」の中でも、特に以下の指標向上につながります：

Largest Contentful Paint (LCP)：主要コンテンツの読み込み速度が向上
Cumulative Layout Shift (CLS)：画像サイズが事前に正確に把握できるため、レイアウトのずれが減少
First Input Delay (FID)/Interaction to Next Paint (INP)：ブラウザリソースの効率的な使用によりインタラクティブ性が向上

3. 帯域幅とストレージの削減

サイト運営者にとっても、ユーザーにとっても、データ転送量の削減はメリットとなります：

モバイルユーザーのデータ通信量削減：特にデータ制限のあるモバイルユーザーに有益
サーバーの帯域幅コスト削減：高トラフィックサイトではコスト削減効果が顕著
ストレージスペースの節約：バックアップサイズの縮小にも貢献

4. SEOへの好影響

Googleはページ速度をランキング要因の一つとしており、画像最適化によるパフォーマンス向上はSEO評価にも良い影響を与えます。特に「Page Experience Update」以降、Core Web Vitalsスコアはより重要な要素となっています。

実際、Googleの検索品質評価者向けガイドラインでも、ユーザー体験向上のための画像最適化の重要性が強調されています。

AVIFをWordPressサイトに実装する方法

WordPress 6.5でAVIFを活用する方法はいくつかあります。サイトの状況や技術的な要件に合わせて、最適な方法を選択しましょう。

方法1：新規画像をAVIF形式でアップロード

最も直接的なアプローチは、画像をAVIF形式で作成してからアップロードする方法です：

Adobe Photoshop、GIMP、またはSquooshなどのツールでAVIF画像を作成
WordPress管理画面から「メディア」→「新規追加」を選択
AVIF画像をアップロード
通常通り投稿や固定ページに挿入

この方法は簡単ですが、既存画像の変換は手動で行う必要があります。

方法2：画像最適化プラグインの活用

より効率的なのは、AVIF対応の画像最適化プラグインを使用する方法です：

プラグイン名	AVIF機能	特徴
ShortPixel Image Optimizer	AVIF変換、WebPフォールバック	クラウドベース、一括変換、高画質
Imagify	AVIF生成、自動最適化	WP Rocket開発元、WebPも対応
EWWW Image Optimizer	AVIF生成、遅延読み込み	サーバーローカル処理、多機能
Optimole	AVIF配信、レスポンシブ	CDN統合、リアルタイム最適化
Jetpack	AVIF変換（Photonサービス）	WordPressの公式サービス連携

これらのプラグインは既存の画像をAVIFに変換し、適切なフォールバックを設定することで、AVIFをサポートしていないブラウザでも問題なく表示されるようにします。

方法3：開発者向け：フィルターフックを使ったカスタム実装

WordPress 6.5では、AVIF画像生成のカスタマイズに使えるフィルターフックが追加されました：

// AVIF画像のプログレッシブエンコードを制御
add_filter( 'image_save_progressive', function( $enabled, $filename ) {
    if ( strtolower( pathinfo( $filename, PATHINFO_EXTENSION ) ) === 'avif' ) {
        // AVIFのプログレッシブ出力を有効化または無効化
        return true; // または false
    }
    return $enabled;
}, 10, 2 );

// AVIF画像の品質設定をカスタマイズ
add_filter( 'wp_editor_set_quality', function( $quality, $mime_type ) {
    if ( $mime_type === 'image/avif' ) {
        // AVIF画質を1-100で設定（標準は82）
        return 85;
    }
    return $quality;
}, 10, 2 );

// AVIF画像のプログレッシブエンコードを制御

add_filter( 'image_save_progressive', function( $enabled, $filename ) {

if ( strtolower( pathinfo( $filename, PATHINFO_EXTENSION ) ) === 'avif' ) {

// AVIFのプログレッシブ出力を有効化または無効化

return true; // または false

}

return $enabled;

}, 10, 2 );

// AVIF画像の品質設定をカスタマイズ

add_filter( 'wp_editor_set_quality', function( $quality, $mime_type ) {

if ( $mime_type === 'image/avif' ) {

// AVIF画質を1-100で設定（標準は82）

return 85;

}

return $quality;

}, 10, 2 );

これらのフィルターを使用することで、AVIF画像の生成品質やその他の特性をサイトの要件に合わせてカスタマイズできます。

AVIF実装時の注意点と課題

AVIF画像の導入には多くのメリットがありますが、いくつかの注意点や課題も考慮する必要があります：

1. ブラウザ互換性への対応

2024年7月時点でのAVIFのブラウザサポート状況は以下の通りです：

サポート済み：Chrome（v85+）、Firefox（v93+）、Edge（v92+）、Opera（v71+）、Samsung Internet（v16+）
サポートなし：Safari（iOS/macOS）の一部バージョン、Internet Explorer、古いブラウザ

特にiOSユーザーの一部はAVIFをサポートしていない可能性があるため、適切なフォールバック（WebP→JPEG）を設定することが重要です。

2. パフォーマンスとリソース使用

エンコード時間：AVIF生成はJPEGやWebPと比較して計算コストが高い
サーバーリソース：大量の画像をAVIFに変換する際はサーバー負荷に注意
復号化時間：古い端末ではAVIF表示に時間がかかる場合がある

3. 画質とファイルサイズのバランス

AVIF画像の最適な圧縮設定を見つけることも重要です：

過度な圧縮は品質低下につながる
圧縮レベルによって効率が大きく変わる
画像の種類（写真、グラフィック、テキストなど）によって最適設定が異なる

一般的には、写真に対してはAVIFの圧縮品質を60-80程度に設定すると、視覚的な品質を維持しながらファイルサイズを最小化できます。

4. 既存画像とのワークフロー統合

既存のサイトでAVIFを導入する場合、以下の点に注意が必要です：

大量の既存画像を一度に変換する際のリソース管理
コンテンツ作成ワークフローの変更（画像編集ツール、アップロードプロセスなど）
CDN設定の調整（Content-Typeヘッダー、キャッシュ設定など）

実際の効果測定：AVIFでどれだけ改善するのか

では実際に、AVIF画像の導入によってどの程度のパフォーマンス改善が見込めるのでしょうか。いくつかのケーススタディを見てみましょう：

ケーススタディ1：写真中心のブログサイト

サイト概要：写真を多用した旅行ブログ（1ページあたり平均10枚の画像）
変更内容：すべての画像をJPEGからAVIFに変換
結果：
- ページサイズ：2.8MB → 1.4MB（約50%削減）
- LCPスコア：3.2秒 → 1.9秒（約40%改善）
- モバイルCore Web Vitals合格率：65% → 92%

ケーススタディ2：ECサイト製品ページ

サイト概要：製品画像を多数表示するECサイト
変更内容：製品画像とサムネイルをAVIF形式で提供
結果：
- 画像読み込み時間：平均1.8秒 → 0.9秒（約50%改善）
- 全体のページ読み込み：3.5秒 → 2.3秒（約34%改善）
- バウンス率：33% → 26%（約21%改善）

これらの例から分かるように、特に画像が多いサイトではAVIFの導入によって大きなパフォーマンス改善が期待できます。もちろん、具体的な改善度はサイトの構成、元の画像形式、その他の最適化状況によって異なります。

WordPress 6.5のAVIFサポートをさらに強化するテクニック

WordPress 6.5のAVIF基本サポートをさらに強化するためのテクニックを紹介します。

1. picture要素を使った高度なフォールバック

最も柔軟なアプローチは、HTML5のpicture要素を使用したフォールバック階層を作成することです：

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像の説明" width="800" height="600">
</picture>

</picture>

この方法では、ブラウザは対応している最初の形式を選択します。この実装は、以下のようなプラグインで自動化できます：

EWWW Image Optimizer
ShortPixel Adaptive Images
WP Rocket（メディア設定）

2. サーバーサイド検出とAvif配信の設定

.htaccessファイルを使用して、ブラウザのサポート状況に基づいて適切な形式を配信する方法もあります：

# Apache設定 (.htaccess)
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.jpg.avif [T=image/avif,L]
  
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.jpg.webp [T=image/webp,L]
</IfModule>

# Apache設定 (.htaccess)

RewriteEngine On

RewriteCond %{HTTP_ACCEPT} image/avif

RewriteCond %{REQUEST_FILENAME}.avif -f

RewriteRule ^(.+)\.(jpe?g|png)$ $1.jpg.avif [T=image/avif,L]

RewriteCond %{HTTP_ACCEPT} image/webp

RewriteCond %{REQUEST_FILENAME}.webp -f

RewriteRule ^(.+)\.(jpe?g|png)$ $1.jpg.webp [T=image/webp,L]

</IfModule>

Nginxサーバーを使用している場合は、以下のような設定が可能です：

# Nginx設定
map $http_accept $avif_suffix {
  default "";
  "~*image/avif" ".avif";
}

map $http_accept $webp_suffix {
  default "";
  "~*image/webp" ".webp";
}

server {
  # 他の設定...
  
  location ~* ^.+\.(jpe?g|png)$ {
    add_header Vary Accept;
    try_files $uri$avif_suffix $uri$webp_suffix $uri =404;
  }
}

# Nginx設定

map $http_accept $avif_suffix {

default "";

"~*image/avif" ".avif";

}

map $http_accept $webp_suffix {

default "";

"~*image/webp" ".webp";

}

server {

# 他の設定...

location ~* ^.+\.(jpe?g|png)$ {

add_header Vary Accept;

try_files $uri$avif_suffix $uri$webp_suffix $uri =404;

}

3. CDNとの連携設定

多くのCDNサービスはAVIF配信をサポートしています。以下は主要CDNでの設定例です：

Cloudflare：Polish機能でAVIF変換を有効化
Bunny CDN：Image Processingで自動AVIF変換を設定
KeyCDN：Image Processingのオプションでフォーマット変換を有効化
Fastly：Image Optimizationサービスを使用

まとめ：WordPress 6.5のAVIFサポートでサイトを高速化しよう

WordPress 6.5でのAVIFサポート追加は、サイトパフォーマンスの向上を目指すユーザーにとって大きなチャンスです。同等の視覚的品質を維持しながら、画像ファイルサイズを大幅に削減することで、サイト表示速度の向上、Core Web Vitalsスコアの改善、そしてユーザー体験の強化が可能になります。

AVIF画像形式の主なメリットを振り返ると：

JPEGと比較して最大50%のファイルサイズ削減
優れた画質を維持しながらの高圧縮率
透過やアニメーションのサポート
Core Web Vitalsスコア向上への貢献
モバイルユーザーとサーバー両方の帯域幅節約

もちろん、ブラウザ互換性やエンコード時間などの課題もありますが、適切なフォールバック設定とプラグインの活用により、これらの課題は解決可能です。

WordPress 6.5へのアップデートと、適切な画像最適化戦略の導入を検討してみてください。サイト表示速度の向上は、ユーザー満足度向上、検索エンジンでの評価向上、そして最終的にはコンバージョン率の改善につながるでしょう。

当社では、WordPress 6.5へのアップグレードサポートやAVIF画像形式を使ったサイト最適化のコンサルティングを提供しています。サイトパフォーマンス向上についてのご相談は、お気軽にお問い合わせください。

エーデルハーツ

Custom WordPress Support & Development