Picasaならブログで使う画像のリサイズはもう必要ない。ブログサービスの画像管理機能に不満がある人にもおすすめ。

Picasaは1GBまで無料(Google+に登録することで特定条件下で無制限になります)で利用出来るオンラインストレージです。写真動画を保存し、公開することが出来ます。追加容量は20GBへのアップグレードでも年間$5.00と安価です。Google+がスタートしてから更に使いやすくなりました。

ブログサービスの画像管理機能よりも便利なので『Piacasa×ブログ』の便利なところ書いていこうと思います。

Picasaならアルバム管理で画像の分類が出来ます

ブログにアップロードした画像はだいたい自分のアカウントに保存されますが、これにはカテゴリ管理可能などがありません。また、ブログによっては画像フォルダというものが無く、記事そのものに添付されるタイプもあります。


例えばこのSo-netブログの画像管理画面ですが一覧表示にはなるものの、サムネイルのサイズが小さいので写真の判別がちょっと難しいのです。


続いてこちらはアメブロの画像管理画面。アメブロには画像一括削除機能が無いので管理が非常に面倒だと言われています。また、一度に表示出来る画像の数も十数枚と少な目ですし、タグなどで関連付けすることも出来ないので探すのが非常に困難です。「前に使った画像をもう一度使いたいけど探せない…」なんてことがよくあります。アップロードエラーが発生するのも許せません。


Picasaはウェブアルバムという名前の通り、写真をアルバムごとに分けることが出来ます。アルバムから写真を移動させたり、違うアルバムにコピーすることも出来ます。一覧画面では表示サイズも変更出来るのでお目当ての写真を見つけるのも簡単です。

Picasaにアップロードした写真はサムネイルが自由に作れる(これがすごい)

Picasaにアップロードした写真はGoogleが元画像へのリンクを自動で作ってくれます。また、URLのパラメータを変更することによって自由にリサイズすることが出来ます

写真管理画面で選択出来るサムネイルのサイズは144px、288px、400px、640px、800pxになっています(画像があまり大きくない場合は"元のサイズ"を選択出来ます)。

以下にサンプルを並べてみます。順に144px、288px、400pxです。ブログで使うならこれくらいのサイズがいいですね。


貼り付け用のコード(アルバムリンク無し)は以下のようになっています。alt属性は付与されないのでXHTMLに準拠させる場合などは別途記述が必要です。パスがちょっと長いのが不便ですがこれは写真管理のための機能(アルバムが変わっても画像のパスを変更しなくても良いとか)だと思いますので我慢しましょう。

<a href="https://picasaweb.google.com/lh/photo/1x9y31J-cLv6PLp_DHmrD9MTjNZETYmyPJy0liipFm0?feat=embedwebsite"><img src="https://lh4.googleusercontent.com/-8mIfYGL59X0/TyUvh25nQJI/AAAAAAAAD0E/ZDvhtBToSic/s144/1.png" height="144" width="140" /></a>

サムネイルサイズを自由に変更するには?

ファイル名の手前にあるs144の数字部分を書き換えることによりGoogleがサムネイルをリアルタイムで自動生成してくれます。Amazonの商品画像と同じですね。いちいちPhotoshopとか出してリサイズしなくてもいいので便利です。ただし、元のサイズ以上のサイズにはリサイズ出来ません。また、サイズを変更した際はwidthheightの値も変更しなくてはいけません。widthheight属性は削除しても描画がされますが縦横の値を指定した方がブラウザの描画が早くなります。


例えばデフォルトだと144px未満の設定がありませんが、以下のように書き換えて100pxのサムネイルを作ることが出来ます。

https://lh4.googleusercontent.com/(中略)/s144/1.png
https://lh4.googleusercontent.com/(中略)/s100/1.png


50px、100px、150pxにしてみました。レイアウトを変更してもsrc属性の値を変えるだけなので楽ですね。数字の前のsというのは「長辺〜」という意味です。画像が横長の場合は「幅〜」、縦長の場合は「高さ〜」という指定になります。


でも凄いのはこれだけじゃなく縦横サイズ指定や正方形化、顔認識も可能です。パラメータについての詳細は以下のページをご覧下さい。元画像の取り出し方なども書いてあります。

Picasaウェブアルバムのサムネイル生成パラメータメモとリサイズ品質のテスト。透過PNGのリサイズが凄いかも。
Picasaウェブアルバムの写真を顔認識付きで呼び出す方法

他にも便利だな〜と思うところ

著作権表記が可能

Picasaにアップロードした画像はクリエイティブ・コモンズによる著作権表記が可能です。"著作権をすべて留保する"または"一定の条件下で再使用を許可する"から選択することが出来ます。

Google Analyticsによるアクセス解析が可能になりました

Picasaウェブにはアクセス数(再生回数)を記録する機能があったのですが、Google Analyticsを使った解析も出来るようになったみたいです。トラッキングIDを入力するだけで登録が可能です。(サムネイルで呼び出された画像の解析までは出来ません)

サムネイルをクリックした時に元の画像を表示したい

JavaScriptでURLを書き換えてしまうのが楽です。jQuery系のビューアを併用することも出来ます。

Picasaウェブアルバムの画像をLightboxで開くスクリプトを考えてみた
Picasaウェブアルバムを使ってネコネコアルバムを作ってみる

PNG形式を維持したままアップロードしたい場合

現状、PicasaアプリケーションからアップロードするとPNG形式の画像はJPEGに自動変換されます。PNG形式を維持したい場合はブラウザからアップロードすることで変換されなくなります。透過情報も維持されます。

Trackback