リファレンスImgix 概要

Imgix 概要

Imgix は、Web 上でアセットを配信するために 3 つの主要機能を提供するオンデマンドサービスです。

  • Rendering API:画像のリサイズ、クロップ、調整をオンデマンドで行える強力な画像処理 API。
  • Video API:動画の操作・最適化を行える動画処理 API。
  • Management API:Imgix アカウントやソースをプログラムで管理できる API。

これらの機能は、ユーザーに最適化された画像や動画を配信し、アセットを大規模に管理するために設計されています。

Imgix のソリューションは、ソリューションページでご覧いただけます。

アセットの接続

Imgix サービスは、オリジンAmazon S3GCS、または Web フォルダ)にある画像とサービスを接続することで機能します。Imgix はオリジンからアセットを取得し、変換を適用して CDN 経由で配信します。オリジンからアセットが削除された場合でも、キャッシュから削除されるまで Imgix がそのアセットを配信し続ける場合があります。

ソースの作成と接続

実際のレンダリング

Imgix の動作例は次の通りです: https://assets.imgix.net/examples/kingfisher.jpg

上記の例は S3 ソースに接続されており、画像は S3 バケットの /examples/kingfisher.jpg にあります。そのため、上記 URL で画像にアクセスできます。

画像を変換するには、パラメーターを追加します:

画像のリサイズとフォーマット
sandbox-demo

この設定により、画像は幅 500 ピクセルに変換され、自動的にフォーマットおよび圧縮されて Web に最適化されます。

大規模変換

大規模に画像を変換するには、同じパラメーター(w=500&auto=format,compress)を他の Imgix 画像に適用して、同様の効果を得ることができます。

以下は、mask パラメーターを使って複数のタイポグラフィ ビジュアルを作成する複雑な例です:

image=unsplash-island-photo-01.jpg
sandbox-demo
image=unsplash-big-sur-01.jpg
sandbox-demo
image=unsplash-beach-photo-01.jpg
sandbox-demo
image=unsplash-surfing-photo-01.jpg
sandbox-demo

各画像を個別に編集する代わりに、各画像 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 を出力できる環境であればどこでも簡単に利用できます。