Blogger で WebP を使用してみた

※macOS Big Sur、iOS 14以降にWebPに対応しました

その状況で取った対策を記載しておきます。

BloggerでWebPを使用する方法

まず、このBloggerではWebP画像をアップロードすると別の形式に変換されてしまいます。

これでは対応できないかと思いましたが、Bloggerにアップロード済みのJPEGやPNGの画像をWebPに変更する方法がありました。
それは、画像のURLの一部を変更する方法です。

URL内に"s1600"や"s1600-r"という文字列があると思いますが、それを"s1600-rw"に変更するだけです。
これで、JPEGやPNGがWebP形式に変わります。（拡張子がjpgやpngのままですが、WebPとして解釈されています。）
PNGのアルファチャンネル（透過）も問題ありません。

実験

左側がBloggerでアップロードしたJPEG画像。
右側がアップロードしたJPEG画像のURLを変更した物。
右側の画像を右クリックして画像を保存してみると、拡張子が.webpになり、WebPと解釈されていることが分かります。

また元の画像とファイルサイズを比較すると、11.9 KB から 8.77 KB になっており、小さくなっていることが分かります。

ただし、右側の画像は、macOS Big Sur、iOS 14以前では表示されません。

追記：仕様変更後の方法

2021年末ごろから、画像のURLの仕様が変わりました。
"s1600"などの文字列がURLの最後のイコールの後に移動しました。
今までと同じく、その後に"-rw"を付けることで対応が可能です。

https://blogger.googleusercontent.com/img/(略)=s1600
↓
https://blogger.googleusercontent.com/img/(略)=s1600-rw

トップ絵のWebP化

ブログのトップ絵をWebP化しましたが、もちろんiPhoneやmacOSへの対策もしています。
以下のタグを使うと場合分けができます。

<picture>
  <source srcset="//.../s1600-rw/image.png" type="image/webp" />
  <img src="//.../s1600-r/image.png" />
</picture>

WebPに対応したOS・ブラウザは上のWebP画像、それ以外は下のPNG画像が表示されます。

背景画像の対処

当ブログの背景画像は、CSSのbackgroundで指定しています。
これを場合分けするのは出来ないようです。

代わりに、JPEGではありますがモバイルの場合は小さい画像を表示するようにしています。
ちなみに896pxは、iPhone XS Max/XR の縦幅です。

.body-wrapper{
   background: url(//.../image.jpg) repeat fixed top left;
}
@media screen and (max-device-width:896px){
   .body-wrapper{
      background: url(//.../image_896.jpg) repeat fixed top left;
   }
}