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)

タグ: , , , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

moto X(2017)とされる実機画像が流出 デュアルカメラを搭載か?

motorolaの未発表モデル、moto X(2017)とされる画像がGoogle+で公開されています。 moto Xといえば、現行のmoto Zが発売されるまでのフラッグシップシリーズ。Fastbo

Android父、開発中のベゼルレスな新端末をチラ見せ

Androidの産みの親、Andy Rubin氏が、自身が立ち上げた新会社Essentialで開発している端末をTwitterでチラ見せしています。 I'm really excited ab

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

以前から気になっていたHand Spinnerを購入してみました。 今回は珍しくGeekBuyingで購入したのですが、あとから調べたら日本のAmazonでも売っていました。もっとも日本だと2000円

米Amazon、Prime Exclusive Phonesにmoto G5 PlusとAlcatel A30を追加、広告表示の代わりに価格を割引

米Amazonがプライム会員向けにSIMフリー端末を販売するPrime Exclusive PhonesにMoto G5 PlusとAclatel A30を追加しました。現在Prime Exclusi

BIGLOBE SIMのエンタメフリーオプションに音楽ストリーミングサービスAWAが追加

MVNO(格安SIM)のBIGLOBEが提供するエンタメフリーオプションに、音楽ストリーミングサービスAWAが追加されました。 AWA – 音楽ストリーミングサービス BIGLOBEが提供

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

ついつい時間を忘れてしまいそう。手持無沙汰を解消するHand Spinnerを購入。

以前から気になっていたHand Spinnerを購入してみました。 今回は珍しくGeekBuyingで購入したのですが、あとから調べたら日本のAmazonでも売っていました。もっとも日本だと20...

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEI nova liteのコスパは異常 同価格帯の端末では競合がいない

HUAWEIが若者向けのシリーズとしてあらたに投入したのnova、その下位モデルという位置づけのnova liteを購入してみました。 nova liteは公式ショップや量販店では販売しておらず、...

Android父、開発中のベゼルレスな新端末をチラ見せ

Android父、開発中のベゼルレスな新端末をチラ見せ

Androidの産みの親、Andy Rubin氏が、自身が立ち上げた新会社Essentialで開発している端末をTwitterでチラ見せしています。 I'm really excited...

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEI P10 lite発表 スペックはnova liteよりもやや上で価格は約3万5000円

HUAWEIがMWCで発表したフラッグシップ、P10/P10 Plusに続き、廉価版となるP10 liteを発表しました(ただし、HUAWEIのサイト上では確認できず、画像やスペックはGSMAre...

MENU

back to top