Bloggerの投稿のWebP画像の提供の設定の利点と欠点

Bloggerに非常に素晴らしい機能が追加された。投稿のWebP画像の提供が管理画面の設定から簡単に使えるようになった。画像ありの記事の表示速度の高速化に繋がって快適さが増す。 Bloggerの設定のWebP画像の配信

設定｜Blogger

僕は自分のプログラムで、以前から投稿のWebP画像の提供を自動化していた。Bloggerの公式のものが完璧ならば余計なプログラムは外したいと思って調べた。すると欠点があることが分かって取り替えることは止めた。記事の表示速度を遅くするという逆効果を与えるものなので、できるかぎり、避けて使うようにした方が良いと思う。

関連ページ

Bloggerの投稿画像の遅延読み込みの設定の利点と欠点

BloggerのWebP画像の提供の設定Bloggerの管理画面の設定の投稿に「WebP画像の提供」のスイッチが付いている。

WebP を使用して投稿の画像を提供します

設定｜Blogger

記事／追加ページの画像ファイルが軽量圧縮のWebP形式に変換されて表示される。BloggerのWebP画像の提供の方法管理画面の設定を「WebP画像の提供」をオンにすると全ての投稿画像の画像URLに「rw」のパラメーターが付けられる。Bloggerで使用できる画像ファイルはjpeg／jgpとgifとpngの三種類で、それらが全てwebpに変更される。そして画像URLのパターンが時期によって変わる場合があるけれども新旧とも例外なく、webpファイルになる。Bloggerのサーバーからブログのソースコードに最終的（ブラウザが解釈する一般的なものへ変換されるとき）に自動的に変換されるものだから記事／追加ページに画像を追加した時点では何もない。投稿の編集画面のHTMLビューから画像URLのパラメーターに手動で「rw」を付けてwebpファイルに変換していると重複せずに一つだけパラメーターの末尾に付くようになる。ブログで表示される投稿画像の画像URLの末尾のファイルタイプは元のままだとしてもダウンロードするとwebpに変わっていてWebP形式だということが確認できる。BloggerのWebP画像の提供の利点記事／追加ページの投稿画像をWebP形式に変換すると画像の品質を保持したまま、容量を圧縮して減らすことができるので、表示速度の高速化が可能になる。三つの画像形式のWebPへの軽量化の目安

jpeg／jpg

三割程度の軽量化。

gif

基本的に変わらない。

png

軽量化か増量化（画像によって増減の割合は大きく異なる）。

投稿画像のWebP形式への変換で確実に軽量化の効果が得られるのはjgeg／jpgのみで、gifはやってもやらなくても大方は変わらず、pngは軽量化だけではなく、増量化することもあるので、一律にやると表示速度の低速化を招いてしまう危険がある。BloggerのWebP画像の提供の欠点WebP画像の提供で問題になるのはpngファイルの画像を使ったときに増量化が起きることがあり、却って表示速度を下げてしまい兼ねない。どんなpngファイルの画像が軽量化、または増量化するかは良く分からない。実際に画像URLのパラメーターに「rw」を付けたときと付けないときの二つの場合の画像を表示してダウンロードして容量を比較するしかない。WebP画像の提供を使うと画像URLのパラメーターに必ず「rw」が付いてWebP形式に変わるけど、しかし投稿の編集画面のHTMLビューから予め「nw」を追加することによって個別に除外することもできる。Bloggerの画像URLのパラメーターの位置

画像URLの末尾にファイルタイプがある場合（現行版）

https://ドメイン/ディレクトリー/パラメーター/ファイル名.ファイルタイプ

Bloggerの画像URLの例

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGv9WgynaCUrGHiIrMkWonqMnnd0aXZjdTRW7XpZu-A_d_3O8jWYFf2IYP5XkaC3UWV9hs5HQwuSw1o64r4PHJHjAMNwSnvAomnQ-lpKBq_Cy4Bb-7BFLhS06NyBceOdN2y5puaFjME_h6Ms-7NR6FOv21rrb_dt8IH9KJKJKSWVyuiUbNGpjyuKlSx1-N/s1600/awadama.jpg

画像URLの途中の「s1600」などが画像パラメーターになる。

全ての画像URLに画像サイズを指定する画像パラメーターが必ず、一つ以上、付いている。

画像URLの末尾にファイルタイプがない場合

https://ドメイン/ディレクトリー=パラメーター

Bloggerの画像URLの例

