Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法

イントロダクション

Google のブログサービス「Blogger」でアップロードした画像には、ある種の規則性があることを「Bloggerでアップロードした画像ファイルの、URLのパターン」にて記載しました。

その中で、画像を取得するための URL 内に、画像のサイズを指定する文字列が含まれていることに言及しました。

そして、一つの画像をアップロードしておけば、その画像のURLに含まれる画像のサイズを指定する文字列を変更することで、サーバサイドで任意の画像サイズに加工してくれるため、ネットワーク帯域の節約になり、表示を高速化することが出来るという点も言及しました。


そこで、今回はBloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法とそこで指定できる画像サイズと種類についてまとめてみました。

Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法

指定方法

Blogger でアップロードした画像の URL には、次のような規則があります。

例）次の画像の場合
画像

画像のURL
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0EZ2VEQccPi8ZOloaWMSRv2WvAIlrI2smCJTNZcP2rgzPyB9ncFFWMdSCUF9uiOupNWBfytYcZyYKrQY-EcF11O8Y5e7KTrm1dCFmMr1TpxKLxffGfsvzTUCgQSnlPBZs6W_WSO1e-M/s1600/simple_eye_catch_1_1_0_TEST.png

画像のURLの規則
http://[1].bp.blogspot.com/[2]/[3]/[4]/[5]/[6]/[7]


ここで、[6] の部分が、画像のサイズを指定している部分です。

なお、[1]～[7]の詳細については、「Bloggerでアップロードした画像ファイルの、URLのパターン」をご覧ください。

指定できるサイズ

横または縦のサイズのみ指定と、縦横の長さを指定する方法があります。

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

指定方法：
s横幅のサイズ

例）s400

画像の横または縦のサイズの長い方の長さが、指定のサイズに満たない場合には、原寸大のサイズ（元の画像のサイズ）の画像が返されます。

縦横の長さを指定（画像の横・縦のサイズが s の後ろのピクセル数になります。画像は画像の中心に合わせて、正方形にカットされます。）：

指定方法：
s横幅のサイズ-c

例）s400-c


画像の縦・横の長さが、指定のサイズに満たない場合には、指定されたサイズに合わせて画像が拡大されます。

そのため、元のサイズが小さいのに、大きなサイズとして縦・横の長さを指定した場合には、無駄に大きな画像が返されることになります。


上記より、画像の縦・横の長さを指定する場合には、横幅のサイズのみ指定の文字列の最後に"-c"を付ければよいことが分かります。

指定できる長さ

現在試してみたところ、1px 単位で画像の横幅、もしくは画像の縦・横のサイズを指定することが可能でした。

インターネット上の情報を見てみると、用意されたサイズ以外表示できないというような情報も見つかりました。

もしかしたら、仕様が変更されて、1px 単位で画像を表示できるようになったのかもしれません。


追記：
仕様変更によって、1px 単位で画像のサイズを指定できるようになったようです。

Blogger で画像の表示サイズを変更する方法（改） | クリボウの Blogger Tips 
http://www.kuribo.info/2010/10/blogger_10.html

s 以外の指定できる文字

上記では、

s横幅のサイズ

という形式で画像サイズを指定しています。

どうやら、s 以外にも指定できるものはありそうです。
現在、調査中です。


*** メモ　ここから ***
もしかして、s 以外にも指定できるものが無いだろうかと探したところ、s の代わりに、以下の文字が指定できました。

w : 横の長さ(px)で画像サイズを指定
h : 縦の長さ(px)で画像サイズを指定

b : bに続く数字px数の黒い帯を画像に追加し、元の画像サイズで画像を出力

URL : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR0EZ2VEQccPi8ZOloaWMSRv2WvAIlrI2smCJTNZcP2rgzPyB9ncFFWMdSCUF9uiOupNWBfytYcZyYKrQY-EcF11O8Y5e7KTrm1dCFmMr1TpxKLxffGfsvzTUCgQSnlPBZs6W_WSO1e-M/b20/simple_eye_catch_1_1_0_TEST.png
を画像化したもの

そのほかにも、a から z の間でエラーにならずに取得できた画像がありますが、見た目に変化が見えなかったため、どういう効果があるのかは不明です。

m はエラー画面すら表示されず、ファイルがありませんでした。


なお、これらは実際に試してみたらできたというものであり、使用可能な仕様かどうかは分かりません。

*** メモ　ここまで ***

参考文献

Blogger で画像の表示サイズを変更する方法 | クリボウの Blogger Tips 
http://www.kuribo.info/2008/01/blogger.html

まとめ

このように、Blogger ではアップロードした画像をブログ上で利用する際には、その時の画像サイズを URL によって指定することが可能です。

この仕組みを利用して、快適なブログづくりをしていきたいものです。

誰でも手軽に・簡単に画像サイズを指定できる方法の提供

細かいことは考えず、簡単に Blogger の画像の URL の画像サイズ指定を、任意のものに変更するための Web サービスを作ってみました。

Bloggerでアップロードした画像を任意のサイズで取得するWebサービス
http://upa-pc.blogspot.jp/p/blogger-image-size-changer.html

その他

Picasa (Webアルバム)やGoogle+関係などで、上記と同じようなフォーマットで画像のサイズが URL で指定できるものがあるようです。

それらでは次のようなドメインで画像の URL が指定されています。

*.ggpht.com
*.googleusercontent.com


これらについては、現在調査中です。

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