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

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

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

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

まずは、Tumblrの標準の埋め込みツールを使った場合。この画像のオリジナルは4928 x 3264の解像度だけど、Tumblrへアップすると500 ｘ 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

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

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

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