imgix という画像変換サービス(メモ)
imgixとは
Zebrafish Labs, Inc. というサンフランシスコの会社が提供している、画像変換並びにキャッシュサービスです。ウェブサイトで「Powerful image processing, simple API」と銘打っている通り、シンプルに使える画像変換API群といった感じだと思います。
ちなみに読み方は( image • icks )が正しく、( image-i-x )は誤りとのことでした。調べてみたところ Press Kitのページで説明されていました。
imgixのCDNについて
FastlyのCDNを使って配信をしています。日本では東京に3箇所、大阪に1箇所あることがFastlyのページで分かります。
imgixの導入事例
日本企業では ホテル・旅館予約サイトの 一休.com と、日本経済新聞社の日経電子版での導入事例があります。
imgix導入で画像最適化とサイトスピード改善(speakerdeck)
imgix導入で画像最適化とサイトスピードを改善した話
日経電子版を速くする(speakerdeck)
事例紹介のページを見ると
・Social & Sharing
・E-Commerce
・News & Media
の3分野を紹介しています。3分野とも画像を多用しているサービスの代表例に挙げられる分野ですので納得の事例カテゴリー分けだと思います。
余談 日経電子版のエンドポイント
本題と完全に脱線しますが、日経電子版は 1)パソコン版 , 2)タブレット・スマートフォン版 で異なる挙動(サービスの利用)をしていました。
(引用 : https://dsquare.nikkei.com/ )
パソコン版の www.nikkei.com はDNSのCNAMEでAWSのELBへ
$ dig www.nikkei.com
;; ANSWER SECTION:
www.nikkei.com. 122 IN CNAME www-nikkei-com-689290018.ap-northeast-1.elb.amazonaws.com.
www-nikkei-com-689290018.ap-northeast-1.elb.amazonaws.com. 31 IN A 54.250.56.212
www-nikkei-com-689290018.ap-northeast-1.elb.amazonaws.com. 31 IN A 13.112.134.153タブレット・スマートフォン版の r.nikkei.com はDNSのCNAMEでFastlyへ
$ dig r.nikkei.com
;; ANSWER SECTION:
r.nikkei.com. 1294 IN CNAME r-nikkei-com.n8s.jp.
r-nikkei-com.n8s.jp. 225 IN CNAME dualstack.f4.shared.global.fastly.net.
dualstack.f4.shared.global.fastly.net. 10 IN A 151.101.110.110そしていずれの場合でも画像については article-image-ix.nikkei.com を使用しており、画像は imgix を使用し、imgixがCDNにFastlyを使っていることも分かります。
$ dig article-image-ix.nikkei.com
;; ANSWER SECTION:
article-image-ix.nikkei.com. 2800 IN CNAME article-image-ix.imgix.net.
article-image-ix.imgix.net. 2800 IN CNAME dualstack.com.imgix.map.fastly.net.
dualstack.com.imgix.map.fastly.net. 15 IN A 151.101.110.208更に画像ファイルのURLのクエリストリングを見ると imgix-proxy.n8s.jp というのがありますので日経電子版(タブレット・スマートフォン版)では imgixのオリジン指定方法は「Web Proxy」であることが分かります。
日経電子版で dig を色々してみたのは特に他意はなく、過去にFastlyの導入事例として日経電子版のリニューアル記事を見た記憶があったためです。imgixの事例としてもあるのはどうゆうこと？と興味を持って調べてみました。
余談 Fastlyのエンドポイント名
Fasltyのエンドポイント名についてのドキュメントがあったのでリンク。
Fastly経由の配信に切り替える手順
AWSに構築したWebサイトへのHTTPアクセスをFastly経由で行えるようにする
オリジンへのリクエスト元(接続元)IPアドレスについて
imgix に話を戻し、オリジンのアクセスログを確認したところ、 AS12125 に属しているZebrafish Labs Inc. のIPアドレス( 104.129.144.0/24 )からリクエストが来ていました。このIPアドレスに traceroute をしてみたところどうやらアメリカ西海岸にあるようです。
また imgix のエンドポイントは Fastly で日本で調べたところ東京にあるIPアドレスが返ってきました。
つまりimgixを使って日本国内にあるオリジンサーバを使用した場合、Fastlyのキャッシュに乗っていない画像は、
Fastly → imgix(アメリカ西海岸) → オリジンサーバ
と取りに行くことになります。オリジンサーバが日本にある場合にはレイテンシーが余計にかかることを理解しておく必要があります。
コンパネで設定する項目
コンパネで設定する項目はとてもシンプルで、同類のサービスである Cloudinary と比較すると比較的触りやすいと感じました。
オリジンとして、AWS S3 / GCS / Web Folder / Web Proxy の4パターンから指定が可能です。
Documentation > Setup > Creating Sources
404 Error時に表示される画像の指定、変換パラメーターエラー時に表示される画像の指定が可能です。
またキャッシュはRespect Origin / Override Origin などで指定が可能です。オリジンのヘッダー情報にCache-Control Headersを含めても良いですし、このコンパネ上で指定することも可能です。
complete explanation of imgix’s cache settings.
Documentation > Setup > Creating Sources > Advanced Source Settings
画像変換の方法
クエリパラメータとして指定が可能です。
トップページのムービーを見るとイメージしやすいと思います。
用意されているAPI機能は 100以上とのこと
その他参考にしたページ
この記事が気に入ったらサポートをしてみませんか？