Wordpress 画像をWebP対応させて表示を軽くしよう｜ HISCO ITの知らない、わからない、間違ってるを解消する

まだアメブロ？いますぐワードプレスに移行すべき理由。を追加しました
アメブロいいねを100以上にする２つの確実で簡単な方法と2つの裏技を更新しました
WordPress PVを簡単に倍にする方法を追加しました
【アメブロ/wordpress】ブログは毎日書く方がいいの嘘・ホントを追加しました

この記事を読むのに必要な時間は約 8 分です。

WebPってなに？

WebPは、Google社が開発しているオープンな静止画像フォーマットのことです。

JPEGや、PNGに置き換えようとしているフォーマットで、PageSpeed Insightsで最近やたらと次世代フォーマットでの画像配信と修正するように迫ってきます。

実際のところJPEGやPNGに比べてもデータサイズが30％～70％ぐらい小さくなるので利用するのもありだと思います。

ただ気になるのがブラウザの対応はというと、この記事を書いている2020.12.26時点ではIE(Internet explorer :インターネットエクスプローラ)を除く Google Chrome、FireFox、Safari、Edgeなどの主要ブラウザはほぼ対応しています。

なので、WebPに対応させていくほうが得策だと思われます。

参考:https://caniuse.com/#feat=webp

どうやってWebPに対応させる？

それでは、ここから画像をJPEGやPNGからWebPに対応させる方法をご紹介します。

2021年11月25日　追記

2021年7月20日よりWordPress5.8がリリースされたのでWordPress5.8へアップグレードされた方はこの処理をする必要がありません。

WordPress5.7以前をご使用の方のみこの処理を行ってください。

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

まずこれからWebP形式の画像をアップロードする方法からです。

WordPressはまだ、WebPファイルをアップロードすることができません。

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

WordPressでは通常ではアップロードできないフォーマットはいくつもあります。

WebPフォーマットもその一つです。

アップロードできるようにする方法は3つ。

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

どの方法でもいいのですが、普段のブログ作成と同じようにするために今回はPHPに追記する方法で説明したいと思います。

理由としてはFTPはブログを書くたびにFTPソフトを立ち上げるのが面倒、プラグインについてはあなたのお使いのサーバーでは使えないという場合もあるということです。

なのでPHPに追記するのはが一番、単純だと判断しました。

特に難しいところはありません、下記のコードをfunction.phpにコピペすればWebpがアップロードできるようになります。

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

function custom_mime_types( $mimes ) {

$mimes['webp'] = 'image/webp';

return $mimes;

}

add_filter( 'upload_mimes', 'custom_mime_types' );

WebP未対応のブラウザーに対応させる

今後は不要になるかもしれませんが、現段階ではまだWebPが未対応のブラウザーを利用しているユーザーがいる可能性があるので、そういう方にも画像が表示されるように対応しておいたほうがいいと思います。

方法としてはpictureタグをつく方法と.htaccessファイルを書き換える方法の2種類があります。

今回は、.htaccessファイルを書き換える方法を採用します。

正直なところ画像を挿入するたびにpictureタグを書くのは面倒なので一回設定すればいいだけの.htaccessを書き換える方法にしました。

ただこの方法の条件があります。

同じ画像をJPEGとWebPの2種類用意する。
WebPファイルは拡張子(.jpg）まで含めた同じ名前にする。
2つのファイルは同じフォルダにアップロードする

ファイルの名前の例

images/img.jpg ⇒ images/img.jpg.webp

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

RewriteEngine On

RewriteCond %{HTTP_ACCEPT} image/webp

RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$

RewriteCond %{REQUEST_FILENAME}\.webp -f

RewriteCond %{QUERY_STRING} !type=original

RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]

</IfModule>

Header append Vary Accept env=REDIRECT_accept

</IfModule>

AddType image/webp .webp

上記はWordPressの「EWWW Image Optimizer」プラグインで使われている設定で、この書き方を参考にする人が多いようにおもいます。

JPEGをWebPに変換するツール

WebPが利用できる環境ができたとしてもまだWebPで画像を保存できなければ意味がありません。

ここではJPEG／PNG形式の画像をWebPに変換できるソフトWebPConvをご紹介します。

WebPConvとは

WebPConvはWindowsで動くJPEGやPNGを一括で変換してくれるアプリです。

今後の記事を投稿する時に使用する、画像をWebPに変換してくれてとても便利です。

Webpのインストール方法

Step1.

https://ftp.vector.co.jp/64/90/3102/WebPconvSetup.zip

↑のURLからインストールファイルがダウンロードできます。

Strep2

ダウンロードしたインストーラーWebPconvSetup.exeを起動して、「Next」を押します。

インストールの指示に従った何度か[Next]もしくは[install]をクリックします。

[Finish]のボタンが出たらクリックしてインストール完了です。

WebPConvを使って画像をWebPに一括返還する方法

WebPconvを起動します。

画像をWebP形式に変換する時は[ENCODE]、WebPからJPEGやPNGに変換する時は[DECODE]というタブに分かれています。

よほどのことがない限り[DECODE]は使用しないので、起動時に[ENCODE]になっているかだけ確認してください。

WebPconvにWebPに変換したい画像をドラッグアンドドロップします。

あとは画面左上の三角ボタンをクリックするとWebPに変換されます。

保存先はデスクトップ上にWebP_encodedという保存先が自動で作成されるか三角ボタンをクリックした場合にフォルダを指定する場合のどちらかです。

これで、今後はWebP形式の画像をWordpressで使用できるようになります。

WordPressでWebP形式の画像を使用する場合に注意しておきたいこと

そこまで神経質に気にすると言うほどではありませんが、WebP形式の画像をWordpressで利用する場合の注意点として、width属性と height属性が自動で設定されないかもしれません。

これは、僕が使っているWordpressのテーマやバージョンの問題なのかどうかもわからないことですが、WebP形式の画像をつかしても、imgタグにwidth属性と height属性が自動で設定されません。

このことで表示が崩れるということはありませんが、Wordpress5.5から実装されたネイティブLazy-loadの機能を利用するには画像にwidth属性と height属性を設定する必要があります。

ネイティブLazy-loadというのは画像の読み込むタイミングを遅らせることで記事全体の読み込みを早くする機能です。

通常Wordpressで画像を追加した場合には自動でwidth属性と height属性を自動で計算してくれますが、WebP形式ではその機能が働かないので注意してください。

WordPress 画像をWebP対応させて表示を軽くしよう

WebPってなに？