Flickrの写真をブログの埋め込み用に使うテスト

写真ファイルのバックアップにFlickrを使い始めて、かなり癖のあるインターフェイスにも慣れてきてそんなに使いづらいとも思わなくなってきた。

一方、細かくTagを付けられるし、SetやCollectionなど他のクラウドストレージにはない機能があること、埋め込み用のコードのオプションが揃っているなど便利な点もある。バックアップ以外の活用ということではブログへの画像の埋め込みが真っ先に思いつくところ。

このブログは、Tumblrの「テキスト」タイプを使っていて、テーマはZEN 2.0を使わせていただいている。この環境で、Flickrの画像を埋め込むとどういう見栄えになるのか、テストしてみる。

まずは、Tumblrの標準の埋め込みツールを使った場合。この画像のオリジナルは4928 x 3264の解像度だけど、Tumblrへアップすると500 x 331にリサイズされてしまう。 一方ZEN 2.0では文字は最大1024ピクセル幅で折り返すようになっいるようなので、1024ピクセル以上の表示ができるディスプレイで見ると、文字と画像の左端は揃っているのに、画像が縮小されてしまって右端が揃わない。



次に、同じ画像ファイルをFlickrへアップロードして、その埋め込みコードをTumblrへ入れた場合。Flickrの埋め込みコードは何段階かの解像度を選択できる。またiframeを使った新しいコード(Embed)とhrefの従来コード(HTML)のいずれかを選ぶことができる。 ところが原因がよく分からないがiframeのコードを埋め込むとせっかくのレシポンシブデザインが崩れてしまう。なので従来のコードを使う。

ちなみにFlickrはブログでの公開用には新しく別のアカウントを取得した。写真1枚毎にアクセスのパーミッションを設定できるので、バックアップ用のアカウントで一部をブログ用に「Public」設定にすれば良いはずだけど、異なるパーミション設定を混在させてオペミスしたときの復旧のわずらわしさを考えれば、ワケたほうが安心なため。

以下は4種類の解像度で写真を埋め込んだもの。文字の表示と対照するためにダミーの文字列を入れてある。

2048 x 1536 – dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text

13325501204_3baba3823c_k

1600 x 1060 – dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text

13325501204_3baba3823c_k

1024 x 678 – dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text

13325501204_3baba3823c_k

800 x 530 – dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text

13325501204_3baba3823c_k

以上から分かるのは、表示幅1024ピクセルを超える画像をブログに埋め込んでも、ファイルとしてその解像度は維持されるものの、Tumblr上での表示は横幅1024に制限されるので表示上は変わらないということ。

無用に大きなサイズの画像を使っても表示に時間が掛るだけなので、Flickrを使うにあたっては、

  • Flickrへは撮影したできるだけ高解像度のファイルをアップロードする。
  • FlickrからTumblrへの埋め込みコードは横幅1024ピクセルを指定する。

というルールで埋め込めば、PCのブラウザで表示した際に、文字と画像が左右両端で揃う。 かつ、埋め込んだ画像をクリックすればFlickrの画面でオリジナルの高解像度画像を見ることができる。

より高解像度の画像を埋め込むことで、今までよりも細部がよく見えるようになって好ましいが、画像の縦にピクセル数も増えて文字と画像のバランスが今までと違ってしまう。また、スマホから見る際に、表示に時間が掛かってしまうかもしれない。

とりあえず、この設定でFlickrをしばらく使ってみることにする。

スポンサーリンク

フォローする