Bloggerの投稿画像の種類とサイズ／容量と画像URLについて

Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。

四種類の投稿の仕方とそれぞれの最大幅
Bloggerの投稿画像のサイズ毎の圧縮の目安
画像URLで投稿画像のサイズを変更する方法
Bloggerの投稿画像のサンプルのソースコード
Bloggerのimgタグのサンプルのソースコード
Bloggerの画像URLのサイズ指定のパターン
画像URLでWebPファイルに変更する方法
webpファイルとその他の振り分けの仕方

四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像の選択

投稿画像の選択｜Blogger

パソコンからアップロード：デバイス（パソコン、スマホ、タブレットなど）から掲載する

フォト：Googleフォトのギャラリーかアルバムから掲載する

Blogger：Blogger（Bloggerに以前に取り込んだ画像）かGoogleアルバムアーカイブ（Bloggerを含めてGoogle関連のサービスで取り込んだ画像）から掲載する

URL：画像URLを入力して掲載する

Bloggerの画像ファイルは一般的なjpg／jpegとpngとgifの三種類など、さらに高圧縮のwebpもアップロードできる（jpgに変換されるから確実に使うにはwebpファイルへの画像URLの書き換えが必要なんだ）ようになっている。追記：2021年の夏頃から導入されたblogger.googleusercontent.comというサブドメインによる投稿画像はそのままの画像URL（パラメーターなしのもの）で、最大幅が1600pxまで表示される。しかし実際に使用可能な画像サイズは全て無制限（Bloggerで保存される投稿画像のサイズが確認できないくらい大きい）になっている。なので1600px以上のサイズの画像を取り込んだ場合は画像パラメーターを最大値の「s0」などに変更するともっと大いな画像も表示することができる。投稿画像を「元のサイズ」で取り込んだ場合の規定の最大幅は作成ビューとHTMLビューで異なり、前者は画像URLに「s16000」のパラメーターが付いて16000pxまで、後者は何も付かないから1600pxまでのサイズで表示されることになる。追記：2022年の春頃から新しいサブドメインの二番目のディレクトリーが「a」から「b」に変更されてHTMLビューの「元のサイズ」の画像パラメーターに「s1600」が付くようになった。以前の投稿画像：bp.blogspot.comというサブドメイン（先頭に1から4までの数字が付いた画像URL）によるものの最大幅について選択肢の「パソコンからアップロード」はサイズを「元のサイズ」にしたとき、大抵は最大幅が2048px（縦横がそれ以下の画像ならばオリジナルのまま、それ以上ならば2048px以内に縮小される）で、容量は圧縮される。一部、デジタルカメラで撮影したままで、未加工の写真のような非常に大きなサイズで、容量も非常に大きな場合は縮小されず、殆ど圧縮もされずに取り込まれることもあるので、そのままでブログに使うのは表示速度が著しく下がるから注意するべきだ。基本的に投稿時に画像を直接的に取り込めて便利で、しかも最大幅の「元のサイズ」でも画質と容量が適度にバランスが取られるからとても使い易い。選択肢の「フォト」は「Googleフォトから選択」でも「アルバム」でもどちらもGoogleフォトから取り込まれてサイズを「元のサイズ」にしたときの最大幅は無制限で、容量は圧縮される。最大幅が無制限だから「元のサイズ」を選ぶと最高の画質が得られるけど、ただし圧縮されても容量は大きく膨らんでブログでの表示速度が著しく低下する可能性も出て来るから注意しなくてはならない。選択肢の「Blogger」はサイズを「元のサイズ」にしたときの最大幅は「このブログから選択」だと以前にBloggerに掲載したものと同じで、「Googleアルバムアーカイブから選択」だと「フォト」のように無制限になって圧縮される。最大幅が無制限になる「元のサイズ」は最高の画質だけれども「フォト」と同じように注意して使わないとブログでの表示速度が必要以上に遅くなるかも知れない。選択肢の「URL」はサイズを「元のサイズ」にしたときの最大幅は無制限になるけれどもBloggerで圧縮されずに画像URLで取り込まれるままの状態になる。最大幅が無制限で、しかも圧縮されないので、「元のサイズ」を選ぶと最高の画質にせよ、「フォト」や「Blogger」の「Googleアルバムアーカイブから選択」の場合よりももっとブログの表示速度が低下する可能性が高いとくれぐれも注意したい。Bloggerの投稿画像のサイズ毎の圧縮の目安投稿画像は掲載の仕方で「URL」以外を選ぶとBloggerで圧縮されてブログでの表示速度が速くなるようにオリジナルよりも軽量化される。 Bloggerの投稿画像のレイアウトの選択

