KUSONEKOの見る世界

Blogger で WebP を使用してみた

時々、ブログの表示速度を計るため、GoogleのPageSpeed Insightsを利用しています。

その結果で指摘を受けるのが、次世代フォーマットでの画像の配信 という項目で、ページ内の画像フォーマットを軽い物に変えろというものです。

JPEG 2000、JPEG XR、WebPのどれかを使用する必要があるのですが、
デバイス・OS・ブラウザなどでそれぞれ対応しているフォーマットが違うため、簡単には対応できません。

一応、一番多く対応しているのが、WebPという形式でこれを使えば良さそうです。
しかしmacOSやiPhoneでは対応していないのが痛いところです。
※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を変更した物。
JPEG画像
JPEG画像
WebP画像
WebP画像
右側の画像を右クリックして画像を保存してみると、拡張子が.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;
   }
}

YuushaExa2019年8月4日 7:19

Nice

安井 真守2020年11月30日 22:20

2020年6月現在で、iPhone(Safari 14)もWebP対応を果たしたらしいので、これで心置きなく完全移行できますね。
全てのBloggerユーザーに利便性をもたらす記事をありがとうございます!!