Bloggerの投稿画像の種類とサイズ/容量と画像URLについて 結城永人 - 2020年10月13日 (火) Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次四種類の投稿の仕方とそれぞれの最大幅Bloggerの投稿画像のサイズ毎の圧縮の目安画像URLで投稿画像のサイズを変更する方法Bloggerの投稿画像のサンプルのソースコードBloggerのimgタグのサンプルのソースコードBloggerの画像URLのサイズ指定のパターン画像URLでWebPファイルに変更する方法webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択|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 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要素> - 画像の振り分け コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
Googleの誕生祝いでプロフィールアイコンに風船と紙吹雪が飛んで来た サイトを見ていたら妙な感じがするので、良く見てみるとGoogleサービスで、ログインして右上のプロフィールアイコンが出ているときに風船と紙吹雪が飛んで来ていることに気付いた。 Googleから久し振りに受け取った誕生祝い サマリー|Search Console| Goog...
コメント