WordPressの多機能プラグインJetpackのPhotonがすごいかもしれない

WordPressの有名なプラグインにJetpackというのがあります。非常に多機能なプラグインでアップデートの度に機能が追加されたりもしているのですが、このブログでも以前からサイドバーにあるPopular Postsを表示するために利用しています。

そのJetpack、昨日何気なく見ていたらPhotonという機能が目につきました。それは何者なのか、説明文によると、

WordPress.com の CDN (コンテンツ・デリバリー・ネットワーク) から画像を読み込ませ、サイトを高速化しましょう。画像をキャッシュし、高速なネットワークから提供することで、あなたのサーバーの負荷をワンクリックで低減できます。

とのこと。これはなかなか良さげじゃないかと調べてみたら、画像のキャッシュ以上に面白そうなことが出来そうなのでちょっと試してみました。

下記で使っている画像は、もとはすべてこのサイトにアップした2048 x 1536の1枚の画像です。

通常の指定

まずは普通に画像を表示します。HTML上ではこのサイト上の画像を指定していますが、ソースを見るかChromeなどで画像だけを別のタブで開くとJetpackによって画像ソースが「i1.wp.com」になっているのがわかると思います。

width=2048なのに横幅が縮小されているのはCSSによるものです。

横幅を500pxで指定

次に最初の画像をwidth=”500″で指定したもの。HTML上では横幅2048pxの画像を500pxに縮小して表示するという指定ですが、これも画像だけを開くと横幅500pxの画像になっているのがわかると思います。

大きな画像を縮小しているわけではないので読み込み速度が速くなります。

縮小した画像を切り抜いてみる

今度は範囲指定で画像を切り抜いています。切り抜く前に横幅1000pxに縮小し、それを横100px、縦10pxの位置から500pxの正方形で切り抜く指定です。

フィルターをかけてみる

今度はフィルターです。まずはエンボス加工風。

こっちはグレイスケール変換。

使い方は難しいけど使えれば便利そう

最後の3つはキャッシュされた画像のURLに対してパラメータを指定していますが、PHPやJavascriptを使えばオリジナルのURLに対してパラメータの指定も可能だと思います。

これをうまく使えれば、サイトの読み込みを早くしたりするのに効果がありそうです。

例えば最近は流行りのレスポンシブデザインでCSSを使って画像を縮小表示したりする場合、大きな画像を読み込ませ小さく表示するだけですが、Photonを使えば画像そのものを小さくすることが可能です。HTMLを書くときには元画像のサイズを気にすることなく表示させたいサイズの画像を自動生成することが可能、というのはかなり魅力的だと思います。

まだ調べ始めたばかりで、どんなことができるのかどんな風に使うのかを完全に理解できていませんが、ぼちぼちとサイトに組み込んでいきたいと思います。

(source Jetpack, Photon, Photon API)