スキップしてメイン コンテンツに移動

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

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

四種類の投稿の仕方とそれぞれの最大幅

Bloggerの投稿画像の選択
投稿画像の選択 via Blogger
  • パソコンからアップロード:デバイス(パソコン、スマホ、タブレットなど)から掲載する
  • フォト:Googleフォトのギャラリーかアルバムから掲載する
  • Blogger:Blogger(Bloggerに以前に取り込んだ画像)かGoogleアルバムアーカイブ(Bloggerを含めてGoogle関連のサービスで取り込んだ画像)から掲載する
  • URL:画像URLを入力して掲載する

Bloggerの画像ファイルは従来通りにjpg/jpegとpngとgifの三種類だけが表示可能になっている。

選択肢の「パソコンからアップロード」はサイズを「元のサイズ」にしたときの最大幅が2048px(縦横がそれ以下の画像ならばオリジナルのまま、それ以上ならば2048px以内に縮小される)で、容量は圧縮される。

投稿時に画像を直接的に取り込めて便利で、しかも最大幅の「元のサイズ」でも画質と容量が適度にバランスが取られているからとても使い易い。

選択肢の「フォト」は「Googleフォトから選択」でも「アルバム」でもどちらもGoogleフォトから取り込まれてサイズを「元のサイズ」にしたときの最大幅は無制限で、容量は圧縮される。

最大幅が無制限だから「元のサイズ」を選ぶと最高の画質が得られるけど、ただし圧縮されても容量は大きく膨らんでブログでの表示速度が著しく低下する可能性も出て来るから注意しなくてはならない。

選択肢の「Blogger」はサイズを「元のサイズ」にしたときの最大幅は「このブログから選択」だと以前にBloggerに掲載したものと同じで、「Googleアルバムアーカイブから選択」だと「フォト」のように無制限になって圧縮される。

最大幅が無制限になる「元のサイズ」は最高の画質だけれども「フォト」と同じように注意して使わないとブログでの表示速度が必要以上に遅くなるかも知れない。

選択肢の「URL」はサイズを「元のサイズ」にしたときの最大幅は無制限になるけれどもBloggerで圧縮されずに画像URLで取り込まれるままの状態になる。

最大幅が無制限で、しかも圧縮されないので、「元のサイズ」を選ぶと最高の画質にせよ、「フォト」や「Blogger」の「Googleアルバムアーカイブから選択」の場合よりももっとブログの表示速度が低下する可能性が高いとくれぐれも注意したい。

Bloggerの投稿画像のサイズ毎の圧縮の目安

投稿画像は掲載の仕方で「URL」以外を選ぶとBloggerで圧縮されてブログでの表示速度が速くなるようにオリジナルよりも軽量化される。

Bloggerの投稿画像のレイアウトの選択
レイアウトの選択 via Blogger
  • 2048pxで700kb前後(パソコンからアップロードの元のサイズの最大)
  • 600pxで120kb前後(特大)
  • 400pxで50kb前後(大)
  • 320pxで35kb前後(中)
  • 200pxで15kb前後(小)

※画像の状態によって圧縮される容量は目安よりも大きく増減することがある。

投稿画像のサイズは選択の後に四種類:小と中と大と特大と元のサイズから決める。

大きいほどに画質が良いけれども容量が増えて表示速度が下がったり、テンプレートによってはみ出すこともあるから不都合がないようにしなくてはならない。

掲載の仕方で「フォト」と「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="" border="0" 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="" border="0" 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」のところが対象になるんだ。

Bloggerの画像URLのサイズ指定のパターン

  • s数値:画像の縦幅の長い方を指定する
  • w数値:画像の横幅を指定する
  • h数値:画像の縦幅を指定する

画像のサイズの入力は三つの文字:sとwとhのどれかと指定したい幅の数値で行う。

Bloggerの規定のサイズだけではなく、1px毎に変更することができる。

幅の数値を「0」にすると取り込まれた画像の最大値が採用される。

画像のimgタグのdata-original-height属性に使用できる最大の縦幅、data-original-width属性に使用できる最大の横幅が記載されているので、参考にできる。

それぞれの最大値を超えて指定しても反映せず、画像は縦横に引き伸ばされることはない。

何れの指定も続けて「-c」を記載すると中心から正方形に切り取られた画像が生成される。

その他、横幅のwと縦幅のhを半角ハイフン(-)で組み合わせて「w320-h180」のように同時に指定することもできる。

入力された値がオリジナルの画像の縦横比と合わない場合は小さな方を基準に画像が取得されて合わない縦横比に変えるように切り取られたりはしない。

参考:Bloggerでアップロードした画像を、サーバから配信される画像のサイズを指定して表示する方法

コメント

些細な日常の人気の投稿

飽和脂肪酸の多いココナッツオイルの過剰摂取の危険性とその他の健康上の利点

イメージ

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

イメージ