プラグイン［Jetpack］の機能『Photon』はWordPress外からでも使えます。

これ、ちょっとした裏ワザです。

ワードプレスのプラグイン［Jetpack by WordPress.com］で提供されている『Photon』を、WordPressを経由せずに利用する方法を紹介します。

Photon の仕組み

PhotonはWordPress.comが提供する無料のCDNです。

キャッシュサーバーは「http://i0.wp.com」「http://i1.wp.com」「http://i2.wp.com」の３つが用意されていて SSL にも対応しています。

初回アクセス時に画像を取得して、以降、同URLへアクセスするとキャッシュされた画像を表示する仕組みになっています。
対応している画像はJPEG、PNG、GIFの３種類。

通常はワードプレスのプラグイン［Jetpack］を使って、メニュー項目の「設定」→「Photon」から機能を有効化すると、投稿や固定ページ内で使っている画像を自動的に「wp.com」のサーバーにキャッシュして配信してくれるようになります。

プラグインディレクトリ : Jetpack by WordPress.com

例えば自前のサーバーに「http://example.com/images/sample.png」という画像ファイルが用意してあると仮定します。この画像は Jetpack Photon を経由すると以下のようなURLに変換されて出力されます。

http://i0.wp.com/example.com/images/sample.png

「http://i0.wp.com」の箇所はランダムで「http://i1.wp.com」または「http://i2.wp.com」が使われます。

変換されるURLのパラメーターはシンプルなルールに則っていて、単に「http://i(0|1|2).wp.com/」の後にオリジナルの画像のパスが追加されるだけ。

つまり、このルールを利用すると……

もうピン！ときましたね。

自前のサーバーに用意した画像をHTMLに埋め込むときに、src属性にPhotonのキャッシュサーバーを経由したパスを記述してしまおうというワケです。

前述したとおりですが、例えば下記のような画像がHTMLに埋め込まれている場合。

<img src="http://example.com/images/sample.png" alt="サンプル画像" width="400" height="300">

次のようにsrc属性を書き換えます。

<img src="http://i0.wp.com/example.com/images/sample.png" alt="サンプル画像" width="400" height="300">

より早くキャッシュされた画像を表示させるために、DNSルックアップ（名前解決）を先に行うためのコードを <head>〜</head> タグ内に記述しておきましょう。

<link rel='dns-prefetch' href='//i0.wp.com'>
<link rel='dns-prefetch' href='//i1.wp.com'>
<link rel='dns-prefetch' href='//i2.wp.com'>

これは『DNSプリフェッチ』と呼ばれるテクニックで、正規の方法で Photon を有効化した際にも同じコードが自動で挿入されます。

唯一のデメリットは一度キャッシュされた画像は半永久的に削除できないという点。
キャッシュされた画像を上書きでアップロードしても更新されないので、画像を入れ替えたい場合などは新しい画像名で再度アップロードする必要があります。

幸いなことに wp.com のサブドメインは「i0」「i1」「i2」の３種類がありますので、画像を更新するたびに「i0」→「i1」→「i2」と使い回す方法で難を凌ぐしかないですね。

なお Jetpack 公式には次のような注意書きがあります。

Photon is only allowed to be used by sites hosted on WordPress.com, or on Jetpack-connected WordPress sites.

ここで紹介した『裏ワザ』は WordPress で構築したサイト上で使うならグレーゾーン。それ以外のサイトでは完全にNGのはずです。
ご利用の際は自己責任でどうぞ。