WebPをWordPressに導入する方法【表示速度アップしてSEO対策】

「SEO対策」の一環として、サイトの表示速度を速くするコトがだいぶ定着してきたように思います。とはいえ、やらなければならないコトは山積み。

対策の1つとして、最も分かりやすいのは画像を圧縮するコトなんですが、改善を進めていくと「WebP」というフォーマットに突き当たると思います。

ただ「WebP」を導入するには問題がいくつもあって、なかなか踏み切れない人もいるんじゃないでしょうか。

この記事では、以下の手順で「WebP」の画像を「WordPress」で表示させる手順を紹介します

「WebP」を「WordPress」で表示させる手順
  1. 画像を「WebP」に変換する
  2. 「WebP」を「WordPress」に読み込めるようにする
  3. 未対応のブラウザに対応する

WebPとは

「WebP(ウェッピー)」は、グーグルが推奨する画質を落とさずにデータ容量を少なくした画像の次世代フォーマット。

「SEO対策」をしている人なら分かると思いますが、サイトの速度を計測した時に改善方法として次世代フォーマットを利用するように言われると思います。

次世代フォーマットとして挙げらているのは、「JPEG2000」「JPG XR」「WebP」など。グーグルが2010年から提供を始めたのが「WebP」とあって、「Page Speed Insights」で計測するとやたら「WebP」への変更を求められます。

それだったら、フォーマットを変更しようとする人は多いと思うのですが、これらの次世代フォーマットには大きな問題があります

それは、「ブラウザによっては表示されない」という問題

JPEG2000JPG XRWebP
Chrome××
Safari××
IE××
Edge×
Firefox××

りょう

この記事では、未対応のブラウザではどう対応するのかも、ちゃんと解説するよ!

フォーマットを「WebP」に変換する

JPGやPNGのフォーマットになっている画像を「WebP」に変換するには、オンライン上で変換できるツールを利用すると良いでしょう。

有名なところとして「Syncer」などがありますが、個人的にはグーグルが提供しているWEBツール「Squoosh」がおすすめ。

squoosh

>> https://squoosh.app/

フォーマットを「WebP」に変換できるコトはもちろんなのですが、同時に画像圧縮や大きさの変更も可能。

「Squoosh」の使い方はこちらの記事で紹介しているので、ぜひ参考にしてみてください。

画像圧縮アプリ「Squoosh」が万能すぎる!【使い方とデメリットを紹介】

「WebP」を「WordPress」にアップする

画像のフォーマットを「WebP」に変換したら、「WordPress」にアップロードします。ただし、デフォルトではこの作業ができません

いつも通りアップロードしてみると分かりますが、「セキュリティ上の理由によりこのファイル形式は許可されていません。」というエラーが表示されます。

webp

実は、「WordPress」は「WebP」に限らず通常ではアップロードできないフォーマットがたくさんあります。

そのため、「WebP」をアップロードできるように設定する必要があります。

設定方法は、この3つ。

「WebP」をアップロード可能にする方法
  1. FTPでアップロード
  2. プラグインを使ってアップロード
  3. PHPに追記してアップロード

どの方法でもアップロードはできるので、好きな方法を選ぶと良いでしょう。

FTPでアップロード

あくまで「WordPress」がフィルターをかけて「WebP」をアップロードできないようにしているだけなので、サーバー側にアップロードすれば可能です

アップロードする場所
/wp-content/uploads

年月の細かいファイルがさらにある場合もありますので、その時は直近の月のファイルにアップロードしてください。

プラグインを使ってアップロード

FTPを触るのは面倒だという人は、WordPessには欠かせない「プラグイン」を使って「WebP」をアップロードするコトもできます

WebPのアップロードを可能にするプラグイン
  • PJW Mime Config
  • Disable Real MIME Check
  • WP Add Mime Types
  • EWWW Image Optimizer

「WP Add Mime Types」は日本の方が作ったプラグインというコトで、日本語対応になっています。そのため、国内での利用者が一定数います。

ただ、「PJW Mime Config」と「Disable Real MIME Check」はもう何年も更新されていないのでオススメはしないですが、念の為紹介しておきました。

この中で、唯一知っている人が多いと思うのが「EWWW Image Optimizer」。画像を自動で圧縮してくれるプラグインとして有名なので、使っている人も多いはず。

実は、「EWWW Image Optimizer」にも「WebP」に対応する設定が付いています。

EWWW Image Optimizerで「WebP」に対応させる

紹介している他の3つは基本的に有効にすれば「WebP」をアップロードできるようになるはずですが、「EWWW Image Optimizer」の設定は「.htaccess」を触ります

STEP.1
「EWWW Image Optimizer」の設定画面にアクセスしたら、タブの中から「WebP」を探してクリックします。次に「JPG、PNGからWebP」と書かれているボックスにチェックを入れ、「変更を保存」を押します。

webp
STEP.2
そして、「Basic」というタブに移ってから1番に下に表示されているタグを全てコピーします。

webp

注意
「リライトルールを挿入」を押すと自動的にタグが「.htaccess」へ記述されるようになっていますが、エラーが出てしまうので手動で行った方が良いです
STEP.3
先ほどコピーしたタグを「.htaccess」に貼り付ければ、設定は完了です。

補足
「.htaccess」に貼り付ける時は、必ず一番上、つまり #BEGIN WordPress より上に貼り付けましょう。「リライトルールを挿入」を押してはいけない理由は、一番下に挿入されることによるエラーが出る場合があるからです。

「EWWW Image Optimizer」の場合には、この設定が完了すればJPGとPNGの画像をアップロードするだけで自動的にWebPフォーマットの画像も生成してくれるようになります。

しかも、「WebP」に対応していないブラウザだった場合にはアップロードした元画像を表示するようにもなっているので、かなり便利ですね。

りょう

wpXサーバーでは、システムの理由からそもそも「EWWW Image Optimizer」が使えないようですね。

PHPに追記してアップロード

自動で「WebP」に変換してくれる「EWWW Image Optimizer」で十分だと思う人も多いかもしれませんが、プラグイン嫌いの人の場合にはPHPを使ってみるのが良いと思います

何も難しいことはなく、functions.phpに以下をコピペすれば「WebP」がアップロードできるようになります。

PHP
function custom_mime_types( $mimes ) {
  $mimes['webp'] = 'image/webp';
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

WebP未対応のブラウザに対応

「EWWW Image Optimizer」を使ってしまえばWebP未対応のブラウザの対応も自動でしてくれますが、FTPやPHPの追記ではあくまで「WebP」の画像をアップロードできるようにしただけにすぎません。

そのため、WebP未対応のブラウザでページを閲覧された時にどうするかが問題となってきます。

そんな時は、「piture要素」を利用します。

「piture要素」は、表示するのに適切な画像がなかった場合にはimg要素の画像を表示するという性質があります。

img要素には未対応ブラウザ用にJPGやPNGの画像を指定して、WebP画像は対応ブラウザで表示させるようにsourceタグで指定します。

つまり、下記のコードをコピペして使ってください。笑

PHP
<picture>
<source type="image/webp" srcset="Webp画像のURL">
<img src="JPGやPNG画像のURL" alt="">
</picture>

「WebP」画像をアップロードするようにしましたが、未対応ブラウザのために圧縮したJGPやPNGもアップロードして表示できるようにしておくことになります。

さいごに

今後「WebP」が全てのブラウザで対応してくれればラクなんですが、最初からIEとSafariの人は無視するっていう選択も無きにしも非ずって感じですかね。

表示速度を改善したくて頑張っている人は、ぜひ次世代フォーマット「WebP」に対応してみてください。