CocoonでWebP(ウェッピー)に対応するには? PageSpeed Insightsで「次世代フォーマットでの画像の配信」の警告に対処

ウェブサイトのページ読み込み時間が遅い問題で、実際にどこに原因が有るか解析してくれるツールに「PageSpeed Insights」https://developers.google.com/speed/pagespeed/insights/ が有る。

改善できる項目として「次世代フォーマットでの画像の配信」の項目が表示される。

CocoonでWebPに対応するには? PageSpeed Insightsで「次世代フォーマットでの画像の配信」の警告に対処

「JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます」と表示されている。

JPEG 2000はiPhoneの「safari」のブラウザでのみ表示可能。

JPEG XRはマイクロソフトのブラウザ「Edge」でのみ表示可能。

WebPは「Edge」「Chrome」、さらに「Firefox」などのブラウザにも対応しており、対応ブラウザが多いが、「safari」には未対応だった。

しかし、WebPは「safari」にもついに対応する予定となっており、2021年以降は、「次世代フォーマットでの画像の配信」には『WebP』が使われて普及するに違いない。

Cocoonで画像フォーマット「WebP」(ウェッピー)を利用するには?

では、WordPressのテーマの「Cocoon」で“WebP”(ウェッピー)の画像フォーマットに対応させるにはどうすれば良いのか試してみた。

※『WebP』は“ウェブピー”では無く“ウェッピー”と読む

WordPressのテーマの「Cocoon」で“WebP”の画像フォーマットに対応させるにはプラグインの「EWWW Image Optimizer」(無料で利用可能)を導入する方法があるようだ。

プラグインの新規追加で「EWWW Image Optimizer」を検索し、「今すぐインストール」をクリックする。

※「EWWW Image Optimizer Cloud」の方は画像圧縮時にサーバー負荷を低減させる事が出来るが、APIキーを購入する必要が有る(有料)ので注意

インストールしたら「有効化」をクリックする

WordPressの管理画面の「設定」>「EWWW Image Optimizer」をクリックし、「WebP」タブをクリックします。

「WebP変換」のチェックボックスにチェックし、「変更を保存」をクリックします。

画面下に「 .htaccess 」に挿入出来るリライトルールが表示される。

この「 .htaccess 」を設定すると、「WebP」に対応しているブラウザには『WebP』の画像フォーマットで表示し、対応していないブラウザには「JPEG/PNG/gif」形式での画像の配信となる。

「リライトルールを挿入する」をクリックすると「 .htaccess 」に自動で挿入される(挿入出来たら“挿入成功”と表示)。

ブラウザをリロードするなりし、緑色で「WEBP」と表示されていたら画像フォーマット「WebP」が利用可能だ。

※ブログカードのキャッシュ画像はWordPressのテーマがインストールされているドメインから配信される為、画像はサブドメインから行われていても、メインのドメイン側にも設定が必要です

既にアップロードした画像を圧縮し画像フォーマット「WebP」として配信するには?

既にアップロードした画像は「WebP」にはこのままでは未対応。

「WebP」に対応させてファイルサイズを圧縮する事が必要な為、WordPressの管理画面の「メディア」>「ライブラリ」をクリックしてメディアライブラリを開きます。

ファイルの右側に「画像最適化」の項目が有り、“今すぐ最適化!”をクリックします。

※新規にアップロードする画像ファイルは、アップロードすると自動で最適化され「WebP」の画像が作成されます。

メディアのURLが異なる場合は?

通常、画像をWordPressの「メディア」の「新規追加」からメディアのアップロードを行うと、

ドメイン名/wp-content/uploads 以下にアップロードされます。

しかしながら、中規模サイト・大規模サイトに成長させて行きたい場合は、画像は画像専用のドメインから配信するのが常識。

例えば、オリコンニュースの場合は、ドメイン名は「www.oricon.co.jp」だが、画像は「contents.oricon.co.jp」のサブドメインを使っているのがわかります。

つまり、中規模サイト・大規模サイトに成長させて行きたい場合、画像はサブドメインを使うのが常識。

サブドメインのルートディレクトリにも「.htaccess」のファイルを置く必要が有ります。

「.htaccess」ファイルをサクラエディタなどのテキストエディタで作成し、以下を記述してFTPでアップロードする必要が有ります。

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

ただ、一部のお客様からは画像ファイルを圧縮すると、画像の色味が変わってしまう為、リサイズ・圧縮・トリミングはせず、そのままJPEG形式で掲載するようご要望を頂く場合があります。

その場合は、もう1つサブドメインを作成し、「.htaccess」ファイルに以下を追記します。

RewriteCond %{HTTP_HOST} ^img\.(.*)$ [NC]

当サイトの「のりまきラボ」では画像ファイルは「/wp-content/uploads」以下に生成する事に違いは無いが
「img.lab.norimaki.tv/」と「img2.lab.norimaki.tv/」の2つのサブドメインで表示しているようにして、

サブドメインの「img」の方が「WebP」のリライトに対応し、「img2」のサブドメインの方はリライトしないようにし、

「/wp-content/uploads」の直下(サブドメインのルートドメイン)に以下の「.htaccess」ファイルをアップロードしている。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Options -Indexes

RewriteEngine On

RewriteCond %{HTTP_HOST} ^img\.(.*)$ [NC]

RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1,L]

Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

上記はサブドメインが“img”で、画像ファイルがJPEG、PNG、gif形式だと、WebPのファイル形式にリライトして表示(WebPに対応してない場合はWebP画像は表示しない)。 サブドメインが“img”ではない場合(つまり“img2”だった場合はWebPの画像ファイルにはリライトしないという設定になる。

WordPressでは、メディアを追加する画面で「URLから挿入」の項目が有り、そこに画像のURLを指定して設定すると、従来のJPEG形式で表示させる事が出来る。

WebPで表示した場合の例

URLは https://img.lab.norimaki.tv/2020/08/webp13.jpg


https://img.lab.norimaki.tv/2020/08/webp13.jpg.webp

にリダイレクト表示されます。

JPEGで表示した場合の例


URLは https://img2.lab.norimaki.tv/2020/08/webp13.jpg

になります(サブドメインは「img2」)。

本当にWebPに対応してるのか確認する方法

WebPに対応しているのか確認する方法として、Google Chromeのブラウザでは「デベロッパーツール」で確認する事が出来る。

Windowsの場合は「Google Chromeの設定」>「その他のツール」>「デベロッパーツール」(「Ctrl+Shift+I」キーを同時に押す事でも表示)で開き、「Network」メニューの「img」をクリックすると、Type欄に「webp」と表示されていることで判別が出来ます。

※ブラウザキャッシュに残っている場合はChromeの場合は、「Google Chromeの設定」>「設定」>「プライバシーとセキュリティ」の「閲覧履歴データの削除」をクリックし、「キャッシュされた画像とファイル」にチェックし、「データを削除」するとChromeブラウザのキャッシュを削除する事が出来ます(Windowsの場合は「Ctrl+Shift+Delete」キーを同時に押す事で「閲覧履歴データの削除」の画面を表示させる事が出来ます。)

タイトルとURLをコピーしました