WordPressでWebP画像が表示されない時の対処法

2024年7月20日

WordPressでwebp画像が表示されない場合の対処法について、以下に詳しく解説します。

WebPフォーマットの概要

WebPは、Googleが開発した画像フォーマットで、高い圧縮率を誇ります。

JPEGやPNGに比べて同等の画質でファイルサイズを小さくすることができます。

しかし、すべてのブラウザや環境で完全にサポートされているわけではありません。

問題の診断

WebP画像が表示されない理由は多岐にわたります。

以下のポイントを確認してください。

ブラウザの互換性

WebPは最新のブラウザでサポートされていますが、古いバージョンや特定のブラウザではサポートされていない場合があります。

まず、自分のブラウザがWebPをサポートしているかを確認します。

WordPressのメディア設定

WordPressのバージョンやテーマ、プラグインの設定によってはWebP画像が正しく認識されないことがあります。

以下の手順で設定を確認します。

対処法

WebPサポートの確認

使用しているブラウザがWebPをサポートしているかどうかを確認するために、以下のようなオンラインツールを使用できます。

Can I use

互換性のあるプラグインを使用する

WebP画像をサポートするために、以下のプラグインをインストールすることができます。

WebP Express

このプラグインは、画像をWebP形式に変換し、ブラウザがWebPをサポートしている場合に表示します。
設定画面で細かいオプションを設定できます。

EWWW Image Optimizer

画像を自動的に最適化し、WebP形式に変換します。
他の形式へのフォールバックも提供します。

.htaccessファイルの設定

Apacheサーバーを使用している場合、.htaccessファイルを編集してWebP画像を適切にサポートさせることができます。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^(.*)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=REQUEST_image]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REQUEST_image
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

このコードは、ブラウザがWebPをサポートしている場合、WebP画像を優先的に表示します。

CDNの設定

Content Delivery Network (CDN) を使用している場合、CDNがWebPをサポートしているかを確認し、設定を調整します。

例えば、Cloudflareを使用している場合、Speedタブの「Polish」機能を有効にするとWebP画像が自動的に提供されます。

テーマとプラグインの更新

使用しているテーマやプラグインが最新バージョンかを確認します。

古いバージョンではWebPのサポートが不足している場合があります。

フォールバック画像の提供

WebPをサポートしていないブラウザのために、フォールバック画像を提供することも一つの方法です。

以下のようなコードを使用して、HTML内で対応します。

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="Description of image">
</picture>