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

2013.2.7

jetpack

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

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

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

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

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

通常の指定

[html]<img src="http://www.dream-seed.com/weblog/wp-content/uploads/2013/02/PC311620.jpg" alt="GP03" width="2048" height="1536" class="aligncenter size-full wp-image-24318" />[/html]

GP03

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

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

横幅を500pxで指定

[html]
<img src="http://www.dream-seed.com/weblog/wp-content/uploads/2013/02/PC311620.jpg" alt="GP03" width="500" class="aligncenter size-full wp-image-24318" />
[/html]

GP03

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

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

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

[html]
<img src="http://i1.wp.com/www.dream-seed.com/weblog/wp-content/uploads/2013/02/PC311620.jpg?w=1000&crop=100px,10px,500px,500px" alt="GP03" width="500" class="aligncenter size-full wp-image-24318" />
[/html]

GP03

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

フィルターをかけてみる

[html]
<img src="http://i1.wp.com/www.dream-seed.com/weblog/wp-content/uploads/2013/02/PC311620.jpg?w=500&filter=emboss" alt="GP03" width="500" class="aligncenter size-full wp-image-24318" />
[/html]

GP03

今度はフィルターです。まずはエンボス加工風。
[html]
<img src="http://i1.wp.com/www.dream-seed.com/weblog/wp-content/uploads/2013/02/PC311620.jpg?w=500&filter=grayscale" alt="GP03" width="500" class="aligncenter size-full wp-image-24318" />
[/html]

GP03

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

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

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

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

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

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

(source Jetpack, Photon, Photon API)

タグ: , , , ,

この記事が気に入ったらフォロー・購読をお願いします

最新情報をお届けします

News >モバイル

AppleファンはSheepleなのか? 老舗辞書が登録した例文が話題に

英語には「Sheeple」という造語があるそうです。Sheep(羊)とPeeple(人々)の混成語で、「従順で、すぐに人の言いなりになったり、影響を受けやすい人々」というちょっと皮肉を込めた言葉なのですが、このSheep ...

落ち着いた配色がカッコイイ、限定モデルのApple Watch NIKELABを購入

以前から他のスマートウォッチ(Android Wearとか)の比較用に欲しいとは思っていたのものの、なんとなく買いそびれていたApple Watch。そろそろ、安くなってきたSeries 1でも買おうかと思ったのですが、 ...

News >モバイル

HUAWEIとGoogle、Raspberry PiっぽいAndroid向け開発ボードを発表

HUAWEIとGoogleが、Raspberry PiののようなSingle Board Computer(SBC)、HiKey 960を発表しました。 Raspberry Piのようにそれを使ってなにかしらをDIYする ...

News >モバイル

Google、Nexus / Pixelへのセキュリティアップデート提供期限を公開

GoogleのNexusとPixelは、発売から2年間はAndroidのアップデートを提供、3年間はセキュリティアップデートを提供ということになっています。でも実際いつまで?というのはなかなか把握しきれなかったりするもの ...

News >モバイル

任天堂、3D表示のなくなった3DS、new 2DS LLを7月に発売

任天堂がnew 3DS LLから3D機能を取り除いたnew 2DS LLを7月13日に発売すると発表しました。価格は税抜14,980円。 折りたためない廉価版扱いの2DSはすでに発売中ですが、new 2DS LLは通常の ...

MENU

back to top