レイアウトの選択｜Blogger

2048pxで700kb前後（パソコンからアップロードの元のサイズの最大）

600pxで120kb前後（特大）

400pxで50kb前後（大）

320pxで35kb前後（中）

200pxで15kb前後（小）

※画像の状態によって圧縮される容量は目安よりも大きく増減することがある。
※webpファイルはjpgファイルに変換されて容量は変わらないか反対に増加する。投稿画像のサイズは選択の後に四種類：小と中と大と特大と元のサイズから決める。大きいほどに画質が良いけれども容量が増えて表示速度が下がったり、テンプレートによってはみ出すこともあるから不都合がないようにしなくてはならない。掲載の仕方で「フォト」と「Blogger」の「元のサイズ」で2049px以上、さらに「パソコンからアップロード」も含めて「元のサイズ」で2047px以下の固定値以外の画像が軽量化されながら取得されることがある。概して画像サイズが小さいほどにデータの圧縮率が高く、大きいほどにデータの圧縮率が低いという傾向が見られる。普通、画像を軽量化する場合、例えばTinyJPGを使うと画像が小さいほどに少なく、画像が大きいほどに多く圧縮されるし、逆になっているからサイズと容量のバランスを計算するときは混同しないようにしたい。投稿画像の画質に拘泥らないとか一つのページに何枚も置くなんてときは「特大」以下の固定値を使うのが簡単だろう。サイズの選択は固定値の「小」と「中」と「大」と「特大」を選んだとき、オリジナルのサイズがもっと小さいとブログで拡大して表示されるようになってしまうので、それを避けるには「元のサイズ」を選ばなくてはならない。なので「元のサイズ」は投稿画像をオリジナルの最大幅で使いたいときと比較的に小さいものをそのままの大きさで出したいときに特に役立つ。画像URLで投稿画像のサイズを変更する方法Bloggerの投稿画像は画像URLを編集すると画像サイズを後から細かく変更することができるので、画像サイズを変えるために再び取り込む必要はないし、規定の四種類以外の画像サイズを使える。サイズと容量を編集可能なBloggerの特有の画像URLはblogspot.comのサブドメインになっていて「パソコンからアップロード」か「フォト」か「Blogger」によって掲載するときに取得される。「URL」は入力した画像URLがそのままで、使われるので、Bloggerの特有の画像URLを入力した場合のみ他の三種類の取り込みと同じになる。Bloggerの投稿の画像URLなどのソースコードの編集は投稿画面の入力部の上のメニューの左端を「HTMLビュー」（< >）にすると可能になる。Bloggerの投稿画像のサンプルのソースコード<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-xeyklbDv5BA/X4NPJoZ_lyI/AAAAAAAAd10/yKuJRBl7q90QgUB_iPV-UBmCe5dNnXONQCLcBGAsYHQ/s0/woman.jpg" style="display: block; padding: 1em 0; text-align: center; "<>img alt="" data-original-height="867" data-original-width="1600" src="https://1.bp.blogspot.com/-xeyklbDv5BA/X4NPJoZ_lyI/AAAAAAAAd10/yKuJRBl7q90QgUB_iPV-UBmCe5dNnXONQCLcBGAsYHQ/s0/woman.jpg"/></a></div>※太字が画像URL。今まで投稿画像のソースコードは掲載の仕方によって微妙に異なっていたけれども新しい管理画面と共に四種類とも統一されて扱い易くなった。投稿モードを「作成ビュー」にして「説明文を追加」を使うと領域のdivタグが表欄のtableタグとtbodyタグとtrタグとtdタグに置き換えられたり、「タイトルテキスト」を付けると画像のimgタグにtitle属性が追加されるけれどもリンクのaタグと画像のimgタグが必ず記載されるのは全てに共通している。Bloggerの画像URLは二箇所に使われていて最初のaタグのhref属性の値は画像へのリンクで、最後のimgタグのsrc属性の値がブログに表示される画像のものだ。総じて前者がオリジナルの「元のサイズ」、後者が取り込む際に決めたサイズの画像URLになる。なので取り込む際に「元のサイズ」を選ぶと両方とも同じ画像URLになる。掲載の仕方で「URL」を選んだ場合のみ全てのサイズで両方の画像URLは同じに記載される。ブログに表示する画像のサイズと容量を変更できる画像URLはリンクのaタグのhref属性ではなく、画像のimgタグのsrc属性のものが対象になる。Bloggerのimgタグのサンプルのソースコード<img alt="" data-original-height="867" data-original-width="1600" src="https://1.bp.blogspot.com/-xeyklbDv5BA/X4NPJoZ_lyI/AAAAAAAAd10/yKuJRBl7q90QgUB_iPV-UBmCe5dNnXONQCLcBGAsYHQ/s0/woman.jpg"/>※太字が画像URL、帯文字が画像サイズ。ブログに表示する画像のサイズと容量は画像のimgタグのsrc属性の画像URLを編集すると簡単に変えられるというのはその半角スラッシュ（/）で区切られた最後（元の画像のファイル名）から二番目の部分、サンプルのものだと「s0」のところが対象になるんだ。新しい画像URL：blogger.googleusercontent.comというサブドメインを持つもの場合2021年の夏頃から2022年の春頃まで使われた二番目のディレクトリーが「a」のblogger.googleusercontent.comのサブドメインの画像URLは従来の「s0」などの画像パラメーターの位置が変わっている。<img alt="" width="320" data-original-height="2954" data-original-width="4414" src="src="https://blogger.googleusercontent.com/img/a/AVvXsEirRJXBvqm4B9RNF-zGSwByfqGovPvGZlnfJk31V0fGyYzgbyPYcP7ZjTHlEWgRNZ3vJtMzgV8NOM7Kv1BcNQLg0Sl_TzL8KTrqjW8Q45TGThutW82CsiunQe0M8V7uOVhk6isYXDhepdt9pObQLwLxHzC4XB4JtIIEzX-u8A-7Pay2sMaFcuvG6hKM=s320"/>画像URLの末尾に半角イコール（=）を挟んで「s320」のように付けられるけど、ただし取得したときに「元のサイズ」だと何も付かなくなったのが以前の画像URL、先頭に1から4までのどれかの数字が付いたbp.blogspot.comのものとは異なる。2022年の春頃から導入された二番目のディレクトリーが「b」のblogger.googleusercontent.comのサブドメインの画像URLは画像パラメーターの位置が以前のものと同じ位置に戻されている。Bloggerの画像URLのサイズ指定のパターン

