はてなブログの編集画面で貼り付けられる写真サービスと手順を比較してみた（2020年版）

はてなブログに写真を貼る場合、はてなが提供するウェブアルバムサービス「はてなフォトライフ（Fotolife）」に写真をアップロードして貼り込むのが基本ですが、その他にも「Flickr」や「Googleフォト」の写真を貼り付けることも可能です。

私の場合はFotolifeとFlickrを主に使っていて、日常の日記やレビュー記事はFotolife中心。旅行や登山のレポートなど、なるべく綺麗な写真を見てもらいたいものはFlickrでと使い分けています。

使い分ける理由は同じ写真を貼り付けた際に、Flickrは読み込まれる画像（縮小画像でも）がシャープネス強めに処理されて比較的ブラウザ映えする写真に見えること、一方でFotolifeはややモヤっとした眠い表示に見えることが主な理由ですが、それもかなり昔の印象のまま（2013年頃に雑比較した記事）。

現在はGoogleフォトの写真も貼れるようになっていますし、一方でFotolifeの写真はキャプションを付けて貼り付けたり、タイル状のレイアウトで貼れるなど公式機能ならではのアップデートが施され（alt属性の指定も簡単にで行えるようになりました）、以前よりも使いやすいものとなっています。

ちなみに今まで使っていなかったGoogleフォトですが、前回の記事は全てGoogleフォトの写真を貼って構成しています。理由は後述しますがもうやりたくないかも……（笑）

今回はそれぞれの写真サービスを使った写真の貼り込みについて、画質と手順の容易さの両方から私自身の主観強めで比べてみたいと思います。

6枚の写真を各写真サービスにアップロードしてブログに貼り付けてみる

アップロードする写真ですが、全て長辺（横幅）2048ピクセルのJPEG画像です（アスペクト比4:3なので2048x1536のQXGAサイズ）。Lightroomの書き出し時にJPEG画質を80に設定、シャープ出力のチェックは外しています。今回は全部で6枚「夏山・雪山・星空・日常・動物・飯」と比較的私がよく撮っている被写体で、霧氷や羽毛など精細な描写のある写真を選んでみました。

ちなみに長辺2048ピクセルのJPEG書き出しは、私が普段Flickrにアップしている際の画像サイズです。元のカメラの画素数を考えるともっと大きなサイズでアップすることも検討してますが（Googleフォトに準じて16Mぐらい？）、それはまた別の話ということで。

はてなフォトライフはオリジナルサイズ、画質100％で保存されるように設定しておきます。

はてなフォトライフの設定（オリジナルサイズ／画質100％）

アップロードの手順はどれも変わらず

まず、6枚の写真をアップロードする手順ですが、これはFotolife、Flickr、Googleフォトでたいして変わらず。Flickrに関してはLightroomから直接画像のサイズ指定をしながらアップロードしたり、その際にアルバムを作ることができるのも便利ですが、今回は通常の手順でアップロード。各サービス若干の差はあるものの、複数の写真をまとめて選択、あるいはブラウザ画面へのドラッグでアップロードできます。

写真の貼り付けは圧倒的にFotolife。以下Flickr＞＞＞＞＞Googleフォト

はてなブログの編集画面からの写真の貼り付けですが、これはやはりブログの標準サービスである「はてなフォトライフ」が最もスムーズです。
編集画面のサイドバー［写真を投稿］から任意の写真を選んで［選択した写真を貼り付け］、あるいはダブルクリックするのみ。その際に、複数の写真をタイル状に横並びさせたり、キャプション、alt属性の書き込みも行うことができます。

何枚も横並びさせることもできます……

「Flickr」の場合は自分のFlickrのスクリーンネームを連携させて、表示された一覧の中から任意の写真をダブルクリックして貼り付けます。
この際に表示される一覧ですが、Flickr側のアルバムは連携されるアップロード順（Flickr側のPhotostream順）になっています。ちなみにFlickrサービス側で貼り込み用のHTMLコードを書き出して編集画面にコピペする方法もあって、以前は使っていましたが現在は使っていない方法なので省略します。

「Googleフォト」の場合も最初に自身のGoogleアカウントとの連携を行う必要があり［選択ウインドウを開く］で表示されるウインドウでアルバムを開いて目的の写真を選ぶという3ステップの手順が必要になります。サイドバーに一覧表示される写真を選ぶFotolifeやFlickrと比べると、少々面倒くさい印象があります（最初に使う写真を全て貼り付けてから編集する方法もありますが、個人的には都度写真を貼り付けたいので）。

