画像貼り付けテスト

はてなブログをやっていて、いまひとつよくわからないのが、画像アップロードの事。

サムネイル表示・クリックして画像を単独で出した時の表示、あと別にあるはてなフォトライフの事。

色々と設定をする箇所があるようだが、どこを直すと具合が良いのかよく分からない。

Fc2の時は、以前は画像をアップロードする際にサムネイル表示もできるようにチェックを入れていたが、アップロード容量を食うため(月1ギガだからほとんど気にすることはなかったんだけど)途中からやめた。

あらかじめ小さいサイズにリサイズ(テンプレート幅からはみ出ない大きさに)アプリでリサイズしたのをアップしていた。おかげで?1枚あたりのファイルサイズは200KB程度てなり、大変軽くなった(笑)

この作業は、特に面倒だとは思わなかった。

はてなになってからは、必ずサムネイル画像があって、クリックすると、大きい画像が表示がされる運用(lightboxでいいのかな?)のようで、古い運用で慣れてきている私にとってはちょっとありがた迷惑なのであった。

ここまで数日チャッチャと日記を書いてきていたが、その画像表示についてよくわからない部分があり、色々調べてみて、なんとなく理解しつはあるが、実際自分の記事で検証してみようかと思う。

①この画像サイズ2953×2953　フォトライフ設定長辺640ピクセル　オリジナルサイズの画像を保存にチェックあり。

PCからのアップロード。テストのつもりが、5メガもある画像で、これ1枚アップしただけで2％容量使っちゃった(汗)

2018年のマイカレンダーの表紙w

サムネイル画像サイズ630×630ピクセル。 

ブログ上では、サムネイル画像はテンプレートの横幅内に収まるようにリサイズされており、画像をクリックすると、850×850ピクセルであった。

はてなフォトライフ上でサイズを確認すると1024×1024ピクセル。画像下にある「オリジナルサイズを表示」をクリックして、はじめて2953×2953ピクセルの画像が表示された。

②次は、過去記事に使用した画像で検証・・・

元の画像サイズ　720×1081ピクセル

 サムネイル画像が、もしかして実際と同じ720×1081ピクセルか?→630×946ピクセルだった、四隅に5ピクセルずつマージンを取っている設定のせいだろう、

クリックした画像

大きさは、566×850ピクセル。

ちなみに、はてなフォトライフでは、クリック表示すると、元サイズの720×1081ピクセルで表示がされる。

③次も過去に使用した画像・・・

アップロード前にあらかじめリサイズしたもの。

360×640ピクセル。

サムネイル画像、クリックした時の画像の大きさ共に同じサイズの360×640ピクセルだ。

フォトライフでのクリックした大きさの同じ360×640ピクセルだ。

最初から小さいサイズで、テンプレート幅に収まるサイズなので、納得できる。

④では、横に長い画像はどうか。

実際の画像サイズ1080×720ピクセル。

サムネイル画像はおそらく630×354ピクセルのようだ。

クリックすると、オリジナルサイズの1080×720ピクセルで表示される。

これもテンプレート幅に影響を受けているだろうから、納得できる。

②の縦長画像の運用がよくわからない･･･

サムネイル画像よりクリックした画像の方が小さくなるのはなぜ･･･

縦長画像は画面のスクロール量が大きいため、できれば小さくしたい(縦600～640ピクセル程度に)

 PCからの投稿と、スマホからの投稿で運用が違うとか?

PCの見たまま編集だと、編集画像から縦横比維持のまま画像の四隅をドラッグでサイズ変更ができるようだが・・・

比較が分かりやすいように、小さいサイズの画像を貼ってみた。

この画像は180×320ピクセル、小っちゃっ!さすがに画質が荒いねw

 酪王カフェオレ、先日おこめお返しの際に、須賀川のローソンで買ったもの。

これ、東北限定だったのを後に知った･･･

サムネイル画像、クリックした時の画像、フォトライフの画像共に180×320ピクセルであった。

もしかして、長辺が640ピクセルで指定してあったので、サムネイル画像が引き延ばされてしまうのかな、と思ったのだが、そうはならないみたい。

「オリジナルサイズの画像を保存」にチェックが入っているからかな。

色々調べた結果、

ブログの編集画面からアップロード
　　⇒ 長辺1024ピクセルに自動リサイズ

「はてなフォトライフ」にアップロード
　　⇒ 長辺800ピクセルに自動リサイズ

と言う、アップロードの方法によって、画像のリサイズの仕方が変わってしまう、ことだそうだ。

はてなフォトライフからアップロード、という使い方は私はほとんどしないので、上の運用を覚えていればいいだろう。

何となくは理解した、でも、縦方向の画像がサムネイルよりクリック画像の方が小さくなる②の件についてはまだ納得ができていないんだな・・・

追記:　画像をクリックした際はアップロード時の画像の大きさが表示されるらしい。そして、クリックした時の画像の大きさ②の運用は、やはり使っているモニターの大きさに影響されるようだ。