WordPressをWebP化するために必要な準備と具体的な手順

2020 12/09

2021年11月2日

私も最近気づいたんですが、Safari（iOS14.2とmacOS 11 Big Sur以降）がWebPに対応していました。

こうなると、使わない手はありません。これを機にこれからブログに使う画像は、WebPに切り替えるべきですね。軽量でキレイなので、サイトの表示スピードが速くなります。

さっそく筆者もこのブログの画像をすべてWebPに変換したんですが、ちょっと苦労しました。

ということで今回は、WordPressのWebP化の手順と注意点を、備忘録を兼ねて解説していきます。

関連Webシェア世界第３位を誇るGenesis Frameworkとは

WebPとは

本題に入る前に、おさらいをしておきましょう。

WebPとは、Googleが開発した次世代画像フォーマットのことで、拡張子「.webp」であらわされます。

PageSpeed Insightsの「次世代画像フォーマット」にも頻繁にでてきますよね。Googleゴリ推しの新しい画像形式です。

今までは対応しているブラウザが少なかったため、導入を先送りにしている人も多かったのですが、SafariがWebPフォーマットに対応したことを受けて一気に利用者が増えています。

WebP画像の効果

WebPフォーマット画像の最大の特徴は、高い圧縮率です。

Googleが行ったテストによると、WebP画像は従来のJPEGやPNGと比較しても画質を落とすことなく、かなりサイズを小さくすることに成功しています。

「かなり」とは具体的にこれぐらい。

JPEGと比べると、縮小率25％～34％アップ
PNGと比べると、縮小率26％アップ

各種テストの詳細は以下のリンクから確認できます。

JPEG（英語表記）
PNG（英語表記）

画質を落とすことなく圧縮できれば、それだけサーバーへの負担も少なくてすみますので、サイトの表示速度アップにつながります。

また表示速度が上がれば、ストレスなくサイトを閲覧できるようになりますので、PV数改善にもつながっていくわけです。

ちなみに筆者は、さまざまな形式のフォーマットを一本化できるところにも魅力を感じています。

これまでブログを運営していくなかで、さまざまなフォーマットの画像を扱ってきました。

写真はJPEG
ロゴを含むイラストはGIF
透過画像はPNG

各種フォーマットはすべてWebPに置き換えれるようになりますので、それぞれの形式に合わせてざまざまなツールを使う必要もなくなります。

WebP画像導入時の注意点

WebP画像導入時には、まだ対応していないブラウザやサイトがある点を踏まえておきましょう。

ブラウザがWebPに対応していないと、WebPフォーマットでアップした画像が表示されません。

ただし対応していないのは、MicrosoftのInternet ExplorerとKaiOSのブラウザの２つだけとなりました。

WebPフォーマット画像のブラウザ対応状況 — サイト「Can I use…」より

同じMicrosoftでも、EdgeはGoogleのChromiumをベースに作られているためWebPに対応しています。

対応状況はこちらから随時確認できます。使い方は簡単で、一番上にWebP、HTML５などと入力すると、各種ブラウザの対応状況が表示されます。

次にサイトです。

たまに一部対応していないサイトがあります。

実はWordPressも例外ではありません。WordPressにWebP画像をアップロードしようとすると、こんな表示がでます。

WordPressにWebP画像をアップロードしようすると出てくるエラーメッセージ — WordPressWebP画像アップロードエラー

でも心配はいりません。

これは不正防止のフィルターがかかっているだけなので、ちょっとした設定を変更するだけで、利用できるようになります（のちほど詳しく解説します）。

このようにまだちょっとした障害がちょいちょいでてきますので、WebP画像を使用するときには、そのサイトがWebPにどこまで対応しているのか確認をするようにしてください。

WordPressでWebP画像を使う方法

お待たせしました。いよいよ本題に入ります。

ちなみにこのブログの画像はすべてWebPに変換しましたが、やはり予期せぬトラブルがいくつかありました。

その点も踏まえて、WebP化するための手順を解説していきます。

WordPressにWebP画像をアップロードできるようにする

WordPressにWebP画像をアップしようとしても、先述のとおりエラーが出てしまいますので、WebP画像をアップロードできるように設定します。

なお、プラグインを使ってWebP画像をアップロードできるようにならないかと、さまざまなプラグインを試してみましたが、ありませんでした。

すべてのプラグインを試したわけではないのでまだみつかっていないだけかもしれませんが、WordPressの仕様を考えるとそのようなプラグインは存在しない可能性があります。

どのみちプラグインを使うと、サイト自体が重くなってしまいますので、function.phpにコードを追記する方法がオススメです。

以下のコードをfunction.phpにコピペします。

//* WebP File Upload
 function add_file_types_to_uploads( $mimes ) {
   $mimes['webp'] = 'image/webp';
   return $mimes;
 }
 add_filter( 'upload_mimes', 'add_file_types_to_uploads' );

メディア一覧のWebPサムネイル画像を表示させる

せっかくアップしても、WebP画像はWordPressのメディア一覧に表示されません。

WordPressにアップロードしたWebP画像が表示されない — WordPressは標準ではWebP画像の一覧は表示されない

その対策として、以下のコードをfunction.phpにコピペしてください。

//* WebP image thumbnail display on media　Library
function webp_is_displayable($result, $path) {
    if ($result === false) {
        $displayable_image_types = array( IMAGETYPE_WEBP );
        $info = @getimagesize( $path );
 
        if (empty($info)) {
            $result = false;
        } elseif (!in_array($info[2], $displayable_image_types)) {
            $result = false;
        } else {
            $result = true;
        }
    }
    return $result;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

コードを追加しても、既にアップロード済みの画像は表示されないままです。

このコードを追加後にアップロードしたWebP画像が表示されるようになりますので、コード追加前のWebP画像はライブラリから一旦削除し、再アップロードして下さい。