EDIT

Bloggerの画像の小技 (2021/10/08: 新仕様 URL に関して追記しました)

2023/10/175
アイキャッチ

Bloggerにアップロードした画像に関するちょっとした便利ワザをご紹介します。

画像URLについて

Bloggerにアップした画像のURLはこんな感じになってます。
※ .bp の左の数字は画像によって変わります。(1~4)

https://1.bp.blogspot.com/.../.../.../s1600/画像ファイル名.JPG

この中の赤字の部分はデフォルトだと "s1600" になっているのですが、これは長辺を最大1600pxで表示させるためのパラメータで、この数値を変えると自由に表示サイズを変えたりすることが出来るのです。

任意のサイズに変更

例えばこの画像、アップロード時のオリジナルサイズは 4320px なのですが

サンプル画像

デフォルトのURL (最大1600px)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s1600/P1110754.JPG
サンプル画像2

s200 にすると元の縦横比を維持したまま 200px に

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s200/P1110754.JPG
サンプル画像3

パラメータなしにすると最大 512px に

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/
サンプル画像4

s0 だと元サイズになります

※記事に挿入した画像のタグのURLを s0 に変えると、ライトボックス表示の最大が 512px になってしまう(パラメータなし状態)ので注意。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s0/P1110754.JPG
サンプル画像5

わざわざ画像編集ソフト等でサイズの異なるファイルを作る必要がなく、同じファイルで使い回し出来るので便利でしょ?
私、この技を知る前は、トップページのサムネイル(アイキャッチ)画像を用意するのにそんな面倒なことを毎回やってました(~_~;)(笑)

CSS や style タグでサイズ指定しても任意のサイズで「表示」は出来るものの、参照元は元サイズのままなので読み込みが重くなるわけですが、この技だと参照元画像を自動でリサイズした状態に生成してくれるので、そういう心配も無用というわけです。

サイズ変更以外にこんなことも

"-c" を付けると正方形にトリミングされます。(両サイドがカットされます)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s300-c/P1110754.JPG
サンプル画像6

"w●●-h●●-c"で縦と横を任意のサイズででトリミング。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/w400-h80-c/P1110754.JPG
サンプル画像7

"-cc" を付けると円形にトリミングされます。

PNG や GIF は背景が透過状態でトリミングされます。

JPG はデフォルトでは白背景になりますが、背景色パラメータで色を変えられます。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s200-cc/P1110754.JPG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s200-cc-bc0xff0000/P1110754.JPG
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV5DYSR7CoCwuN38_hBw7u2H_xO393_nCORZRNXSMbe9vLqdpz88MthH2bgJjNM3rVhMwIH3ChBdVfTnItQ0D_4PJ_meCSIAu5jGtAQU1mz9tPbrGkeGvuK8OXVLK9KvfwGiaZJsq4e0I/s200-cc/blogger-image.png
サンプル画像8 サンプル画像8-2 サンプル画像9

"-d" を付けるとダウンロードリンクに。

指定サイズにリサイズされた状態でDLされます。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s600-d/P1110754.JPG

2021/02/12 追記: "-r90" "-r180" "-r270" で画像を回転。

時計回りに 90°/180°/270° 回転させます。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s400-r90/P1110754.JPG
サンプル画像10

2021/02/15 追記: "-fh" で左右反転。"-fv" で上下反転。

水平方向に反転させます。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s400-fh/P1110754.JPG
サンプル画像11

垂直方向に反転させます。

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB9GTD1L9t-Y3_MOuAp4mwgu5y2fOUppvVB79DxyCbhRH2-OIVbi7A6LxsEG2YEBETpnnGYVTiR7LHSIuCc6E6zi2-ztsKOdTNSx7JYsgMkZytfn9ACRCGrLHpGQL-XUo9hRh1r6L_AOc/s400-fv/P1110754.JPG
サンプル画像12

2021/06/10 追記: "-c" "-n" "-p" の違い

