WordPress（ワードプレス）でWebPを用いて画像のデータ容量を軽くして高速化する方法

このカスタマイズのポイント

見た目は変わりませんが、画像がwebP（ウェッピー）形式になります。画像が大幅に軽量化され、読み込み時間が速くなります。

ただし、効果が表れるのはWebP対応ブラウザです。（Google Chrome、FireFox、Opera、Edgeが対応しているのでほぼ速くなるとも言えます。

また一度設定さえしておけば、設定後にアップロードした画像は全てWebP対応になります。

本カスタマイズの基本情報

※画像の数で変わります

サブディレクトリサイトでWebP化を検討されている方は手順がことなります。サブディレクトリサイトのWebP化の方法をご覧ください。

難易度

画像の拡張子がJPG、PNGで保存されている状態です。

見た目は変わりませんが、読込形式がWebPに変わります。

プラグイン「EWWW Image Optimizer」をインストールします。

サイドバーの「設定＞EWWW Image Optimizer」を開き、WebPタグを開きます。

チェックボックスをONにします。

以下のコードをコピーします。

.htaccess「.htaccess」を編集します。以下の例はレンタルサーバー「Conoha」の管理画面です。編集のペンボタンから編集が可能です。

一番最初（#BEGIN WordPressの前）に貼り付けます。

保存し、先ほどのEWWW Image Optimizerの画面を見るとグリーンに変わっています。これで設定は完了です。

キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、最初からグリーンになります。

サイドバーのメディアから一括最適化を選びます。

画像をスキャンします。

右側のWebPのみ、チェックボックスを入れます。なお過去にEWWW imgae Optimizerを使っている場合は再最適化にチェックを入れて下さい。

圧縮が終わって、メディアライブラリの一覧で開きます。以下のボタンから一覧にできます。

以下のようにWebP圧縮されていることが確認できます。

Google Chromeをシークレットタブで開きます。シークレットタブは「Alt＋shift＋n」を押すことで開くことができます。

F12を押して、左上からNetworkを開きます。

以下の枠の中がWebPに変わっていればいればOKです。（開いた時、何もデータがないことがあります。その場合は「ctrl+R」を押して再読み込み（リロード）して下さい）。

これでおしまいだよ！役に立ったらツイート、はてなブックマークしてくれると嬉しいな。