【EWWW Image Optimizer】画像サイズ圧縮でブログのページ表示スピードを改善しよう：WebP設定方法【プラグイン】

2020-12-012022-01-01

RORONOA

今日はサイト表示速度を改善するためにも使える【EWWW Image Optimizer】というプラグインを使用してGoogleが推している画像のフォーマットWebP（ウェッピー）の設定方法について。

サイトの表示速度は、ブログを運営する上でとても重要と言うことは、今この記事を読んでる方ならおそらくご存知だろう。

サイトの表示速度が落ちると、、、

SEOに不利に働く
ユーザビリティーが低下することで離脱率が高くなる

サイトの表示速度を落とす原因として大きなものが『画像』になるわけだが、その画像を最適化してくれるプラグインが【EWWW Image Optimizer】だ。

インストールの方法や基本的な設定方法がまだな方は先に下記記事より読んでほしい。

今日はさらにサイト表示速度の改善をするための【WebP（ウェッピー）の設定】というところを紹介したい。

この記事を参考にしてもらいたい人

サイトの表示速度を早くしたい
【EWWW Image Optimizer】の使い方がよくわからない

WebP（ウェッピー）とは

WebP（ウェッピー）とは、2010年に発表されたGoogleが開発している画像フォーマット。拡張子は「.webp」。

意外と前からある拡張子だが、そこまで普及していないのは、対応ブラウザが少なかったというのが大きな原因として挙げられる。このWebP（ウェッピー）は長い間Chrome・Firefox・Edgeにしか対応しておらず、Safari・IE(Internet Explorer)が非対応だったんだ。

ただ、2020年AppleがiOS14、iPadOS14から、WebPフォーマットに対応となり、SafariでWebPがサポートされるようになった。

このことからも今後WebPの導入は間違いなく大きく加速していくことが考えられる。

僕も正直、対応ブラウザ少ないし、まだWebP対応はしなくてもいいかと思考停止していたがさすがに重い腰を上げておこうと立ち上がった。

WebP（ウェッピー）のメリット

JPG・PNG・GIFのいいところ取りでかつ軽いのがWebP（最強）

ファイルサイズを小さくできる：Googleは、PNGだと約26％、 JPGだと約25〜34％軽くできると発表
画像の透過が可能：背景透過にしようと思うとJPGではなくPNGを使用する必要があったがWebPはJPG同様非可逆圧縮の画像なのに透過対応も可能になっている。
アニメーションも作成可：これまでJPGをアニメーションにしようとした際フォーマットをGIFに変える必要があったがWebPはアニメーションにも対応している。

RORONOA

IEには対応してないけど、今後WebサイトはWebP一択とかもありえるかもね。もちろん画像編集ソフトの対応とかプラグインとかもいっぱい出てきそうな予感。

WebP（ウェッピー）の設定

WebP変換設定

WebP変換設定手順

【ダッシュボード】→【設定】→【EWWW Image Optimizer】→【WebP】タブを押す
一番上の項目【WebP変換】にチェックを入れる
【変更を保存】を押す

.htaccesファイルへの追記

.htaccesファイルへの追記

【WebP】タブの一番下のところにコードがあるので全てコピーする（下のコードボックスからのコピーでも可）
【.htaccesファイル】の一番上にコピーしたコードを貼り付ける

.htaccesファイルへの追記コード

<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

【.htaccesファイル】に追記する方法は２パターン