今回は、WEBサイト内にある画像をGoogleが開発した次世代フォーマットである「webP(ウェッピー)」に一括変換して、全てのwebp画像とjpgを出し分ける方法を紹介します。
webp(ウェッピー)とは、Googleが開発した次世代画像フォーマットです。
webpは、jpgよりもpngよりも軽くwebに最適化されたフォーマットで、サイトスピードの改善に繋がると言われています。
詳しくはwikiを参照下さい。
webpは、今までSafariとiOSに対応していなかった事から注目度は低かったが、今後はSafariでも対応する事が発表されて一気に注目度が上がりました。
しかしwebp対応するには若干の技術が必要になってくるので、今回の記事でその方法を紹介します。
今回は、WordPressでの対応パターンと、静的サイトの対応パターンを紹介します。
画像webP化（WordPressパターン）
WordPressでwebpに対応するには、EWWW Image Optimizerと言うプラグインを使用します。
まずはプラグインをインストールして下さい。
プラグインをインストールしたら管理画面左側の設定 → EWWW Image Optimizer → webP（タブ）をクリックして「WebP Conversion」と「JS WebP Rewriting」にチェックします。
基本はこれだけで完了です。
しかしこのパターンは新しいJSを追記しているのでページスピードが若干遅くなるので、私は次の方法をおすすめします。
まずは「WebP Conversion」のみにチェックをします。
次にhtaccessファイルを作成します。
FTPを操作してそのhtaccessファイルアップします。htaccess記述する内容はEWWW Image Optimizerに表示されている以下のものをコピペで大丈夫です。
実際に記述する場所は、以下のようにどこでも大丈夫です。
しかし「IfModule」から「/IfModule」で囲われている部分には入れないようにしましょう。
実際にwebp化されているかを確かめる方法は、EWWW Image Optimizerの設定画面が以下のように「webp」と緑色で表示されていればOKです。
もしくは自身のwebサイトにある画像に対して右クリックをして「検証」をクリックして下さい。そこで表示されるソースコードを見ると「.webp」との拡張子が付いているかが分かります。
▼おまけ
EWWW Image Optimizerのおすすめの設定です。webP以外にも画像の最適化は沢山行えます。
合わせてどうぞ。
画像webP化（静的サイトパターン）
まず前提条件としてwebP画像は自身で用意します。
「jpg webp 変換ツール」などと調べればWEB上にWEBP変換ツールの様なサービスは沢山出てきますので、使いたい画像をwebpに変換してサーバーにアップしておきましょう。
WordPress以外の静的サイトの場合はFTPから下記のコードを記述したhtaccessアップします。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{SCRIPT_FILENAME}.webp -f
RewriteRule .(jpe?g|png|gif)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>
<IfModule mod_setenvif.c>
SetEnvIf Request_URI "\.(jpe?g|png|gif)$" _image_request
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=_image_request
</IfModule>上記のhtaccessをサーバー上にアップするだけで全ての画像が適応されます。理解が出来るなら基本的にこのやり方がおすすめです。
htaccessの操作が難しいといった方は、HTMLの記述を下記のようにしていけばhtaccessをいじる必要はありません。
<picture>
<source type="image/webp" srcset="sample.png.webp" />
<img src="sample.png" />
</picture>picture要素で画像要素を囲ってsource要素で一つの画像について選べるふたつのフォーマットを指定します。 元の画像がsample.pngでWebP版がsample.png.webpです。
この様にする事で、ブラウザ側で対応できる要素が選択されどのブラウザでもリンク切れが起きずに安全に振り分けられます。
例えば、SafariでWEBサイトを閲覧した際は、現状webP非対応なので.pngで表示されます。
Chromeでは対応されているので.webPが表示されます。
メリットとしては、HTMLの書き換えだけなので簡単で誰でも出来る事です。しかしデメリットとし作業は一つ一つこなすので量が多いと相当な時間がかかるという点があります。
webP対応をするならWEBサイト上全ての画像を対応しないと効果が見えないので、基本全て対応して下さい。
そうなると作業量が尋常じゃ無い場合はhtaccessについてを少し学んだ方が早いのかもしれません。
以上が「サイト内の画像を全てwebp(ウェッピー)にして出し分ける方法」でした。
因みに当サイトの画像を全てwebP化した所、ページスピードインサイトのスコアがスマホ97点、パソコン99点とかなりの高得点までいきました。しかもいつも気になっていた「次世代フォーマットでの画像の配信」とのフィードバックが無くなってスッキリしました。
これは自己満ですが、実際に体感速度も以前より上がってユーザビリティの向上は感じています。
是非、皆さんも対応してみて下さい。
