[Blogger] Blogger の画像ファイルの扱いについて

このブログで今まで主に使っている画像ファイルは「ドリトル」実行結果なので非常にシンプルなのが多い。なので、減色しても全く問題ないので、16 Color ( 4 bit ) PNG にしてサイズを小さくしている。
アップロードするファイルは数 KB ほどの物が多い。

Blogger では、画像を記事に埋め込むと元のファイルとは別にインライン表示用の画像が生成される。
ところが、3 KB ほどのサイズの元画像がインライン表示用には 10 KB 程になってしまったりと元画像よりサイズが大きくなってしまうことがよく発生する。いったいどういうことなの？

というわけでBloggerでの画像ファイルの扱いについて調べてみた。

---

プレビュー画像の生成

Blogger にファイルをアップロードすると以下のようなリンクが生成される。

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-nvx-aydUw2ROX_t86yZ6mIUCpDeam9LNrAWq1yvu2eHdt8z-sB1o1-QgA7DzvedJhCc-_FOCrQ5HfTP_nPPEXIBbF1OwwSlOvSXSnCi_BiUqOK8-CLMXh0r-AfKvHtYaX1jho_PM9o/s1600/1000x300.png"
 imageanchor="1" style="margin-left:1em; margin-right:1em">
<img border="0" height="60" width="200" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN-nvx-aydUw2ROX_t86yZ6mIUCpDeam9LNrAWq1yvu2eHdt8z-sB1o1-QgA7DzvedJhCc-_FOCrQ5HfTP_nPPEXIBbF1OwwSlOvSXSnCi_BiUqOK8-CLMXh0r-AfKvHtYaX1jho_PM9o/s200/1000x300.png" />
</a>

これは1000×300の画像をサイズ小で登録した場合。
サイズ中、およびサイズ大では以下のようになった。

画像ファイル中：

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirn4rnDssc2ieB9k-cgDC2WxqqDsVbcKq3KQTBJDApofZPgLLHhef-t1abTh6uDzr66eMgaEiVtBr-CoASmLL6ds6vRCaNBvnSuC6EjZ-bDUl207FS_gx321va-CnbinG5AZqu90AfbyU/s1600/1000x300.png" imageanchor="1" style="margin-left:1em; margin-right:1em">
<img border="0" height="96" width="320" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirn4rnDssc2ieB9k-cgDC2WxqqDsVbcKq3KQTBJDApofZPgLLHhef-t1abTh6uDzr66eMgaEiVtBr-CoASmLL6ds6vRCaNBvnSuC6EjZ-bDUl207FS_gx321va-CnbinG5AZqu90AfbyU/s320/1000x300.png" /></a>

画像ファイル大:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicU-PVVGXCjZE31DfXXhydXMxNgjcY_s-138HDnhGA9tdRaY29ugw2nDXADIkECHVKlXrvyCW2aVhWfrBbzQRJBVlAZ6wacUU4chaM0lLTtDVPAlk2RGeagtaTLNhvM0ugv1m4pf8eSws/s1600/1000x300.png" imageanchor="1" style="margin-left:1em; margin-right:1em">
<img border="0" height="120" width="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicU-PVVGXCjZE31DfXXhydXMxNgjcY_s-138HDnhGA9tdRaY29ugw2nDXADIkECHVKlXrvyCW2aVhWfrBbzQRJBVlAZ6wacUU4chaM0lLTtDVPAlk2RGeagtaTLNhvM0ugv1m4pf8eSws/s400/1000x300.png" /></a>

大中小それぞれで幅が 400、320、200 になっていてかつ画像ファイルへの URL が .../s400/...、.../s320/...、.../s200/... になっている。ちなみに元画像は、.../s1600/...。
試しに、上のどれかを .../s250/... に変えて実行してみると、250×75 の画像ファイルになる。
つまり、ここで指定した値に基づいて動的にサイズを変えた画像を生成しているようだ。

この s 値が画像の幅を超えるとオリジナルのファイルが無変換でダウンロードされる。s 値を大きくしても拡大されるわけではないようだ。 今回の使ったサンプルは 4bit PNGだったのだが、縮小された場合には 24 bit PNG になってしまっていたが、s1000 以降では 4bit PNG のままダウンロードされる。

パスの sXXX の部分を省略すると、s512 と指定したのと同じになる。s0 を指定すると元画像が取得できるようだ。

---

縦長の画像や画像のフォーマットなど。

もう少し調べてみよう。縦長の画像はどうなるのだろう。
300x1000 の画像で試してみる。s320 （中サイズ相当）の場合、96x320 の画像になった。縦横大きいほうが指定したサイズになるように縮小されている。

PNG 以外の画像のフォーマットを試してみよう。 JPG は JPGでダウンロードされるが、GIF は 縮小されると PNG でダウンロードされてくる。

JPG の場合、オリジナルの compression は 「JPEG, progressive, quality: 39」だったのだが、縮小されたイメージは、「JPEG, quality: 90, subsampling OFF」になっている（IrfanView調べ）。

GIF では 4 bit Color でアップロードしたが、縮小されたイメージは 24 bit Color の PNG になっていた。ちなみに、s 値のほうが大きくで無変換の場合には GIFファイルでも GIFファイルのままダウンロードされる。

---

まとめ

分かったことをまとめておこう。

• Bloggerにアップロードした画像は、URLで指定したサイズに動的に縮小してダウンロードされる。
• 縮小される場合には、幅・高さの大きいほうが指定値になるように縮小される。
• 指定値より幅・高さとも小さい場合にはオリジナルの画像が使用される(拡大はされない）。
• 指定サイズはインライン画像ではそれぞれ、400、320、200 である。オリジナルは 1600。
• PNG、JPG はフォーマットは変わらないが、色数・compression は変わる。 そのため、色数が少なかったり元の圧縮率が高い場合には縮小画像のほうがサイズが大きくなることがある。
• GIF が縮小される場合には PNG 形式に変換される。

こんなところだろうか。