下記の参照元記事によると、トリミングさせるパラメータには 先述の -c 以外に -n-p というのがあって、-n-c と同じだが、中央からトリミングするとのこと。また -p はアルゴリズムによって人物の顔など、メインとなるような部分が中央に配置されやすくなるようです。

例えばこちらのやや縦長(612px × 703px)の画像を 16:9(480px × 270px) にトリミングし、それぞれのパラメータを付けて比較してみると…

比較用サンプル画像1
s0 (w612-h703)
比較用サンプル画像2
w480-h270-c
比較用サンプル画像3
w480-h270-n
比較用サンプル画像4
w480-h270-p

ということで、このような顔が上の方にある縦長画像の場合、-n は中央部分でトリミングされるために顔が半分見切れてしまい、-c だと何故か少しずれて頭だけが少し切れた状態になり、-p では顔がちょうどいい位置に来るように調整されるという結果になりました。

ちなみに当ブログでは、音楽記事でアーチスト写真のアイキャッチ画像をよく使うという理由でトップページや関連記事では -p が付くようにしていて、これまで使用した画像はほぼいい塩梅にトリミングされています。
アスペクト比や構図によっては意図した結果にならないこともあるので、必ずしも -p がベストとは言い切れないものの、人物写真を多用する環境では有効かもしれませんね。

尚、参照元記事内のサンプル画像 URL のパラメータが s400-n となっていますが、Blogger の仕様が変わったせい?なのか、-n だけは w400-h400-n というように高さと幅を指定しないとエラーになってしまうので要注意です。

参照元

ファビコンBP.BLOGSPOT.COM
サムネイル
BP.BLOGSPOT.COM : RESIZE / CROP Google Photos & Blogger images Without an editor
Learn about google photos, blogging , blogger, photo editing and more
https://2-bp.blogspot.com/2021/02/resize-crop-google-photos-blogger.html

2021/06/12 追記: さらに凄い技の情報を得たので記事を書きました

ファビコンふじろじっく
サムネイル
【Blogger】アニメGIF画像をMP4動画ファイル化して埋め込む
Blogger画像のアニメGIFをお手軽にMP4変換する方法
https://fujilogic.blogspot.com/2021/06/Blogger-gif-convert-to-mp4.html

2021/10/08 追記: Blogger 画像の新仕様 URL について

Blogger の画像 URL の仕様が変更になりました。これから順次全てのブログに適用されていくと思います。

このように URL の構成がだいぶ変わっています。

https://blogger.googleusercontent.com/img/a/[長い文字列]=[パラメータ]

例えば長辺 540px で表示させる場合はこのようにします。

https://blogger.googleusercontent.com/img/a/[長い文字列]=s540

パラメータの部分のオプションに関しては基本的に旧 URL の仕様と変わりないようです。ちなみにパラメータなしの状態だと長辺の最大が1600px になります

https://blogger.googleusercontent.com/img/a/[長い文字列]

旧 URL との大きな違いは、ディレクトリの長い文字列(英数+ハイフン+アンダーバー=190数文字)、そしてファイル名と拡張子が含まれていないということ。SEO 的な影響があるのかどうかはわかりませんが、URL だけで何の画像か判別できなくなったのはかなり不便ですよね。できればこの点は改善してほしい所です。

2022/03/22 追記: ファイル名.拡張子が付く仕様に変わったようです

このように改善されました。

https://blogger.googleusercontent.com/img/b/[長い文字列]/[パラメータ]/[ファイル名.拡張子]

2021/11/25 追記: JPG 変換及び圧縮パラメータに関する記事を書きました

BINUBALL さんにコメントで教えて頂いた有益な情報に関して記事にまとめました。

ファビコンふじろじっく
サムネイル
【Blogger】JPG圧縮パラメータでさらに高速軽量化しました
圧縮JPGはWebPより汎用的で高速化にも効果あり
https://fujilogic.blogspot.com/2021/11/compress-jpg-image.html