Bloggerの関連記事のサムネイル画像のサイズを変更しようとしたら

サムネイル

Bloggerの関連記事のサムネイル画像が正方形（QooQでのデフォルトは正円）なことが気になって投稿一覧のように1:2の比率にサイズを変更してみました。


結果はというと、画像が荒くなり、正方形のときよりズームアップされてしまいました。

どうやらBloggerのサムネイル画像は使用している画像の比率が1:1の正方形のようです。

サイジング

よくよく調べてみると、Bloggerでの画像のURLは「https://〜/s400/画像名.jpg」のように画像名の前に「s400」のように数字が割り当てられているのですが、ここを変更することでサイズが変更できるようです。

• 「s1600」は元画像の大きさ
• 「s400」だと長辺が400px
• 「s640」だと長辺が640pxなど

s200


s100


s100-c


s72-c

そしてサムネイルの画像はどうやら「s72-c」で72pxの正方形のようです。
「-c」をつければ正方形になるようなので、今後画像表示の際に使えそうな気もします。

表示させた上でダウンロードしてみると実際にそのサイズになっているのでどういう仕組みか不思議です。

なので、サムネイル画像をCSSなどで、サイズ変更しようとしても72pxの画像を拡大した状態になってしまうので、画像が荒くなってしまうようです。

下記ページの方のように、JavaScriptを使用することでサムネイル画像を変更することは可能なようですが、相変わらずページの表示速度テストの結果が思わしくないので今回は見送ることにしました。