WebPをWordPressで使えるようにする3つの方法【画像変換してSEO対策】

SEO 対策として画像を「WebP」に変換しようと思うんだけど、WordPress ではどうすれば良いの?

 

そんな疑問にお答えします。

本記事で分かること

  • 画像を「WebP」に変換する方法
  • WebP を WordPress に読み込む3つの方法
  • 未対応のブラウザに対応する方法
 

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

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

ということで、WordPress サイトで WebP に画像変換させて表示させるまでの手順を紹介します

次世代フォーマットの「WebP」とは

WebP 画像 変換

 

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

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

次世代フォーマットとして挙げらているのは、

  • JPEG2000
  • JPG XR
  • WebP

など。
 

グーグルが 2010 年から提供を始めたのが WebP とあって、「Page Speed Insights」で計測するとやたら WebP への変更を求められます。

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

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

次世代フォーマット対応状況

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

リョウ

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

追記:WebP が Safari に対応予定

Safari 14 から Beta 版として WebP をついに対応すると発表がありました。ただ、正式のリリースで対応するかはまだ未定です。

>> Safari 14 Beta Release Notes

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

WebP 画像 変換

 

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

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

squoosh

>> https://squoosh.app/
 

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

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

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

「WebP」を「WordPress」にアップロードする3つの方法

WebP 画像 変換

 

画像のフォーマットを「WebP」に変換したら、「WordPress」にアップロードします。

ただし、デフォルトではこの作業ができません
 

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

webp

 

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

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

設定方法は、この3つ。

  • FTPでアップロード
  • プラグインを使ってアップロード
  • PHPに追記してアップロード

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

方法①:FTPでアップロード

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

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

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

方法②:プラグインを使ってアップロード

FTPを触るのは面倒だという人は、WordPessには欠かせない「プラグイン」を使って「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 未対応のブラウザに対応させる方法

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 に変換して SEO 対策しよう

以上で、WordPress サイトで WebP に画像変換させて表示させるまでの手順を紹介しました。
 

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

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