Imgixを使った画像CDN導入のメリットや手順

Japonlineでは画像CDNに「Imgix」を採用しています。
本記事ではImgixの特徴や導入例などを紹介します。

CDNとは

Content Delivery Networkの略称で、端的に書くとコンテンツ（データ）を自サーバーではなく外部サーバー（世界各地）で配信してくれる仕組みのことを指します。

細かい話はここでは扱いませんが、以下の記事が参考になりますので引用いたします。

さくらのナレッジ

CDNってそもそも何？なんかサーバの負荷が下がるって聞いたんだけど！〜Web制作/運...

https://knowledge.sakura.ad.jp/19191/

今回の連載では、まだCDN（Content Delivery Network）を使ったことのない・よく知らないというWebデザイナーさん、Webディレクターさんや企業のWeb担当者の方に向けて、CDNとは？いくら掛かるの？リスクはないの？といった疑問への回答から、実際の設定方法、WordPressサイトでのCDN利用に気をつけることなどを扱っていく予定です。……

CDNの種類

有名所では「Cloudflare」「CloudFront」「Akamai」が挙げられます。
弊社でも以前はAWSのCloudFrontとLambda Edgeを使ってCDNしていました。

株式会社Japonline

Amazon S3の共有バケットをCloudFront経由で独自ドメインURLでアクセスできるよう...

https://www.japon-line.co.jp/tech/amazon-s3の共有バケットをcloudfront経由で独自ドメインurlでア

この記事では、備忘録も兼ねてAmazon S3の共有バケットをCroudFront経由で独自ドメインアクセスをさせる方法を記載していきます。実現したいこと管理画面でAmazon S3にアップロードした画像ファイルをCloudFront経由でアクセスしたいCloudFrontのURLではなく、独自ドメインURLベースでアクセスしたい?w=400というGETパラメータを与えることで、画像のリサイズを実現したい（※）※Lambda@Edgeを使うことで画像リサイズ結果をキャシュ化させることができるのですが、この詳細は別の記事としてまとめる予定です。リサイズ画像はS3に保存さ...

CloudFrontでも大きな問題はないのですが、Lambda@Edgeでの画像編集処理にサイズ制約があること、セットアップの容易性の観点から代替サービスを検討する運びとなり、タイトルにありますように「Imgix」を採用することとなりました。

Imgixを使うメリットの例

自サーバーの負荷が削減されることでWEBサーバーからのレスポンス速度低下を抑えることができる
わざわざリサイズや圧縮せずとも、元画像を入れておき適切なパラメータを付与した画像URLにするだけで適切な画像を返してくれる（xxxx.png?w=300&q=70 -> 幅300pxの品質70%に変換）、
※2回目以降のアクセスでは変換後のキャッシュされた画像を返すので毎アクセス変換するわけではない
※リソースサーバーの格納コストもあるため最低限のリサイズはしておいておいた方が良い
※この場所ではこのサイズ、レスポンシブではこのサイズで少し圧縮強めで帯域考慮する、、といったチューニングが簡単に実現できます。

Imgixの特徴

画像配信に特化したCDNサービスです。
何よりも導入が非常に容易であることが特徴として挙げられます。なおかつ機能も申し分なく大抵のケースにおいて必要十分であることも導入の後押しをしてくれました。
また、費用も安価であることも導入しやすいサービスであると言えます。
※それほどトラフィックのないWEBサービスであれば月10ドルとちょっとでまかなえます。

Imgixでできること例

https://docs.imgix.com/apis/rendering
を見ていただくのが一番ですが、やりたいと思うことは大抵何でもできます。

画像のCDN配信

CDNサービスなので当然ですが...

画像サイズ指定

画像ファイル名の後ろにパラメータを追加します。単位はpxです。
元の画像が4000pxほどあったとしても、以下の例だと600pxにリサイズして配信してくれます。
xxxx.png?w=600

画像品質指定

画像ファイル名の後ろにパラメータを追加します。0〜100%の間で品質を指定できます。
以下の例では、80%に圧縮して配信されます。
xxxx.png?q=80

画像フォーマットの変換

使用頻度は低いですが、フォーマット変換も可能です。

docs.imgix.com

Output Format | Format Parameters | imgix URL API Documentation

https://docs.imgix.com/apis/rendering/format/fm

Changes the format of the output image.

その他よく使うであろう機能

トリミング
画像透かし（ウォーターマーク）
レスポンシブ対応

導入手順

簡単に導入手順を紹介します。
読んでいただくと分かりますが、導入はすぐに完了します。

Imgixに登録（無料期間有り）
Amazon S3にバケットを作成し、画像をアップロードしておく。例えばバケット直下にtest_image.pngをアップロードしたとします。
バケットの紐付けを行います（ImgixのSource）
IAMの設定はここでは割愛しますが、作成したバケットのアクセス権限を持ったIAMユーザーを作成し、設定します。
↑で設定したDomainsでアクセスすると、既にImgixのCDNで配信が可能となっています。デフォルトではimgixのサブドメインですが、設定でカスタムドメインを適用することも可能です。
https://xxxxx.imgix.net/test_image.png（ダミーURLです）
あとはWEBアプリケーションからの画像URLの向き先をImgixのドメインに変更するだけです。

https://xxxxx.imgix.net/test_image.png?w=300→300px幅にした画像を取得
https://xxxxx.imgix.net/test_image.png?w=300&q=80→300px幅、画像品質を80%にした画像を取得

パラメータをつけることで変換後の画像を取得できます。キャッシュサーバーでキャッシュされますので、次回以降のアクセスについてはキャッシュが残っている限り再変換処理は行われないため非常に高速です。

まとめ

上記のように導入が非常に容易ですので初めての方でもすんなりと本番運用ができると思います。
CDNの導入で悩んでいる方にとっては非常に有用なサービスですので是非お試しください。

Imgixを使った画像CDN導入のメリットや手順

17