Fotolife／Flickr／Googleフォトの貼り付け画面

編集画面に表示されるコード表示

これは編集画面の記法にもよるのですが、私が使っているはてな記法やMarkdown記法で編集する場合は以下ようなコードが貼り込まれます。GoogleフォトはそのままHTMLコードの形ですが、はてなフォトライフやFlickrはかなりシンプルなコードになります。
私自身は「見たまま」編集画面を使わないので、やはりシンプルなテキスト画面で編集を行えるFotolifeが好きかも。flickrのコードもまあそこまで長いものではないのでいいですけども。

【はてなフォトライフ】
[f:id:OKP:20200127120510j:plain]
[f:id:OKP:20200127120518j:plain]
[f:id:OKP:20200127120525j:plain]
[f:id:OKP:20200127120531j:plain]
[f:id:OKP:20200127120537j:plain]
[f:id:OKP:20200127120542j:plain]

【Flickr】
[https://www.flickr.com/photos/100325057@N07/49447204278:embed]
[https://www.flickr.com/photos/100325057@N07/49447204218:embed]
[https://www.flickr.com/photos/100325057@N07/49447204148:embed]
[https://www.flickr.com/photos/100325057@N07/49447204103:embed]
[https://www.flickr.com/photos/100325057@N07/49447675296:embed]
[https://www.flickr.com/photos/100325057@N07/49447902667:embed]

【Googleフォト】
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-VSHgZXJ4UhM/Xi5TNGWcsGI/AAAAAAAAFXM/j73kEf9g8-Q_8pCM3yf02XiltF3dffQjgCE0YBhgL/s1200/200127OKP_test-1.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-91sQEts1bBo/Xi5TNLGQWfI/AAAAAAAAFXM/vgq69RzJGtwD8reV-9edXrklYNSjnEz9ACE0YBhgL/s1200/200127OKP_test-2.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-fkezjPkBEQ0/Xi5TNPVBJoI/AAAAAAAAFXM/FCUlROaYM-8p8Ttjt-hgCVCuMDF3N0bkgCE0YBhgL/s1200/200127OKP_test-3.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-AFoc0bjTQiw/Xi5TNM-bPkI/AAAAAAAAFXM/-PKIWwYvPXQ8gQHsYzBrtiucf1TdR4LMQCE0YBhgL/s1200/200127OKP_test-4.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-qPu9VkjKnRU/Xi5TNEGUxYI/AAAAAAAAFXM/S81q24x7CwwO-Fi7zkkfMLD8DaYj-xPWwCE0YBhgL/s1200/200127OKP_test-5.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-fcu1gOtUtzg/Xi5TNCtXOeI/AAAAAAAAFXM/ffOant8IHDUn0lVyfkUutGCn7p-YFTU5gCE0YBhgL/s1200/200127OKP_test-6.jpg" itemprop="image"></span>
itemprop="image"></span>

ちなみにはてなフォトライフの写真貼り付けはサイドバー以外にも、「Fotolife記法」を使って貼り付けたりサイズ指定で呼び出すことも可能です。

「見たまま」や「HTML」編集でブログを書く場合はそれぞれかなり長いHTMLを貼り込むことになりますが、私はこの画面でブログを書くことはないので特にコメントはありません。

<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120542.jpg" alt="f:id:OKP:20200127120542j:plain" title="f:id:OKP:20200127120542j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120537.jpg" alt="f:id:OKP:20200127120537j:plain" title="f:id:OKP:20200127120537j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120531.jpg" alt="f:id:OKP:20200127120531j:plain" title="f:id:OKP:20200127120531j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120525.jpg" alt="f:id:OKP:20200127120525j:plain" title="f:id:OKP:20200127120525j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120518.jpg" alt="f:id:OKP:20200127120518j:plain" title="f:id:OKP:20200127120518j:plain" class="hatena-fotolife" itemprop="image"></span></p>
<p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OKP/20200127/20200127120510.jpg" alt="f:id:OKP:20200127120510j:plain" title="f:id:OKP:20200127120510j:plain" class="hatena-fotolife" itemprop="image"></span></p>

<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447204278/" title="200127OKP_test-1 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447204278_c56170fc5c_b.jpg" width="1024" alt="200127OKP_test-1"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>
<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447204218/" title="200127OKP_test-2 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447204218_fbd50a8180_b.jpg" width="1024" alt="200127OKP_test-2"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>
<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447204148/" title="200127OKP_test-3 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447204148_6d240507d8_b.jpg" width="1024" alt="200127OKP_test-3"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>
<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447204103/" title="200127OKP_test-4 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447204103_416ae2b13f_b.jpg" width="1024" alt="200127OKP_test-4"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>
<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447675296/" title="200127OKP_test-5 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447675296_e09b8e3995_b.jpg" width="1024" alt="200127OKP_test-5"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>
<p><a data-flickr-embed="true" href="https://www.flickr.com/photos/100325057@N07/49447902667/" title="200127OKP_test-6 by moognyk, on Flickr"><img src="https://live.staticflickr.com/65535/49447902667_78b647f217_b.jpg" width="1024" alt="200127OKP_test-6"></a><script async src="https://embedr.flickr.com/assets/client-code.js" charset="utf-8"></script></p>

<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-VSHgZXJ4UhM/Xi5TNGWcsGI/AAAAAAAAFXM/j73kEf9g8-Q_8pCM3yf02XiltF3dffQjgCE0YBhgL/s1200/200127OKP_test-1.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-91sQEts1bBo/Xi5TNLGQWfI/AAAAAAAAFXM/vgq69RzJGtwD8reV-9edXrklYNSjnEz9ACE0YBhgL/s1200/200127OKP_test-2.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-fkezjPkBEQ0/Xi5TNPVBJoI/AAAAAAAAFXM/FCUlROaYM-8p8Ttjt-hgCVCuMDF3N0bkgCE0YBhgL/s1200/200127OKP_test-3.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-AFoc0bjTQiw/Xi5TNM-bPkI/AAAAAAAAFXM/-PKIWwYvPXQ8gQHsYzBrtiucf1TdR4LMQCE0YBhgL/s1200/200127OKP_test-4.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-qPu9VkjKnRU/Xi5TNEGUxYI/AAAAAAAAFXM/S81q24x7CwwO-Fi7zkkfMLD8DaYj-xPWwCE0YBhgL/s1200/200127OKP_test-5.jpg" itemprop="image"></span>
<span itemtype="http://schema.org/Photograph" itemscope="itemscope"><img class="magnifiable" src="https://lh3.googleusercontent.com/-fcu1gOtUtzg/Xi5TNCtXOeI/AAAAAAAAFXM/ffOant8IHDUn0lVyfkUutGCn7p-YFTU5gCE0YBhgL/s1200/200127OKP_test-6.jpg" itemprop="image"></span>

貼り込まれる画像サイズが常に最大のFotolife、縮小サムネイルが読み込まれるFlickr／Googleフォト

アップロードしたフィアルは先述の通り、全て横幅2048ピクセルのJPEG。はてなフォトライフからの貼り付けの場合、常に最大サイズの画像が読み込まれてブログテーマに沿ったサイズで縮小表示されます（現在、このブログはPC表示の本文・写真は横幅800ピクセルで指定しています）。PCブラウザ表示の場合もですが、スマートフォンでブラウズする際にも最大サイズの画像を読むのは通信データ量や読み込み速度の観点からは、少々無駄があるかもしれません。

一方でFlickrやGoogleフォトではオリジナルサイズよりもブログ用に適宜縮小されたサムネイルが表示されます。Flickrの場合は標準で1024ピクセル（width="1024"）の指定になっていますし、スマートフォンサイズの画面の場合はさらい縮小されたサムネイルに切り替わります。
Googleフォトの場合は一律ですが横幅1200ピクセルに縮小されたサムネイルが読み込まれているようです。

現在、Fotolifeを使って写真を貼り付ける場合は、最初からブログ用に横幅1000〜1200ピクセル程度で書き出した画像をアップロードしています。
ブログのみの用途ならばこれでも問題ありませんが、FlickrやGoogleフォトが使用目的に関わらず常に大きなサイズの画像をアップロードできるウェブアルバムとして機能するのに対して（現像済写真のバックアップ用途にもなる）、この部分に関してはこの数年大きなアップデートの行われていないはてなフォトライフには物足りなさを感じてしまいます。

実際に各貼り付け方法で貼った写真を並べてみる

最後に、はてなフォトライフ、Flickr、Googleフォトそれぞれのサービスから、（はてなブログ編集画面のサイドバーの貼り付け機能を使って）貼り付けて写真を並べてみます。順番は毎回「はてなフォトライフ→Flickr→Googleフォト」の順番になっています。
お使いのPC、スマートフォン、ブラウザ、ディスプレイなどによって差がハッキリと分かるものからそうでないものまで様々だと思いますが、私のPC環境で見た場合のコメントをいくつか添えておきます。

今回、比べてみて感じたのは以前（数年前）よりもFotolifeの眠さがあまり気にならなくなったこと。
これはFotolife側の表示が改善された可能性もありますが、以前は横幅640ピクセル程度で表示していた画像が、800ピクセルまで広がったことによって縮小リサイズ時の画質劣化が気にならなくなったのかも？

それでも、やはりFlickrと比べてしまうと明らかにFlickrの方がシャープに感じます。

そして気のせいかFlickr以上にGoogleフォトの画像のようはよりシャープネスが強い表示に感じますがいかがでしょう。読み込んでるサムネイルのサイズに1024/1200ピクセルという違いはありますが、ブログ表示の段階で若干Googleフォトの方がシャープに感じます。

もちろん写真はシャープなら良いという訳ではないのですが、例えば上のような星空の写真の場合はFotolifeとそれ以外ではぱっと見で受ける印象が随分と変わってきますし、Fotolifeでは星が少なく見えてしまう危険性もあります。

逆に次のようなあまり精細感を必要としない写真ならばそこまで違いは気にならないかも？

かなり差が付くと思った鳥の羽毛の描写ですが、私のPC環境で見るとあまり変わらないかも。この程度ならばFotolifeでもいい気がしてきました……？

料理の写真はどれでも良さそうですね？（笑）

結局どれを使うか？

といった感じでざっくりと3種類の画像貼り付けを比べてみた訳ですが、以前に印象に比べてはてなフォトライフの画質（ねむさ）が気にならなくなっていたのがひとつ大きな収穫。

Flickrは個人的には応援したサービスではあるものの、相次ぐ身売りと値上げの連続を見ているとサービスの持続性にかなり不安が残ります。
あとは相変わらずマウスオーバーでロゴが表示される残念仕様がとても残念（表示を消す貼り込み方法もあるのですが、はてなブログのサイドバーから簡単に貼れる方法とは別になるので……）。

真ん中がFlickr……　やめて……

現状、16MPまでなら無料でアップし放題のGoogleフォトが持続性の観点からも最有力ではありますが、はてなブログの編集画面から貼り込む場合は、私のやり方では今の3ステップではどうにも使いにくい。最初から全ての写真を貼り込んで間にテキストを書いていく編集方法ならいいかもしれませんが、ブログの書き方を根本から変える必要があり、どうしても積極的に使う気にはなれません（現状のポップアップ画面でなくサイドバー表示のまま、階層化されされた表示がキープされると逆にGoogleフォト一択になりそうな気も？）。

当分は使い勝手の良いはてなフォトライフ（Fotolife）をメインに使いながら、写真をじっくり見て欲しい記事に関してFlickrを使うという……　つまりここ数年の使い方を継続する感じですね（笑）

おまけ：はてなブロガーなら知っておきたいフォトライフ周りあれこれ

ちなみに現在はてなブログを使ってる人の中には、「はてなフォトライフ（Fotolife）」をブログの標準写真機能ぐらいにしか思ってなく、単体のサービス名として／ウェブアルバムサービスだと認識してない人も多いような気がします。
最近ではあまりはてな的にも手つかずのサービスに追い込まれてる雰囲気もあり（個人の印象です）特に詳しく知る必要もありませんが、もし積極的に写真を見せるようなブログを運営しているならば、サービスの仕組みやできることなどは知っておくに越したことはないと思います。

ヘルプ - はてなフォトライフ
記事に写真や画像を貼り付ける（編集サイドバー「写真を投稿」） - はてなブログ ヘルプ
はてなフォトライフを使う - はてなブログ ヘルプ
はてなフォトライフの画像を貼り付けるときに、フォトライフ記法でaltとtitleを指定できるようにしました（はてな記法モード、Markdownモード） - はてなブログ開発ブログ
複数の写真を貼り付ける際に、編集サイドバーから選択した順番に貼り付けるようにしました - はてなブログ開発ブログ
複数の写真を横一列に並べて貼り付けられるようにしました - はてなブログ開発ブログ

関連のありそうな記事