リアルタイム画像処理機能が充実していて、画像ファイルの配信向けに特化した CDN （Content Delivery Network / コンテンツ・デリバリ・ネットワーク） として 「imgix」 というサービスがあります。存在自体は結構前から知っていたんですが、一度試してみようと思っていたものの長いこと手つかずでいました。
今回ちょっと時間ができたので、試しにこの Blog で導入してみてどんな感じか探ってみたんですが、導入も簡単で、かなり便利だったので導入方法を含めて紹介してみようと思います。
imgix でできること
imgix の利点は、なんといっても豊富に用意された画像処理 API でしょう。ファイル名の後ろにパラメータを付与するだけで、様々な画像処理済みのファイルを返してくれます。
具体的な API については下記にリファレンスがありますが、各種フィルターをかけたり、サイズを変更したり、トリミングしたり、回転させたり、あるいはテキストを合成したり、フォーマットを変更したりといった様々な処理をパラメータのみで行うことができます。
例えば、人物を撮影した元のイメージソース （man.jpg） に対して、自動補正 （Enhance） を加えつつ、自動検知で顔のアップを、300px 四方のサイズで切り抜いて欲しいなどという場合、
<img src="https://example.imgix.net/man.jpg?w=300&h=300&fit=crop&crop=faces&auto=enhance" alt="Man" >
のように指定することで処理された画像が返ってきます。
具体的にやると下記のような感じ。
まずは元画像です。つい最近、某スタジアムで撮影した写真。
まずは真四角 （200px 四方） に切り抜いてみましょう。パラメータは下記のように指定してみます。
fit=crop&w=200&h=200
そうすると、下記のようになります。
さらに、ボーダーを付けてみましょう。15px の太さで、透明度 55%、#FF0000 のボーダーを指定します。
border=15,55ff0000
ついでにテキストも入れてみましょう。テキストの色やサイズ、位置はもちろん、フォントなどもパラメータで指定することができます。
txt=FOOTBALL!&txtsize=32&txtclr=ffffff&txtalign=top,center&txtpad=40&txtfont=Futura%20Condensed%20Medium
つまり、元画像を 1つ用意しておきさえすれば、サイズを変えたりみたいなことはパラメータのみで行えますので、例えばレスポンシブイメージみたいなことをしたい場合でも、画像を用意する手間が大幅に省けたりするわけです。
もちろん、画像処理などは自前のサーバサイドでやってしまえばよいという場合もあるとは思いますが、CDN を導入しつつ、とりあえず画像の配信だけ手軽にやりたいなという人にとってはとても便利なサービスと言えると思います。
同様のサービスとしては、「ImageResizer」 や 「Cloudinary」、もっと規模の大きいサイト向けだと 「Akamai Image Manager」 や 「Fastly Image Optimizer」 など色々ありますが、最後の 2つは個人の Blog などが使うレベルではありませんし、機能が充実していて、個人レベルでも使いやすいサービスとしては今回紹介している 「imgix」 が有力候補になるかと思います。
- ImageResizer - Image CDN with Image Resize API
- Cloudinary - Image and Video Upload, Storage, Optimization and CDN
- Image Manager - Akamai
- Fastly - Image Optimization Sandbox
imgix の価格
まず最初に、imgix は基本有料のサービスですので、価格は確認してから使ってください。
この記事を書いている時点での基本料金は、「3ドル / 1,000 画像」、転送量に対して「8セント（0.08ドル） / 1GB」 なのですが、1点注意が必要なのは 「Monthly Minimum」、つまり月の最低料金が 「10ドル」 と決まっている点です。
ですので、1,000 画像、転送量も 1GB に満たない （多分、個人の Blog レベルでは簡単には到達しないんじゃないでしょうか） 場合でも、最低 10ドルは課金されますから、今の為替レートだと、月額 1,000円ちょっとは必ずかかる最低料金になります。
[2018-04-02 追記]
実際に導入から 1ヶ月間、様子を見てみましたが、当サイトで、転送量が概ね 3.18GB、転送量に対してかかる料金が 0.32ドル。これに基本料金の 3ドルが加わって、3.32ドルなのですが、実際にはこれだと最低料金に満たないため、10ドルの請求という感じになりました。月のアクセス数が10万 PV 程度の個人 Blog なら、余程画像を大量に使っていない限りは概ねこんな感じになるんじゃないでしょうか。
これを高いと思うか、安いと思うかは人それぞれだと思いますが、個人的にはかなりリーズナブルな価格設定なんじゃないかなと思います。
ちなみに、アカウントには新規サインアップで 10ドル分のクレジットがついてきますので、初月は実質無料で利用できるということになりますね。
imgix の導入手順
導入の手順的には下記の通りになります。まずは、必要な情報を入力してサインアップします。
アカウントの作成が完了すると、画像の配信に利用するサブドメインの設定 （独自ドメインも利用できますが今回は説明を省きます） と、元画像をどこに置くかといった設定を行うため、「Source （ソース）」 を作成しろと言われます。
サインアップしたばかりの状態だと当然ながらソースはまだひとつも設定されていない状態ですので、「Add a source」 ボタンを押して、設定画面に進みます。
ちなみにこのソースは複数作ることができますので、異なるドメインの複数サイトで利用したいという場合でも、必要な分、ソースを追加していけばよいことになります。
ソースの設定画面では、基本設定として下記の 3項目を設定します。まず画像の配信に利用するサブドメインを指定します。これはもちろん、他の人がすでに使っているものは設定できませんので、自分で管理しやすく、他の人と重複しないものを設定する必要があります。
次に 「元画像をどこに置くか」 という設定がありますので、4つの中から選択します。今回は自分のサーバ、つまりこの Blog を運用しているサーバに元画像は置きますので、「Web Folder」 を選択します。
最後に、ベース URL を指定します。この Blog の URL をそのまま入れていますが、これで、CDN 側にリクエストする画像のパスが、この Blog のパスと同じになります...... という言い方だとちょっとわかりにくい気がしますので下記に補足します。
- imgix URL：
https://example.imgix.net/ - 元画像の置き場所： Web Folder
- ベースURL：
https://example.com/image
例えば上記のように設定した場合、
https://example.com/sample.jpg
というファイルは、
https://example.imgix.net/image/sample.jpg
という URL で取得できます。imgix はオリジナル画像を取得後、ベース URL で指定されたパスの下に、オリジナルと同じ階層構造で画像を保管していく形ですね。つまり、私のようにドメイン以下のサブディレクトリを指定せず、サイトの URL だけを入れておけば、
https://example.com/sample.jpg
というファイルは、
https://example.imgix.net/sample.jpg
で取得できますから、既存ソースコードに記述された img 要素のリソース URL から、ドメイン部分だけ imgix のドメインに変える、あるいは付け加えるだけで簡単にソースコードの修正と imgix 導入が完了するということになります。
なお、画像の保管場所に関して、詳しくは下記の公式ドキュメントで説明されていますので参考まで。
さて、設定が完了したら保存すると、設定が反映され、数秒から数分でデプロイ完了という表示になります。
取得したい画像の URL のドメイン部分だけ imgix のものに変えてアクセスしてみて、画像が返ってくれば成功と。
当サイトでの具体的な利用方法
まずはトップページの記事リストで使われているサムネイル画像を imgix から配信するようにしてみました。その際、今までは面倒なので単純な img 要素だけ記述していたものを、picture 要素を使用したレスポンシブイメージにすることで、画面サイズやデバイスピクセル比に応じて適切なサイズの画像を出し分けるようにしてみました。
元のソースコード
画像の部分だけ抜き出すと、元々のソースコードは下記のように単純な img 要素だけ使用していました。
<p> <img src="/img/sample.png" alt="" /> </p>
imgix 導入後のソースコード
修正後のソースコードは下記のような感じになりました。画像のサイズ指定やメディアクエリに関してはこの Blog のデザインに依存するので参考までにですが。
<p>
<picture>
<source media="(max-width: 375px)"
srcset="https://example.imgix.net/img/sample.png?fit=clip&w=106&dpr=2 2x,
https://example.imgix.net/img/sample.png?fit=clip&w=106&dpr=3 3x,
https://example.imgix.net/img/sample.png?fit=clip&w=106&dpr=4 4x" />
<source media="(max-width: 320px)"
srcset="https://example.imgix.net/img/sample.png?fit=clip&w=180" />
<source srcset="https://example.imgix.net/img/sample.png?fit=clip&w=174&dpr=1 1x,
https://example.imgix.net/img/sample.png?fit=clip&w=174&dpr=2 2x,
https://example.imgix.net/img/sample.png?fit=clip&w=174&dpr=3 3x,
https://example.imgix.net/img/sample.png?fit=clip&w=174&dpr=4 4x" />
<img src="https://example.imgix.net/sample.png?fit=clip&w=348" alt="" />
</picture>
</p>
パラメータは 「?」 に続けて記述しますが、今回使用しているのは下記の 3つです。
fit=clip：
リサイズモードの設定です。fit=clipは、画像をトリミングせずに、指定した幅と高さの範囲内に収まるようにサイズ変更してねという指定になります。リサイズ時のデフォルト値なので指定しなくてもいいんですが一応。w=[数値]：
画像の横幅を指定します。これによって指定した横幅になるようにリサイズされますが、上記の通り、リサイズモードをfit=clipにしているので、縦サイズは画面のアスペクト比を変えないように自動で調整されます。ちなみに、0～1 の間の数値、例えば 「0.5」 などと指定すれば、元画像の半分のサイズ （0.5倍です） で返ってきます。dpr=[数値]：
デバイスピクセル比を指定します。例えばw=174&dpr=2と指定すれば、横幅 348px の画像が返ってきます。いちいち 「174px の 2倍だから......」 なんて計算しなくていいので便利。数値は 1～8 の間で指定します。デフォルト値は 「1」 です。
これだけ複雑な指定をしても、サーバに置く元の画像は 1つで済んでしまいます。元画像に十分なサイズがあればいいので、適当なサイズで作成してサーバに上げるだけであとは imgix にお任せできちゃうのはとても楽です。
パラメータのデフォルト値も設定可能
また、パラメータは全画像に対するデフォルト値を設定することも可能です （一部対象外のパラメータもあるようです）。
例えば、auto=compress パラメータを付けると画像のファイルサイズを圧縮するための最適化を行ってくれますが、全画像に最初から適用したい場合は、下記のようにソースの設定画面で、デフォルトパラメータを指定することができます。
画像にテキストを載せたり、ロゴ画像などとブレンドしたりすることもできるので、写真がメインの Blog などで、掲載する全画像に自動的に自分の署名や著作権表示を入れたいなんて用途にも使えると思います （ただ、元画像の場所が Web Folder の場合、元画像の場所を推測するのは簡単なのでちょっとやり方を考えないと厳密には意味ないかもしれませんけども）。
導入の効果
前述したとおり、複数サイズの画像を出し分けたいなんて時には、パラメータを付けるだけで簡単に行えるので便利ですよねというのはもちろん、ページの表示速度向上にも効果がありました。
下記の 2枚の画像は、このサイトのトップページを Google の PageSpeed Insights で診断したものです。
上が imgix 導入前、下が導入後になりますが、特にパソコン版のスコアが、元々 「Low」 と診断されていたものが、導入後は 「Good」 と診断される状態にまで改善しました。
モバイルの数値は導入前から 「Good」 だったので、特にパソコン向けの方は気にしていなかったのですが、imgix 導入で簡単に改善したのはよかったです （imgix 導入自体の効果というより、レスポンシブイメージに対応したことが要因としては大きいとは思いますが）。
その他、遅延読み込みと併用したい場合などに便利な imgix.js なども提供されていたり、開発者向けのライブラリ等も色々と用意されているので便利かもしれません。
ということで、ちょっと費用はかかりますけども、低コストで画像の配信を最適化したいという場合には便利なサービスかと思いますので、興味ある方は試してみるとよいのではないでしょうか。
今回はサイト内の一部画像にのみ導入してみたという段階で、各記事ページの画像などまで含めて、サイト内の画像全てに対して imgix から配信するようにしたわけではありませんが、サイト側で修正しなければならない点が少ないなど導入の手軽さや、やめたいときも比較的簡単に元に戻せそうなのでいいかな、なんて思っています。
