PageSpeed Insightsを見たら、ブログのモバイルの表示の点数が悪いことに気づきました。
どうしたものか。

中でも、画像読み込みの処理にまぁまぁ時間がかかっていることがわかりました。

対策として、WebPという画像形式を使うことで、画像の読み込みがかなり早くなるようです。



忙しい人のための結論

Bloggerで、


のような形でアップされている画像の、s1024のような画像サイズを指定している部分を、

s1024-rwと書き換えると、WebPに早変わり。あら不思議。


試しに↓をダウンロードしてみてください。
タブにはthumbnail.pngと出ますが、thumbnail.webpという形式でダウンロードできるはずです。


webpのダウンロード





そもそもWebPとは？

教えて、ChatGPTさん！

WebPは、Googleが開発した静止画および動画のための画像フォーマットです。WebPは、高圧縮率と高品質な画像を提供することを目的としています。

WebPは、従来のJPEGやPNGよりも小さなファイルサイズを持ちながら、同等またはそれ以上の画質を提供することができます。これは、WebPが効率的な画像圧縮アルゴリズムを使用しているためです。特に、写真やイラストなどの複雑な画像において、WebPは優れた圧縮効果を発揮します。

WebPはウェブ上の画像配信に最適化されており、ウェブサイトの読み込み速度を向上させることができます。また、透過画像やアニメーションGIFの代替としても利用されます。

WebPは広くサポートされており、主要なウェブブラウザ（Google Chrome、Mozilla Firefox、Microsoft Edgeなど）や一部の画像編集ソフトウェアで使用することができます。

なお、WebPは静止画用のフォーマットであるWebP（.webp拡張子）と、動画用のフォーマットであるWebP Animation（.webp拡張子）およびWebP Video（.webm拡張子）に分かれています。



対応ブラウザは？

WebP対応ブラウザ

以前はSafariが対応していませんでしたが、macOS Big Sur以降対応するようになりました。

IEで動かないですが、彼はお亡くなりになったので、もう心配不要ですね( ˘ω˘ )

Can I Useで現在のWebブラウザのカバー率を見ても、安心して使って大丈夫そうです。



実際どれくらいサイズが変わる？

webpとjpg/pngのサイズ比較

冒頭にあげたサムネイル画像は、

png: 488KB vs.  webp: 422KB

でした。元々の画像に圧縮をかけていたので、そこまで劇的な変化は見られなかったようです。


が、これまでアップしてきた画像を何枚か抜粋して、webp化して比較すると、一目瞭然でした。

png: 579KB vs.  webp: 393KB
jpg: 1.2MB vs.  webp: 693KB
jpg: 2.9MB vs.  webp: 979KB

半分以下になってるものもあるね...！＼( 'ω')／
どちらかというとjpgに使った際、こうかはばつぐんだ！という印象です。

スマホで撮った写真は、そのままアップするとかなりサイズが大きいjpgですが、これをwebpにするのが良さそう。



でも、手動で変えるのタルくね？

ということで調べたら、以下の方法を見つけました。


うっかりミスで画像が表示されなくなってしまうのも困りものなので、慎重に実装していきたいです。



まとめ

BloggerでWebPを導入するのは、意外と簡単だと分かったのが収穫でした。



参考