カナエテ では画像 CDN に「Imgix」を採用しています。 本記事では Imgix の特徴や導入例などを紹介します。
CDN とは
Content Delivery Network の略称で、端的に書くとコンテンツ（データ）を自サーバーではなく外部サーバー（世界各地）で配信してくれる仕組みのことを指します。
細かい話はここでは扱いませんが、以下の記事が参考になりますので引用いたします。 https://knowledge.sakura.ad.jp/19191/
CDN の種類
有名所では「Cloudflare」「CloudFront」「Akamai」が挙げられます。 弊社でも以前は AWS の CloudFront と Lambda Edge を使って CDN していました。
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
画像フォーマットの変換
使用頻度は低いですが、フォーマット変換も可能です。 https://docs.imgix.com/apis/rendering/format/fm
その他よく使うであろう機能
- トリミング
- 画像透かし（ウォーターマーク）
- レスポンシブ対応
導入手順
簡単に導入手順を紹介します。 読んでいただくと分かりますが、導入はすぐに完了します。
- 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 の導入で悩んでいる方にとっては非常に有用なサービスですので是非お試しください。