プログラムでおかえしできるかな

定年を過ぎて何かの役に立てないかなと始めた元SEのブログです

はてなフォトライフへ画像をアップロードしてサイズがが変わる時

ブログ シニア
このエントリーをはてなブックマークに追加

f:id:juu7g:20211204201131p:plain:left:w120 はてなフォトライフへ画像をアップする方法に2種類あって、
それぞれでアップロードされた画像のサイズに上限を設けています。
その辺りについて、自分なりに整理したので紹介します。

はてなさんは、ブロガーさんがブログの画像サイズであまり悩むことのないように はてなフォトライフや はてなブログの写真を投稿の機能を考えているのだと思います。

なので、デフォルトの動きを理解していないと、不思議な体験をされるかもしれません。

目次

◆はてなフォトライフのまとめ

◇基本機能 - 無料版とPro版の違い

はてなフォトライフは、はてなブログを無料版とPro版のどちらを使っているかで使える量に差があります。

機能 無料版 はてなブログPro
アップロード容量 300MB/月 3GB/月
ファイル形式 JPEG、GIF（アニメーションGIFを含む）、PNG ←
１ファイルのサイズ 長辺が10,000pxかつファイルサイズが10MBまで ←

◇アップロード

はてなフォトライフへ画像をアップロードするには2つの方法があります。

  • はてなフォトライフに直接アップロードする方法
  • はてなブログの編集画面のサイドバーの「写真を投稿」からアップロードする方法
    (厳密にはもう一つ、メールで投稿も同様)

それぞれ、アップロードのされ方が異なるのでまとめました。

項目 はてなフォトライフでアップロード はてなブログ経由でアップロード
最大サイズ※ 800px(デフォルト、変更可) 1200px
最大サイズより大きいサイズの画像をアップ
例：2048px		 最大サイズに縮小
800px		 最大サイズに縮小
1200px
最大サイズより小さいサイズの画像をアップ
例：400px		 そのまま
400px		 そのまま
400px
例：900px 最大サイズに縮小
800px		 そのまま
900px
位置情報 そのまま 削除する

※はてなブログ経由でアップロードとは、はてなブログの記事編集画面の編集サイドバーの「写真を投稿」から画像をアップロードした場合と、はてなブログへのメール投稿の場合です。

※最大サイズはフォトライフの設定で変更できます。最大サイズは長辺(縦横問わず)の長さです。
 最大サイズを1200より小さくした場合、はてなブログ経由でアップロードする場合には1200に置き換えられます。
 最大サイズを1200より大きくした場合、どちらの方法もそのサイズで動作します。

※「px」は画像の画素の単位でピクセルと読みます。

※二つの方法において、位置情報の有無が個人情報に関する大きな違いです。注意が必要です。



ほとんどのスマホのカメラ機能やデジカメが標準で記録している画像ファイルの長辺は1200pxより大きいと思います。
したがって、どちらの方法でアップロードするかによって、はてなフォトライフ上でのファイルのサイズが変わります。
ひいては、ブログの表示速度が変わります。

例えば、ブログ上で長辺600pxで表示したい画像は、長辺が600pxの画像が はてなフォトライフ上に存在する方が効率的になります。

もちろん、拡大して見せたい場合は別です。

▽次の図は、1200pxより大きいサイズの画像をアップロードした時のイメージです。ファイルサイズも載せました。

画像を縮小してアップロードする方法


この特徴は分かって利用すれば便利に使えます。
例えば、アップロードする画像は600pxと決めている場合、はてなフォトライフの設定を変更してしまえば、自分で画像のサイズ変更をしなくても、はてなフォトライフにアップロードするだけで、はてなフォトライフが勝手にサイズ変更してくれるからです。

◇保存フォルダ

はてなフォトライフにはフォルダを1世代だけ作成できます。
デフォルトでは、『Hatena Blog』フォルダが作成されています。

フォルダの主な特徴です。

  • フォルダごとに公開範囲を設定可能。公開範囲は、「自分のみ」、「トップと同じ(パブリック)」など
  • デフォルトは『Hatena Blog』フォルダで公開範囲は「自分のみ」
  • 新しいフォルダを作成すると公開範囲を変更しないと「トップと同じ」となる
  • 保存した画像をフォルダ間移動してもブログ上での表示に影響なし
    画像のアドレスは変わらない

◇はてなフォトライフの画像のアドレス

アドレスについて表にまとめました。

用途 アドレス 取り方
はてなフォトライフで画像を表示する時のURL https://f.hatena.ne.jp/ブログID/yyyyMMDDhhmmss 画像を表示しているページのアドレスをコピーで取得
画像そのもののURL https://cdn-ak.f.st-hatena.com/images/fotolife/j/ブログID/yyyyMMDD/yyyyMMDDhhmmss.jpg 画像を表示した時の画像を右クリックで画像のURLをコピーで取得
画像そのもののURL(幅120pxの画像) https://cdn-ak.f.st-hatena.com/images/fotolife/j/ブログID/yyyyMMDD/yyyyMMDDhhmmss_120.jpg フォルダ一覧の画像を右クリックで画像のURLをコピーで取得
はてな記法用 f:id:ブログID:yyyyMMDDhhmmssj:image 画像表示した時の画像の上(クリックするとコピー可能)

※yyyyMMDDhhmmssは年月日時分秒を表す数字
※はてな記法の:imageは、このままだと画像をクリックすると はてなフォトライフが表示されるので、:plain に置き換えて使用した方が良い。はてなブログ記事編集画面のサイドバーの「写真を貼り付け」で貼り付ける場合は、:plain になります。
※はてな記法の yyyyMMDDhhmmss のあとの1文字は、JPEGの場合に「j」、PNGの場合に「p」となります。
※画像のアドレスは参考程度に見てください。

◆JPEGとPNG

フリー素材のサイトから画像をダウンロードする場合にJPEGとPNGのどちらを選択すればよいか迷う時があるかもそれません。

基本的に

  • 写真はJPEG
  • アイコンやロゴなど色数の少ないものはPNG

でよいのではないでしょうか。

JPEGとPNGの比較表です。

機能 JPEG PNG
画質 写真向き 高画質、ロゴ向き
圧縮 非可逆圧縮 可逆圧縮
サイズ 色数が多くても小さい 色数が多いと大きい
文字や線の境界 分かりにくい 分かりやすい
透明・半透明 扱えない 扱える
EXIF情報 埋め込める 埋め込める(eXIFチャンク)
用途 ブログ向き 印刷向き

※可逆圧縮：低画質で保存しても元の画質に戻すことができます。
※非可逆圧縮：低解像度で保存すると元の画質に戻すことができません。
 保存方法によっては同じ解像度でも画質が劣化します。
※PNGでもEXIF情報が持てるようになっています。

◆さいごに

画像に関するプログラム作成を進めていて、いくつか調べることがあったので、まとめてみました。
いつも長い記事が多いので、たまにはすっきりした記事にしてみました。
それでも長いかも・・・

この記事を書くのに同じような内容の記事があるか検索しました。
もちろん、あります。似た内容の記事に触発されて画像を作ってみました。
少し工夫ができたので自己満足しています。

◆参考

投稿：