【WordPress】WebPに一括変換する方法【プラグイン】

【WordPress】WebPに一括変換する方法【プラグイン】

  • 2020年7月18日
  • 2020年8月13日
  • ブログ

「EWWW Image Optimizer」を使ってWebPにする

「EWWW Image Optimizer」を使ってWebPにする

前回の記事【Safariも対応】WebPという次世代フォーマットの画像を使う理由【Web表示高速化】で、画像をWebP化するメリットや必要性は分かったけど、

アップロード済み・すでに記事で使用している画像を1つ1つWebPに変換するのはメッチャめんどくさいですよね。

そんなあなたに朗報!
「EWWW Image Optimizer」を使えば、一括でWebPの画像を生成することができます。

もちろん、元画像(JPG、PNG)も残したままです。

今回の記事内容

  • 「EWWW Image Optimizer」の設定方法
  • これからの画像は自分でWebP化する方法
  • WordPressでWebPをアップロードする方法

なぜ元画像が必要なのか?

前回の記事で紹介したとおり、WebP未対応のブラウザがまだ存在しています。

なので、未対応のブラウザで表示するときは今まで使っていたJPGやPNGを表示する様に設定することも必要です。

なので、元画像を残しておくことはとても重要なので、間違って消しちゃダメですよ。

前置きが長くなってしまいましたが、そろそろ本題に入りましょう。

一括でWebPにする設定&ブラウザ選別

一括でWebPにする設定ブラウザ選別

①「EWWW Image Optimizer」の設定からWebPのタブを開き、1番上にある「WebP Conversion」にチェックを入れて「変更を保存」

webpconversion

②下にスクロールするとコードが生成されている + 赤色PNGマークが現れる。

「リライトルールを生成する」を押さずにコピーする

自分でコピペする理由は、htaccessに新しくルールを設定するときは1番上に書く必要があるが、このボタンを押すと1番下に挿入されてしまう。そして、エラーがでる。
コード生成

③htaccessにコピーしたコードを貼り付ける(もちろん1番上に)

サーバがmixhostの人は以前に紹介した記事mixhostでURL正規化(リダイレクト設定)を画像付きで丁寧に解説【2020年版】にhtaccessへの記入方法に触れていますので参考にどうぞ。

④赤色PNGマークが緑色WebPマークになっていればリライト設定が完了

webpgreen

この設定が終われば、次回から画像アップロード時にWebPを生成してくれます。もちろん元画像(JPG、PNG)は残したままです。

さらに、対応ブラウザにはWebPを表示、未対応ブラウザ(IE、Safari)には元画像を表示する設定まで完了しています。(htaccessの部分がそれです)

WebPをもっと軽量化したい

軽量化

「EWWW Image Optimizer」でWebP化したものはSquooshでのクオリティ80くらいです。

実際にSquooshでWebP化してみれば分かりますが、もっと圧縮してしまっても、画質的に問題ない事が分かります。

すでにアップロードしている画像は「EWWW Image Optimizer」を使ってWebPに変更するとして、「これからアップロードする画像はもっと軽量化したい!」って時は、「EWWW Image Optimizer」を無効化し、自分でWebP化してアップロードする方法がいいです。

その時は、一緒に元画像(JPG、PNG)もアップロードして下さいね。

その方がページの読み込み速度も早くなるので手間はかかりますが、それ以上の恩恵があるかもしれません。

WordPressにWebPがアップロードできない問題

WordPressにWebPがアップロードできない問題

しかし、ここで問題が発生するのですが、デフォルトの状態ではWebPの画像はアップロードできません。

対策を2つ紹介しますので気に入った方を使ってみてください。

コード追記でWordPressからアップロードできる様にする方法

ここではfunction.phpの部分に次のコードを追記するとアップロードできる様になります。

function custom_mime_types( $mimes ) {
  $mimes['webp'] = 'image/webp';
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );
コードを編集するときは必ずバックアップをとって編集しましょう。

FTPなどを使ってサーバに直接アップロードする方法

WordPressのアップロード機能を使わずに、直接サーバに画像をアップロードする方法です。

function.phpなどをあまり触りたくない人はこの方法がいいですね。

アップロード先は public_html/ドメイン/wp-content/uploads/ の中です。

設定によっては public_html/ドメイン/wp-content/uploads/2020/07 の様に年/月と細分化されているので確認しておきましょう。