Blogger:Bloggerでアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズを自動的に読み込んでくれる！すごい！

イントロダクション

Google のブログサービス「Blogger」にてアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズを自動的に読み込んでくれるということに気が付きました。

Blogger:Bloggerでアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズを自動的に読み込んでくれる！すごい！

実際の動作を見てみる

例えば、次のページのトップにある画像について、PC表示とモバイル表示を見てみます。

ノートPCにつないだ外部ディスプレイに映像が映らない時の 9 つの対処法
http://upa-pc.blogspot.com/2014/06/pc-display-connection.html
Dr.ウーパのコンピュータ備忘録

この画像です。

この画像を本文に含むブログページ（上記のページ）をPC表示（パソコンのブラウザで見た時の表示）で見てみると、オリジナルの画像サイズ(横：320 ピクセル x 縦：191 ピクセル)の画像ファイルを取得して表示していることが分かります。

この時の画像の URL は次のようになっています。

PC でブログページを表示した時の画像のURL:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYFieXKKJZkl_Ax8G7JV3Oqe9FUDy2EyOiJxGfyh8CqMrtZWb06eeB3Qs7k4lAS8mL7SHL-6TK6zDReGYoUbN6-F_lovC4tKltsxHOQc50cU5Atiala0MQJj1ojre4497ZkgA3XPolGs/s1600/note-pc_display_port.jpg


次に、その画像を本文に含むブログページをモバイル表示（スマートフォンなどのモバイル端末で見た時の表示）で見てみると、オリジナルの画像サイズではなく、縮小された画像サイズ（横：280 ピクセル x 縦：167 ピクセル）の画像ファイルを取得して表示していることが分かります。

この時の画像の URL は次のようになっています。

モバイル端末でブログページを表示した時の画像のURL:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYFieXKKJZkl_Ax8G7JV3Oqe9FUDy2EyOiJxGfyh8CqMrtZWb06eeB3Qs7k4lAS8mL7SHL-6TK6zDReGYoUbN6-F_lovC4tKltsxHOQc50cU5Atiala0MQJj1ojre4497ZkgA3XPolGs/s280/note-pc_display_port.jpg


このように、Blogger では、モバイル端末でブログを見た時に、そこに組み込まれている画像のファイルサイズが適切なサイズになるように、自動的に調整してくれているようです。

通信帯域が細い・通信が安定しない・通信量の総量規制がある（短期間に通信し過ぎると、速度制限がかけられるなど）といった制限のあることの多いモバイル環境ではありがたい仕組みです。

Blogger でアップロードした画像ファイルの URL の仕組み

さて、それぞれの画像の URL を見て、気づいたかもしれませんが、PC用とモバイル用とで、URL の一部が異なります。

それが、ダウンロードする画像ファイルの画像サイズを環境に応じて柔軟に変えることのできる仕組みによるものです。

Bloggerでアップロードした画像ファイルの、URLのパターン
http://upa-pc.blogspot.com/2015/04/blogger-image-url.html
Dr.ウーパのコンピュータ備忘録

Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法
http://upa-pc.blogspot.com/2015/04/blogger-image-url-change-size.html
Dr.ウーパのコンピュータ備忘録

PC でブログページを表示した時の画像のURLでは、
s1600
となっています。

モバイル端末でブログページを表示した時の画像のURLでは、
s280
となっています。


先頭の s は、

横または縦のサイズのみ指定（画像の横または縦のサイズの長い方が s の後ろのピクセル数になります。縦と横の長さの比率は固定として画像の縦のサイズが決定されます）

という動作をします。

PC でブログページを表示した時の画像のURLでは、s1600 となっているため、画像の横または縦のサイズの長い方が 1600ピクセルとなるように画像サイズが縮小されます。ただし、今回の画像ファイルでは元々のサイズが、横：320 ピクセル x 縦：191 ピクセルのため、そのままのサイズ（原寸大）の画像ファイルとなっています。

モバイル端末でブログページを表示した時の画像のURLでは、s280 となっているため、画像のサイズが縮小され、横：280 ピクセル x 縦：167 ピクセルの画像ファイルとなっています。


ブログエディタ上での画像の URL の表記は、

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGYFieXKKJZkl_Ax8G7JV3Oqe9FUDy2EyOiJxGfyh8CqMrtZWb06eeB3Qs7k4lAS8mL7SHL-6TK6zDReGYoUbN6-F_lovC4tKltsxHOQc50cU5Atiala0MQJj1ojre4497ZkgA3XPolGs/s1600/note-pc_display_port.jpg

となっていたので、Blogger のサーバからユーザのモバイル端末のブラウザへ配信されるときに、動的に画像のURL内の画像ファイルのサイズ指定を書き換えているのではないでしょうか？

まとめ

このように、Blogger では、Bloggerでアップロードした画像なら、環境(PC/モバイル)に応じて適切なサイズの画像ファイルを自動的に設定してくれます。

そのため、PC/モバイル表示ごとに画像ファイルのサイズ指定をする必要がなく、とても便利です。

このブログ内の、他の”Blogger”についての情報を見る