WordPressサイトで画像をWebP(ウェッピー)対応し軽量化する方法

Yasu
こんにちは!「Tekito+Style.me」を運営しているYasu(@98nasi_nori)です。普段は都内でWebディレクターなどをしています。

サイトスピード改善でもっともネックになるのが画像。画像データは基本的に重いので、圧縮するなどできる限り軽量化することが望ましいです。

そこでぜひ試してみたかったのが、画像のWebP(ウェッピー)対応をすること。WebPはGoogleが開発・推奨している最新の画像形式で、画像の軽量化を期待できます

WordPressサイトの場合ですと、プラグインを使えば比較的簡単にWebPに対応することができます。今回はWordPressサイトにおける画像のWebP化の設定方法や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

WebP(ウェッピー)ってどんな規格?

WebP(ウェッピー)はGoogleが開発し導入を推奨している静止画像フォーマット。拡張子はそのまま「◯◯◯.webp」となります。

JPEGなど従来の画像フォーマットと比較すると、2〜3割近く画像を軽量化することができます

A new image format for the Web
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Web用の新しい画像形式
WebPでロスレス圧縮(可逆圧縮)された画像は、PNGと比較してファイルサイズが26%小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34%サイズが小さくなります。)
by:https://developers.google.com/speed/webp

PageSpeed Insights

Googleが提供しているサイトスピード計測ツール「PageSpeed Insights」では、JPEG XR、JPEG 2000などと同様に利用することを推奨されています。

Google神が勧めるのであれば、できる限り導入を検討した方が良いでしょう!

WebPの対応ブラウザは?

WebPは新規の画像形式ということもあり、対応していないブラウザやバージョンがあるのが現状です。

Google ChromeやFirefox、Operaなどでは対応していますが、利用ユーザーの多いSafariや、IEではまだ未対応です(2019年9月現在)。

WebP image format
Photo by:WebP image format

未対応のブラウザではWebPの画像は表示されませんので、「WebPの選択的レスポンス」つまり画像の出し分け設定をする必要があります。例えばWebPに対応しているChromeではWebPを、対応していないSafariでは従来の画像形式であるJPGやPNGを表示するなど。

一見難しそうですが、WordPressサイトの場合はプラグインの導入と「.htaccess」のファイルを少し追記するたけで設定できます。

WebPの設定方法

WebPの設定方法は、WordPressの場合そこまで難しくありません。一つ一つ確認していきましょう!

1. EWWW Image Optimizerの導入

EWWW Image Optimizer
photo by:wordpress公式サイト

まず画像圧縮・最適化のプラグイン「EWWW Image Optimizer」をインストール・有効化します。導入方法は基本的に他のWordPressプラグインと同じです。

このプラグインを活用すると、画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、画像のWebP対応をする設定も可能です。とっても便利ですね。

EWWW Image Optimizerの詳細な使い方については、以下の記事を参考にしてみてください。

画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2019-09-16

2. EWWW Image Optimizerで設定

EWWW Image Optimizer

EWWW Image Optimizerを有効化したら、「WebP」タブを開きます。

[JPG, PNG から WebP]

にチェックし、「変更を保存」をクリック。

EWWW Image Optimizer

するとコードが表示されるので、これを「.htaccess」ファイルに追記します。

この時点では画像のWebP対応が完了していないので、画面右下に赤枠で「PNG」を表示されています。WebP対応が完了すると、これが緑の枠で「WebP」表記に変更される感じです。

3. 「.htaccess」ファイルへ追記

wordpressの.htaccessファイル

サーバー内の「.htaccess」ファイルを、FTPソフトなどを使い開きます。

対象となるWordPressサイトの下記ディレクトリまで移動します。

/home/◯◯/www/wp

.htaccessファイルを見つけたら、ダウンロードします。

先頭に「.(ピリオド)」がつくのはUNIX系OSで不可視ファイルを意味するので、場合によってはダウンロードしてもファイルを確認できない場合があります。その場合は下記のキーを打つと、隠しファイルを表示することができます。

不可視ファイルの表示方法
「command」+「shift」+「.」(MAC)

ちなみにWikipediaでは.htaccessファイルを下記で定義しています。

.htaccess(ドットエイチティーアクセス)とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。
wikipedia

BASIC認証やリダイレクトの設定など、簡単に言えばWebサーバの動作を制御する設定ファイルって感じですかね。記述をミスるとサイトが表示されなくなったりするので、あまり触れたくないファイルではあります……。

<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

wordpressの.htaccessファイル

ファイルの先頭などに先程のコードを記載し、完了したらFTPでサーバー上にアップし上書きします。

こちらのコードの改良版については色々サンプルがあるので、「WebPの選択的レスポンス」について色々調べてみると良いかもです。上記のコードでも問題なく動作はしますので、今回はこのまま進めます。

4. EWWW Image OptimizerでWebP化

EWWW Image Optimizerを有効化し、「.htaccess」ファイルへの追記が完了すれば、これからアップロードされる画像については全て自動的にWebPへ最適化されます。

しかし注意点としては、設定前にアップロードした画像については自動的にはWebPへ最適化されません。ですので手動で最適化する必要があります。といってもほぼワンクリックで完了です!

EWWW Image Optimizer

WordPressの管理画面から、メディア > 一括最適化へ進めます。

EWWW Image Optimizer

「再最適化を強制」を選択し、「最適化されていない画像をスキャンする」をクリック。

EWWW Image Optimizer

続いて「最適化を開始」をクリック。

EWWW Image Optimizer

最適化が開始されていきます。これでこれまでアップロードされた画像を含めてWebp化してくれます!

EWWW Image Optimizer

最適化完了後、先程確認したEWWW Image Optimizerの設定画面の「WebP」タブを確認すると、画面右下に「WEBP」の表示を確認できます。

EWWW Image Optimizer

写真一覧でもWebP対応がされていることを確認できます。

これで無事画像のWebP化は完了です!!

WebPの反映を確認する方法

WebP対応が実際に動作しているのか実際に確認してみましょう。Google Chromeの検証ツールで確認可能です。

WebP対応したWordPressサイトを開き、デベロッパーツールを開きます。

表示 > 開発/管理 > デベロッパー ツール

デベロッパーツールでのWebP対応確認

メニューのNetwork > img

を選択します。

デベロッパーツールでのWebP対応確認

Typeの項目を確認し、「webp」の表示が確認できればWebP化できています。

デベロッパーツールでのWebP対応確認

PageSpeed Insightsでも、「次世代フォーマットでの画像配信」の項目が合格できています!!

また実際にsafariやIEなどWebP対応していないブラウザでは、JPGやPNGなどのフォーマットで画像が表示されているのか(画像形式の出し分けができているのか)必ず実機で確認しておきましょう!

画像データはWebPで軽量化すべし!

ここまでWordPressサイトにおける、画像のWebP対応方法ついて紹介してきました。

サイトスピードを下げる主要因である画像データは、今回紹介したWebP対応するなどできる限り軽量化していきましょう。プラグインを活用すれば導入ハードルは低いですよ。

今回紹介したプラグイン「EWWW Image Optimizer」の使い方については、以下の記事も参考にしてみてくださいね。

画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2019-09-16








Aboutこの記事を書いた人

「Tekito+Style.me」の中の人。都内で働くWebディレクター/マーケター。早稲田大学卒。時々旅人な27歳です。主にサービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。開発やデザインも細々と挑戦してます… 学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。