Imgix 概要
Imgix は、Web 上でアセットを配信するために 3 つの主要機能を提供するオンデマンドサービスです。
- Rendering API:画像のリサイズ、クロップ、調整をオンデマンドで行える強力な画像処理 API。
- Video API:動画の操作・最適化を行える動画処理 API。
- Management API:Imgix アカウントやソースをプログラムで管理できる API。
これらの機能は、ユーザーに最適化された画像や動画を配信し、アセットを大規模に管理するために設計されています。
Imgix のソリューションは、ソリューションページでご覧いただけます。
アセットの接続
Imgix サービスは、オリジン(Amazon S3、GCS、または Web フォルダ)にある画像とサービスを接続することで機能します。Imgix はオリジンからアセットを取得し、変換を適用して CDN 経由で配信します。オリジンからアセットが削除された場合でも、キャッシュから削除されるまで Imgix がそのアセットを配信し続ける場合があります。
ソースの作成と接続実際のレンダリング
Imgix の動作例は次の通りです: https://assets.imgix.net/examples/kingfisher.jpg
上記の例は S3 ソースに接続されており、画像は S3 バケットの /examples/kingfisher.jpg
にあります。そのため、上記 URL で画像にアクセスできます。
画像を変換するには、パラメーターを追加します:

この設定により、画像は幅 500 ピクセルに変換され、自動的にフォーマットおよび圧縮されて Web に最適化されます。
大規模変換
大規模に画像を変換するには、同じパラメーター(w=500&auto=format,compress)を他の Imgix 画像に適用して、同様の効果を得ることができます。
以下は、mask
パラメーターを使って複数のタイポグラフィ ビジュアルを作成する複雑な例です:
各画像を個別に編集する代わりに、各画像 URL の末尾に
?mask=mask-shape_sol-surf-co.png&ar=1.06%3A1&w=600&fit=crop
を追加して同じ変換を適用できます。
自分のソースに画像をアップロードし、任意の画像 URL の末尾に次のパラメーターを付けて試すことができます:
?mask=https%3A%2F%2Fassets.imgix.net%2Fexamples%2Fmask-shape_sol-surf-co.png&ar=1.06%3A1&w=600&fit=crop”
shell Copy code
Imgix の実装
Imgix を Web サイトやアプリケーションに実装するのは、Imgix の URL またはドメインで画像を配信するのと同じくらい簡単です。
例えば、以前は次のような URL で画像を配信していた場合:
https://imgix.assets.sfo3.digitaloceanspaces.com/example/blue-orange.jpg
mathematica Copy code
Imgix をアセットのオリジンに接続し、サイトの URL を Imgix のホスト名に変更します:
https://yourimages.imgix.net/examples/blue-orange.jpg
javascript Copy code
さらに、srcset など、事前に用意された機能を活用できるライブラリや SDK も提供しています。
Imgix ライブラリと SDK該当するライブラリがない場合でも、上記の例のように画像を配信するだけで Imgix をコードに統合できます。Imgix はすべての画像と変換を URL 経由で提供するため、URL を出力できる環境であればどこでも簡単に利用できます。