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

17

12月

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

2020年12月17日 CDN

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

CDNとは

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

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

CDNの種類

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

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

Imgixを使うメリットの例

  1. 自サーバーの負荷が削減されることでWEBサーバーからのレスポンス速度低下を抑えることができる
  2. わざわざリサイズや圧縮せずとも、元画像を入れておき適切なパラメータを付与した画像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

画像フォーマットの変換

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

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

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

導入手順

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

  1. Imgixに登録(無料期間有り)

  2. Amazon S3にバケットを作成し、画像をアップロードしておく。例えばバケット直下にtest_image.pngをアップロードしたとします。

  3. バケットの紐付けを行います(ImgixのSource)
    IAMの設定はここでは割愛しますが、作成したバケットのアクセス権限を持ったIAMユーザーを作成し、設定します。
    file

  4. ↑で設定したDomainsでアクセスすると、既にImgixのCDNで配信が可能となっています。デフォルトではimgixのサブドメインですが、設定でカスタムドメインを適用することも可能です。
    https://xxxxx.imgix.net/test_image.png(ダミーURLです)

  5. あとは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の導入で悩んでいる方にとっては非常に有用なサービスですので是非お試しください。

CONTACT  US

EC・WEBサイト制作会社を
お探しですか?
  • チェックボックスECシステム、WEBアプリケーション開発ができる会社を探している
  • チェックボックス既存WEBアプリ、WEBサイトの細かなカスタマイズをしてほしい
  • チェックボックス新規・リプレイス案件の要件定義、設計から任せられる会社を探している
  • WEBアプリケーションを要件定義から
    運用まで
    ワンストップで支援いたします。
    お気軽にお問い合わせください。