前置き：Bloggerで行われているGoogle フォトの画像表示（読み飛ばしてもOK）

Bloggerで画像をアップロードすると、その画像はGoogle フォトに保存され、Google フォトの他の画像同様に、自由に画像を呼び出してBloggerのページで利用できます。ブログに自分で画像を貼るときは、貼り付ける際のオプションで、画像サイズを何段階か（小・中・大・特大・元のサイズ）から指定できます。このとき、Bloggerのページに表示される画像は、自分がアップロードした元の大きな画像そのものではなく、Googleフォト側で自動的に画像を縮小し、画像が軽くなるようにピクセル数を減らしたものです（例：元の画像が1600ピクセル×1200ピクセル、1メガバイトぐらいあっても、これをサイズ「小」で呼び出したとき、ページに貼り付けられる画像は200ピクセル×150ピクセル、たったの 50キロバイトだったりするわけです）。他のブログサービスでもこういう機能があるのかどうか自分は知らないのですが、これは非常に便利です。

また、このブログではBloggerの「動的ビュー」の表示モードを使っていて、「Flipcard」のサムネイル表示を見ると気づくのですが、画像を呼び出すとき単に画像を縮小するだけでなく、画像の一部を自動的に正方形にトリミングする機能も持っています。これは、縦写真と横写真が混在するとき、サムネイル画像を整列させるには非常に便利な機能です。こういった画像のサイズ変更やトリミング などは ブログ側で css などを使えば指定できますが、この Google フォトの機能を使えばもっと簡単にできるので、これらを自分でもうまく使えたら… と思いました。

ちょっと調べてみたのですが、Blogger でも Google フォトでもこの機能に関する公式の説明は見つけられませんでした。そこで、自分でいくつか試してみた結果をこのページに残しておきます。海外の質問サイトでこれに関するやりとりがあり、これも参考にしました（参考1）。 念のためのご注意ですが、下の内容は Google フォトや Blogger の公式の情報を元にしたものではありませんので、解釈に間違いがあったり不完全だったりするかもしれないのと、今後いつ仕様が変わるかもしれないことにご注意ください。このページの情報を読んで試してみる場合、筆者は責任を持てませんので、自己責任でお願いいたします。

Google フォトの画像のURL

さて、ここから具体的な話です。下の画像（ヤブツルアズキ）は、Google フォトにアップしてあります。画像をクリックすると、画像だけが表示されるようにしています。この画像をサンプルにして解説します。この画像の元の画像サイズ（自分がアップロードしたサイズ）は 1024 ピクセル× 768 ピクセルです。

Blogger からこの画像を呼び出すための URL は、 https://4.bp.blogspot.com/-rzobd6k5xcM/UkA8J8hlgFI/AAAAAAAADn4/3UfVCcxvYf0/s1600/noazuki130922-578c.jpg です（Google フォトを直接開くときの URL は、googleusercontent.com ですが、下の話はこの URL でも同じように該当します）。長ったらしいURLですが、最後のスラッシュ以降（緑色）が自分がアップロードした際の元のファイル名です（ファイル名が「ノアズキ」になっていて、画像のアップ時にはノアズキだと思っていたことがファイル名でバレています・笑）。URL の途中だらだらと続く意味不明の文字列は画像ファイルの置き場所を示す変更不可の部分ですが、最後の方にある /s1600/ という 2つのスラッシュ / で囲まれた部分が、画像を呼び出す際の画像サイズオプションを指定する部分で、変更可能であることがわかりました。

さて、ここで使えるオプションには、下のようなものがあります。

文字	意味
s(数字)	画像サイズ指定。 (数字) にはピクセル数を指定します。指定したピクセル数の正方形に、画像がぴったり収まるようにサイズ変更される。つまり画像の長辺（縦横のうちの長い方）の長さを指定することになります
w(数字) または h(数字)	画像のサイズ指定。 (数字) にはピクセル数を指定します。幅の指定が w、高さの指定が h ※ c が同時に指定されていないときは画像をその大きさまで縮小し、c が指定されているときは画像がそのサイズになるように切り取る
c	画像の中心からトリミングする。画像の縦横の長い方を切り取って、正方形にして表示するが、画像の中心を基準に、左右対称（または上下対称）に切り取る ※ s w h と併用可
p	画像解析によるトリミング指定。画像の縦横の長い方を切り取って、正方形にして表示するが、トリミングの中心は、画像を解析して「写っているもの」ができるだけ入るように位置が調節される。 ※ s とのみ併用可
-	複数のパラメータを同時に使うときに、パラメータを区切る記号

