今更ながら WebP 画像を使うようにしてみる

背景画像に使っている画像がでかいから WebP とかにして改善した方がよいよー、と Lighthouse で出てたのは知っていたが。
特に対応していなかったので、 WebP も使えるようにしてみた。

この辺ちゃんとやってきてなかったな、、、と今更ながら（遅すぎ 
制作のワークフローにちゃんと入れていかないと。
主にフロントエンドだろうけど、変換処理とかいろいろ関係するところあるし。

こちらのサイトのでとりあえず WebP に変換しておく。

WEBP変換ツール (jpg、pngとwebpを相互変換)
https://lab.syncer.jp/Tool/Web...

WebP にした画像アップして .htaccess を書き直す。

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png)$" _image_request
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{SCRIPT_FILENAME}.webp -f
  RewriteRule .(jpe?g|png)$ %{SCRIPT_FILENAME}.webp [T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=_image_request
</IfModule>

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

宮永さんのこちらを参考にさせてもらった。さすが宮永さん。

.htaccessによるWebPの選択的レスポンスとその問題点と改善案 - Qiita
https://qiita.com/miyanaga/ite...

これでとりあえず該当の画像については WebP での表示も確認できた。

png の方を変換する前のキャプチャだけど、該当の画像を WebP に変えるだけで Lighthouse 上の評価は上がった。

まぁ、他に要素もないし、画像1枚の割合が高いだけだった、、という話ではありそうだけど。

WebP の表示を .htaccess での判定にするか、画像を表示するタグ側でやるのかは場合によりそうだけど、普段の制作フローに乗ってなかったのが恥ずかしい。。。
Safari も対応するしちゃんとやろう。。