jetpack

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)

タグ: , , , ,

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

最新情報をお届けします

Stealth

体感トレーニング「プランク」を楽しみながらできるトレーニングアイテム「Stealth」がKickstarterでキャンペーン中

効果があると話題の体感トレーニング「プランク」をもっと楽しみながら効果的に行えるアイテム「Stealth」がKickstarterでキャンペーン中です。 プランクは床に肘をつき体を床と平行にして20秒

C-89 iron man Speaker

かっこいいBluetoothスピーカー「C-89 Iron Man Bluetooth Speaker」をレビュー 性能も意外と悪くない

GearBestで黒いアイアンマン風のBluetoothスピーカー「C-89 Iron Man Portable Bluetooth Music Speaker」を購入してみました。 風というか、直球

Amazon

Cyber MondayセールでKindleやFire TV Stickが大幅割引中!

Amazonの今年最後のビッグセール、Cyber Mondayセールが開始されました。 いろいろと安くなっていますが、Amazonの電子書籍リーダーKindle、Kindle Paperwhite、そ

Amazon Go

米Amazon、レジがないリアル店舗「Amazon Go」をオープン

米Amazonが噂になっていたリアル店舗「Amazon Go」をシアトルにオープンさせました。 このAmazon Go、1800平方フィート(約167㎡)ほどのコンビニで、最大の特徴はレジがないという

amazon

Amazonギフト券10,000円分が当たる「Prime Musicを聞いてAmazonギフト券を当てよう」キャンペーン開催中

Amazonで、「Prime Musicを聞いてAmazonギフト券を当てよう」というキャンペーンが開始されました。 1000名にAmazonギフト券10,000円分が当たります。 「Prime Mu

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

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

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

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

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

Amazonの日本版Cyber Mondayセールは12月6日0時から開催

Amazonの日本版Cyber Mondayセールは12月6日0時から開催

世界的にはCyber Mondayは先週でしたが、日本では12月第2週がCyber Monday。 ということで、12月6日0時からAmazonでCyber Mondayセールが始まります。 A...

HUAWEI Japanが12月13日にMate 9を国内発表?

HUAWEI Japanが12月13日にMate 9を国内発表?

HUAWEIが12月13日に何かの発表を行うようです。 HUAWEI JapanのTwitterアカウントがツイートしているのですが、「A STEP AHEAD」というキャッチが使われています。...

MENU

back to top