Bloggerの画像の小技

2019/06/04 ｜2024/08/03 ｜5

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

CONTENTS

画像URLについて
任意のサイズに変更
サイズ変更以外にこんなことも
参照元
2021/06/12 追記: さらに凄い技の情報を得たので記事を書きました
2021/10/08 追記: Blogger 画像の新仕様 URL について
- 2022/03/22 追記: ファイル名.拡張子が付く仕様に変わったようです
2021/11/25 追記: JPG 変換及び圧縮パラメータに関する記事を書きました

画像URLについて

Bloggerにアップした画像のURLはこんな感じになってます。

https://blogger.googleusercontent.com/img/b/.../s1600/画像ファイル名.JPG

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

任意のサイズに変更

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

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

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

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

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

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

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

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

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

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

"-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

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

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

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

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

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

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

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

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

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

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

s0 (w612-h703)

w480-h270-c

w480-h270-n

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

ふじやん闇に隠れて生きるブロガラーです。
Bloggerer in the Dark.
テーマは一日にして成らず。

Blogger

#Blogger画像

コメントを投稿

ログインせずにコメントされる場合は、匿名ではなく
名前/URL で何かしら名前を入れて頂けると
他の匿名さんと区別できるので助かります。
URL は空白でも構いませんが、入力いただくと
アバターの代わりにサイトのファビコンが表示されます。埋め込みフォームが開きます埋め込みフォームでコメントできない場合はこちらからどうぞ。別ページに移動します

5 件のコメント (新着順)

ふじやん

余談ですが…
コメントに https://1bp.blogspot で始まる URL のリンクを貼るとスパム扱いされてしまいます。リンクじゃなくて URL のテキストなら問題ありません。
ということで、BINUBALLさんの URL リンクが貼られた方のコメントを承認公開して、URL テキストで再投稿して頂いた方は削除しました。

2021/11/08 16:41

ふじやん

>BINUBALLさん
新たな情報ありがとうございます。
l100 はオリジナルサイズと同じになるのかなと思いましたが3倍に増えてますね。l90 だと元と同じになりました。
s1000: 71KB
s1000-l100: 213KB
s1000-l90: 71KB
s1000-l50: 24KB
s1000-l1: 5KB

2021/11/08 16:28

BINUBALL

jpgファイルを圧縮できるパラメータがあります。
3つの画像を比較してみてください。
https://1.bp.blogspot.com/-dc15OmqRa2k/XO6p92gk1yI/AAAAAAAAMmg/6TJvt_VO45YG7-vSK4sZf-7Cegm_59OHwCKgBGAs/s1000-c/P1110754.JPG
https://1.bp.blogspot.com/-dc15OmqRa2k/XO6p92gk1yI/AAAAAAAAMmg/6TJvt_VO45YG7-vSK4sZf-7Cegm_59OHwCKgBGAs/s1000-c-l50/P1110754.JPG
https://1.bp.blogspot.com/-dc15OmqRa2k/XO6p92gk1yI/AAAAAAAAMmg/6TJvt_VO45YG7-vSK4sZf-7Cegm_59OHwCKgBGAs/s1000-c-l1/P1110754.JPG

2021/11/08 15:42

ふじやん

おお、そんなパラメータもあったんですね。
ところで、参考記事の bp.blogspot.com に久しぶりにアクセスしたらだいぶリニューアルされてるようで、ブログカードのリンクを直さないといけませんね。
ついでにBINUBALLさんに教えていただいた回転技も追記しておきましょうかね。

2021/02/12 22:32

BINUBALL

画像を回転させることができますね。
r-90 / r-180 / r-270を使用可能です。
https://1.bp.blogspot.com/-dc15OmqRa2k/XO6p92gk1yI/AAAAAAAAMmg/6TJvt_VO45YG7-vSK4sZf-7Cegm_59OHwCKgBGAs/s1000-c-r270/P1110754.JPG

2021/02/12 22:23

コメントフォームにジャンプ