ここまでが今回取り上げるオプションです。それ以外にも、下のようなオプションがいくつかありました。

文字	意味
d	呼び出された画像をブラウザで表示するのではなく、ダウンロードする
g	呼び出された画像を表示するのではなく、その画像を指定したタイル情報（TileInfo）の xml ファイルを開く
h	呼び出された画像を単独で表示するのではなく、画像を埋め込んだ html ファイルとして開く

これらは、アルファベットをしらみつぶしに調べて判明した範囲のものですが、指定したときエラーにならないアルファベットは他にもありました。たとえば、a b f k o q r t v no などはエラーにならないので、何か機能が割り付けられているのだろうと思います（が不明です）。

なお、画像の縦横比（アスペクト比）が変わるような指定は見つけていません。すべての指定で、元の画像の縦横比が維持され、画像が縦横に伸びたり縮んだりはしないようになっています。以下、少々ややこしいので場合分けして説明します。

［パターン1］ c や p を使わない場合 （サイズ変更のみでトリミングなし）

• c や p を使わないと、画像全体が表示されます。このとき、s や w や h で画像の縮小後のサイズを指定できます。

  画像のURL： https://4.bp.blogspot.com/ ... /s320/noazuki130922-578c.jpg /s320/ と指定すると、画像全体が 320 ピクセルの正方形に収まるように、つまり、画像の長辺（縦横のうち長い方、この場合は横）が 320 ピクセルになる（高さはそれに合わせて自動的に 240 ピクセルになっています）

  
  

  画像のURL： https://4.bp.blogspot.com/ ... /w200/noazuki130922-578c.jpg /w200/ と指定すると、画像の横幅が 200 ピクセルになる（高さはそれに合わせて自動的に 150 ピクセルになっています）

  
  

  画像のURL： https://4.bp.blogspot.com/ ... /h200/noazuki130922-578c.jpg /h200/ と指定すると、画像の高さが 200 ピクセルになる（横幅はそれに合わせて自動的に 267 ピクセルになっています）

  
  
• ただし、実際の画像サイズよりも大きな数字を指定しても拡大はしてくれません。その場合、元の画像サイズのままで表示されます（例：アップロードした元の画像の長辺が 1200 ピクセルだったら、/s1600/ と指定しても、長辺 1600 ピクセルには拡大されず、長辺 1200 ピクセルの元の画像サイズで表示されます）。
• 2つ以上の指定を同時に行うと、それぞれの指定値を比べて、もっとも画像が小さくなるような指定を採用して、それにしたがったサイズで表示されます。大きい方の指定は無視されます。たとえば、/s640-w200/ と指定すると、w200 のほうが画像が小さくなるので、s640 は無視され、/w200/ と指定したのと同じことになります。

  画像のURL： https://4.bp.blogspot.com/ ... /s640-w200/noazuki130922-578c.jpg /s640-w200/ と指定すると、大きい方の指定値 s640 が無視され、w200 の指定が使われて、横幅が 200 ピクセルになる（高さはそれに合わせて 150 ピクセルになる）

  
  また、/w640-h60/ などと、縦 h と横 w が食い違う指定をしても画像の縦横比が変わったりはしません。画像がより小さくなるほうの設定（この場合は h60 ）が採用されるだけです。

  画像のURL： https://4.bp.blogspot.com/ ... /w640-h60/noazuki130922-578c.jpg /w640-h60/ と指定すると、大きい方の指定値 w640 が無視され、h60 の指定が使われて、高さが 60 ピクセルになる（幅はそれに合わせて80 ピクセルになる）

  
  
• オプションを何も指定しないと、/s512/ と指定したのと同じ意味になります。これがデフォルトの表示サイズということなのだと思います。

  画像のURL： https://4.bp.blogspot.com/ ... /noazuki130922-578c.jpg オプションとして何も指定していません（/ のみ）。このとき、/s512/ と指定したのと同じサイズで表示されます

  
  