s数値：画像の縦幅の長い方を指定する

w数値：画像の横幅を指定する

h数値：画像の縦幅を指定する

画像のサイズの入力は三つの文字：sとwとhのどれかと指定したい幅の数値で行う。Bloggerの規定のサイズだけではなく、1px毎に変更することができる。幅の数値を「0」にすると取り込まれた画像の最大値が採用される。画像のimgタグのdata-original-height属性に使用できる最大の縦幅、data-original-width属性に使用できる最大の横幅が記載されているので、参考にできる。それぞれの最大値を超えて指定しても反映せず、画像は縦横に引き伸ばされることはない。何れの指定も続けて「-c」を記載すると中心から正方形に切り取られた画像が生成される。その他、横幅のwと縦幅のhを半角ハイフン（-）で組み合わせて「w320-h180」のように同時に指定することもできる。入力された値がオリジナルの画像の縦横比と合わない場合は小さな方を基準に画像が取得されて合わない縦横比に変えるように切り取られたりはしない。追記：2021年の夏頃から2022年の春頃まで使われた二番目のディレクトリーが「a」のblogger.googleusercontent.comのサブドメインの画像URLの場合、「s0」などの画像パラメーターの使い方は従来と同じだけれども付ける位置が末尾の半角イコール（=）の後に変わった。そして投稿画像を「元のサイズ」で取得すると最初に画像パラメーターが何も付いてないから画像URLの末尾に半角イコール（=）を自分で置いてから記載しなくてはならない。画像URLでWebPファイルに変更する方法WebPはBloggerを提供するGoogleが開発した高圧縮の画像のファイル形式で、従来のjpg／jpegと比べておよそ三割くらい軽くなるといわれる。Bloggerではwebpファイルの画像をアップロードして使えるもののjpgファイルに変換されてしまう。画像URLの末尾は「webp」なのに表示された画像をダウンロードすると画像ファイルの拡張子は「jpg」になっている。だからそのままの状態ではブログに表示されず、データ容量は変わらないか反対に増加するので、高圧縮の軽量化を必ずしも期待することはできない。しかしBloggerでは画像URLの一部を変更するとwebpだけではなく、確認できたかぎりではjpg／jpegとpngの二つのファイル形式で既にアップロードした画像をサーバーで変換してwebpファイルとして表示できるようになっている。方法はBloggerの画像URLのサイズ指定の数字に「-rw」を記載するだけだ。例えばオリジナルサイズの場合は「s0」なので、「s0-rw」にするとwebpファイルで投稿画像が表示される。画像URL自体のファイル形式を示す末尾はwebpファイルの「.webp」には変わらず、元のままで、アップロードしたファイル形式のものだけれども変更されている。当の画像をブラウザからダウンロードするとwebpファイルの「webp」の拡張子を持っていることが確認される。WebPに変更する投稿画像のファイル形式はjpg／jpegファイルが向いていて良く軽量化されるようだ。pngだと軽量化されるけれども場合によって変わらないか反対に増量されてしまうこともあるから注意しなくてはならない。WebPのブラウザ対応はWebP image formatで確認すると人気のブラウザの大半は対応している。ただしmacOSのSafariが2020年11月のバージョン11のBig Surからしか対応してないらしく、使用率が上がるまでは使い辛いかも知れない。macOSのバージョン毎の使用率はDesktop macOS Version Market Share Worldwideなどが参考になる。それ以外でも対応してないブラウザにはwebpファイルの画像をブログに掲載しても表示されないから注意しなくてはならない。追記：2021年の夏頃から2022年の春頃まで使われた二番目のディレクトリーが「a」のblogger.googleusercontent.comのサブドメインの画像URLの場合、画像URLの末尾に「=rw」だけ追加するとWebP画像の最大幅が512pxのWebP画像に固定されるようだ。しかしもっと大きな画像をWebPで使うこともできて投稿画像の最大幅が例えば1600pxならば「=s1600-rw」のように画像サイズを明記すると画像サイズに合ったWebP画像が得られる。webpファイルとその他の振り分けの仕方ブラウザの対応状況に合わせて画像ファイルを使い分けて全ての訪問者に投稿画像を確実に表示することもできる。投稿画像の振り分けのサンプルのソースコード<div class="separator" style="clear: both;"> <a href="リンク先の画像URL" style="display: block; padding: 1em 0; text-align: center; "> <picture> <source srcset="Bloggerのwebpファイルの画像URL" type="image/webp"> <img data-original-height="867" data-original-width="1600" src="Bloggerの従来のファイル（jpg／jpegやpngやgifなど）の画像URL"> </picture> </a> </div>pictureタグで使いたい画像URLを振り分けることができる。Bloggerの場合は画像のソースコードにdivタグとaタグが自動的に付くので、その中のimgタグをpictureタグで囲んでブラウザで画像ファイルを切り替えるためのsourceタグを追加する。imgタグの画像URL（どんなブラウザでも表示できるファイル形式のもの）を基準として表示するけど、ただしsourceタグのtype属性で「image/webp」と指定したwebpファイルにブラウザが対応する場合にはsourceタグのwebpファイル（画像URLの画像サイズの数値に「-rw」を付けたもの）の画像URLが優先して使われる。

参考サイト

Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法
Blogger で WebP を使用してみた
＜picture要素＞ - 画像の振り分け

コメント