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)

タグ: , , , ,

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

最新情報をお届けします

任天堂のスマートフォンゲーム「ファイアーエムブレム ヒーローズ」発表 iOS/Androidとも2月2日に配信開始

任天堂のスマートフォン向けアプリ第3弾として、「ファイアーエムブレム ヒーローズ」が発表されました。 配信予定は2月2日となっています。 既存のファイアーエムブレムシリーズの移植ではなく、スマートフォ

GPD WINでのRemote Play PCのコントローラー設定方法

先日紹介した、GPD WINでPS4のリモートプレイをするための「Remote Play PC」ですが、コントローラの設定方法がかなりわかりにくい(少なくとも私はかなり悩んだ)ので、紹介しておきたいと

世界最小級の紛失防止タグ「MAMORIO」 ユーザー数が増えると紛失時の発見率も上がる「クラウドトラッキング機能」を搭載

日本でも提供が開始されたスターアップの製品を扱うAmazon Launchpad。 関連:Amazon、スマートアップの製品のみを扱う特設ストア「Amazon Launchpad」を日本でも開始 –

広角をより広角に、望遠をより望遠にするiPhone 7 Plusのデュアルカメラ用レンズキットが販売中

香港のMatenro-HKでiPhone 7 Plusのデュアルカメラに装着するレンズキットが販売されています。 この手の外付けレンズは通常のスマートフォン用では普通に見かけますが、デュアルレンズ用は

MMD研究所、「女性のスマートフォン利用実態調査」結果を公開 使用しているスマートフォンがiPhoneが圧倒的

MMD研究所が「女性のスマートフォン利用実態調査」というレポートを公開しました。 女性のスマートフォン利用実態調査 対象は15歳~49歳の女子高生、女子大生、社会人独身女性、既婚女性の計1,574人。

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

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

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

Amazon、スマートアップの製品のみを扱う特設ストア「Amazon Launchpad」を日本でも開始

Amazon、スマートアップの製品のみを扱う特設ストア「Amazon Launchpad」を日本でも開始

Amazonがスタートアップの製品のみを掲載する「Amazon Launchpad」を日本でもスタートさせました。 Amazon Launchpadはスタートアップ企業が手掛ける製品のみを扱う特...

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

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

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

Y!mobile、Android One第2弾となるS1、S2を発表

Y!mobile、Android One第2弾となるS1、S2を発表

Y!mobileが国内のAndroid One第2弾となるAndroid One S1、S2を発表しました。 国内Android Oneの第2弾 Android Oneは、NexusやPixe...

小型PC「GPD WIN」のゲームパッドをPS4のリモートプレイで使う方法

小型PC「GPD WIN」のゲームパッドをPS4のリモートプレイで使う方法

キーボードとゲームパッドが付いた小型PC「GPD WIN」。 小さくてもWindows PCなので、PlayStation 4のリモートプレイをインストールして、PS4のゲームをプレイすることが可...

MENU

back to top