［パターン2］ c オプションを使う場合 （画像中心からのトリミング center cropping）

• c オプションは、画像の縦横のうち、長い方を切り取って正方形にするオプションです。切り取る幅を変える（拡大範囲を変える）ことはできません。また、c オプションのトリミングは、かならず画像の中心を基準にして行われ、位置をずらすことはできません。 /c/ と指定すると、画像を正方形に切り取った後、デフォルトの画像サイズである 512 ピクセルの正方形になるように画像サイズを変更して表示されます

  画像のURL： https://4.bp.blogspot.com/ ... /c/noazuki130922-578c.jpg /c/ と指定すると、横長の画像の左右が切り取られて正方形になります（縦長の画像の場合、画像の上下が切り取られます）。表示されるサイズは、デフォルトの画像サイズである 512 ピクセルになります。一つ上の画像と比較してみてください

  
  
• c オプションと s オプションを併用すると、s オプションは正方形に切り取った後の画像サイズ指定として解釈されます

  画像のURL： https://4.bp.blogspot.com/ ... /s240-c/noazuki130922-578c.jpg /s240-c/ と指定すると、左右が切り取られた正方形の画像が、s240 で指定された 240 ピクセルに表示されます

  
  
• c オプションと s オプションによるサイズ指定を併用すると、実際の画像サイズよりも大きな数字を指定したときにも、そのサイズまで拡大してくれます。これは c オプションなしで s オプションだけの時には縮小だけしかしてくれないのと違っています。拡大する場合の最大値は 2560 ピクセルです

［パターン3］ p オプションを使う場合 （画像の重要な部分が自動的に選ばれてトリミング picture-based cropping）

• p オプションも、c オプションと同様に、画像の縦横のうち、長い方を切り取って正方形にするオプションです。ただし、そのときのトリミングは、プログラムが画像を読み取り、できるだけ重要なものが画像内に収まるように調節して場所が決められます。画像によっては、c オプションによるトリミングと同じ結果になるかもしれませんし、重要なものがちょんぎれてしまうこともあるかもしれません。 /p/ と指定すると、画像を正方形に切り取った後、デフォルトの画像サイズである 512 ピクセルの正方形になるようにサイズ変更して表示されます
• p オプションと併用できるのは、s オプションだけです。s オプションは正方形に切り取った後の画像サイズ指定として解釈されます。s と同時に、あるいは s のかわりに w（または h） オプションを使うとエラーになります。

  画像のURL： https://4.bp.blogspot.com/ ... /s320-c/noazuki130922-578c.jpg

  画像のURL： https://4.bp.blogspot.com/ ... /s320-p/noazuki130922-578c.jpg 上の2枚の画像は比較用で、上段が /s320-c/、下段が/s320-p/ と指定しています。どちらも左右が切り取られ 320 ピクセルに縮小された正方形の画像ですが、上段は c オプションにより画像の中心を基準にトリミングされていますが、下段は p オプションにより、黄色い花が画像のちょうど中心になるようにトリミングされています

  
  
• p オプションと s によるサイズ指定を併用すると、実際の画像サイズよりも大きな数字を指定したときにも、そのサイズまで拡大してくれます。拡大の最大値は 2560 ピクセルです。これは c オプションのときと同じです。

おわりに

いかがでしたでしょうか。この機能を自分は、Bloggerのページ内でサムネイル画像の一覧表示画面をつくるときに使っています。たとえば、鳥のページ、トンボのページなどです。ご紹介したサイズ指定オプションは、Google フォト側のサーバが行ってくれる処理ですので、Blogger から呼び出す場合でなくとも、たとえば、Google+ の画像でも可能になっているはずです。とはいっても、Google+では、画像を貼り付けるときに、画像を参照する URL を自分で修正する機会はあまり多くないかもしれません。説明が分かりづらい箇所あるかもしれませんが、ご容赦ください。以上です。（元記事 2013.12.10、修正 2018.5.29）

参考

1. Smaller Images from Picasa http://stackoverflow.com/questions/1463149/smaller-images-from-picasa