BLOGGERで簡単にWebP形式が使用可能だとは…知らなかった

いままでブログに投稿していた画像の圧縮とか全くしていませんでした。そもそもJPEGも圧縮された形式なわけだし…なんでもいいからブログが書きたい！という考えで記事を書いていましたので。しかしPageSpeedInsightsを使用したときに画像の圧縮形式を変更するように指摘されていたので多少は気になっていました。変更することで改善する割合が結構なものでしたし。ただものぐさな僕は別にいいか…と頭の片隅に追いやっていたわけですが、最近OGP画像に関して考えが変わったことで画像圧縮もきちんとしようかな？と考えるようになりました。OGP画像はわざと余白を作ることにモヤっとした気持ちがあったのです。文字入れをしようとしたら尚更に余白を作るのが嫌になったので「もう気にしないぞ！」と気持ちを切り替えました。スッキリ。

ただ画像圧縮として現状一番良さそうなWebP(ウェッピー)という形式はブラウザが最新の状態ならば対応できるようですが、更新せずにブラウザを使用しているひとに対しては未対応の可能性があるようでした。対応しているならWebP、未対応ならJPEGといった感じで切り替わるように設定しておけばいいかな？とも考えましたが画像を二つ用意するのが面倒だな…と思い断念。ここ数日はオンラインでJPEGのまま容量を縮小できるサイトで画像を圧縮していました。正直それでも十分に満足していたのですが、先日フォロワーの方がWebPについてツイートしていたのを見て何気なく検索してみると有益な情報を発見！それが以下の記事。

Bloggerでは画像URLを変更することでサイズを調整したりできるわけですが、画像URLの「s320」みたいな数字がある部分に「s320-rw」という感じで「-rw」を付与することでなんとWebP形式に変更できるというのです！これは驚き。いや本当に。Bloggerのヘルプページで「WebP」と検索してみると確かにそういう情報が記載されていました。いやぁ～あまり興味がなかったのでちゃんと検索していませんでしたが、こんなに有益な情報があったとは…。ただまだ半信半疑だったのでプロフィール画像部分を以下のように変更。

<picture>
 <source srcset=".../s320-rw/image.jpg" type="image/webp" />
 <img src=".../s320/image.jpg" />
</picture>

確認してみると確かにWebPになっていました。ちなみに<picture>については以下の記事で詳しく紹介されていました。

WebP用に新たに画像を用意する必要がないとなれば…やらない手はないですね。デメリットといえばコードを書き換える手間くらいですし。ちなみにLazy Loadはimgタグ内に書いておけばsourceタグの方にも適用されるようです。まぁ…過去記事に関しては面倒だから画像サイズの大きそうなやつだけ変更するか。あと問題があるとすればトップページの記事一覧などのサムネイル画像。いまはfirstImageUrlで記事の一番目の画像URLを取得してresizeImage()関数で画像サイズが調整されているわけですが「-rw」を付け加える方法がないのです。解決する方法としては記事の最初の画像に「-rw」付け加えたうえでWebP対応ブラウザならfirstImageUrlをそのまま表示。未対応ならresizeImage()関数で調整したものを表示とする。あるいはJavaScriptで「-rw」を追加したURLを作成する方法などがありそうですね。JavaScriptを使っちゃうとあまり速度は変わらないんじゃないか？という気もしますが。どうしようかなぁ。トップページはしばらく放置でいいか…。気が向いたら考えよう。