https://blogger.googleusercontent.com/img/a/AVvXsEirRJXBvqm4B9RNF-zGSwByfqGovPvGZlnfJk31V0fGyYzgbyPYcP7ZjTHlEWgRNZ3vJtMzgV8NOM7Kv1BcNQLg0Sl_TzL8KTrqjW8Q45TGThutW82CsiunQe0M8V7uOVhk6isYXDhepdt9pObQLwLxHzC4XB4JtIIEzX-u8A-7Pay2sMaFcuvG6hKM=s320

画像URLの最後の「=s320」などが画像パラメーターになる。

画像によって画像パラメーターが付かないものもある。

投稿画像の画像パラメーターに「nw」を追加するとWebP形式への変換を止めることができて設定のWebP画像の提供に対しても有効だと分かった。カスタマイズは前のパラメーターがあるものは「nw」に半角ハイフン（-）を付けて「-nw」として記載する。または前のパラメーターがないものは「nw」に半角イコール（=）を付けて「=nw」として記載する。Bloggerの画像パラメーターに「nw」を記載したサンプル

画像URLの末尾にファイルタイプがある場合（現行版）

Bloggerの画像URLの例

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGv9WgynaCUrGHiIrMkWonqMnnd0aXZjdTRW7XpZu-A_d_3O8jWYFf2IYP5XkaC3UWV9hs5HQwuSw1o64r4PHJHjAMNwSnvAomnQ-lpKBq_Cy4Bb-7BFLhS06NyBceOdN2y5puaFjME_h6Ms-7NR6FOv21rrb_dt8IH9KJKJKSWVyuiUbNGpjyuKlSx1-N/s1600-nw/awadama.jpg

画像URLの末尾にファイルタイプがない場合

Bloggerの画像URLの例

https://blogger.googleusercontent.com/img/a/AVvXsEirRJXBvqm4B9RNF-zGSwByfqGovPvGZlnfJk31V0fGyYzgbyPYcP7ZjTHlEWgRNZ3vJtMzgV8NOM7Kv1BcNQLg0Sl_TzL8KTrqjW8Q45TGThutW82CsiunQe0M8V7uOVhk6isYXDhepdt9pObQLwLxHzC4XB4JtIIEzX-u8A-7Pay2sMaFcuvG6hKM=s320-nw
https://blogger.googleusercontent.com/img/a/AVvXsEirRJXBvqm4B9RNF-zGSwByfqGovPvGZlnfJk31V0fGyYzgbyPYcP7ZjTHlEWgRNZ3vJtMzgV8NOM7Kv1BcNQLg0Sl_TzL8KTrqjW8Q45TGThutW82CsiunQe0M8V7uOVhk6isYXDhepdt9pObQLwLxHzC4XB4JtIIEzX-u8A-7Pay2sMaFcuvG6hKM=nw

ブログに表示される投稿画像のパラメーターは「rw-nw」という状態になってWebP画像の提供を設定した効果は打ち消されることになる。手動で一つずつカスタマイズしなくてはならないのが大変なので、面倒ならば増量化されるかも知れないpngファイルの画像を使わないようにする。サイトのpngファイルの画像はその他の二つよりも高画質けれども容量が嵩んで表示速度は下がるので、アイコンやバナーなどのサイズが小さなものか簡単な絵や図などの容量が小さなものに使うのが良いと思うけど、とにかく数を減らすほどにカスタマイズも楽になるのは間違いない。Google検索のサイト評価にも好影響を与える投稿のWebP画像の提供は表示速度を高めて訪問者を快適にするだけではなく、Google検索のサイト評価にも好影響を与えてくれるのが有り難い。

Core Web Vitals は、ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザーエクスペリエンスを測定する一連の指標です。検索結果でのランキングを上げ、全般的に優れたユーザーエクスペリエンスを提供できるよう、サイト所有者の皆様には、Core Web Vitals を改善することを強くおすすめします。Core Web Vitals は、その他のページエクスペリエンス要素とともに、Google のコアランキングシステムがランキングを決定する際に考慮する要素です。詳細については、ページエクスペリエンスの Google 検索結果への影響についてをご覧ください。

Core Web Vitals と Google 検索の検索結果について｜Google 検索セントラル

WebP画像の提供はGoogle検索の検索結果のサイトの順位付けのためのアルゴリズムのコアウェブバイタルというサイトのパフォーマンスの指標に含まれている。表示速度が速いサイト、すなわち初回画面が直ぐに表示される、ボタンなどの準備が速やかに整う、後から動いてクリック／タップを外されないといった利便性の高いサイトは検索結果で落とされ難くてアクセスアップに役立つといって良い。