Imgix APIsレンダリング API背景カラーキー

カラーキー

colorkey

colorkey パラメーターは、指定した色に近いすべてのピクセルを透明にします。商品撮影の白背景のような単色のスタジオ背景を、AIによる 背景除去 のコストやレイテンシなしで取り除く用途に使用します。

キーカラーの指定

colorkey は次の値を受け取ります。

  • 16進数カラー(colorkey=fff や colorkey=4c7499 など)。3桁、4桁、6桁、8桁の形式に対応しており、アルファ値の桁は無視されます。
  • CSSカラーキーワード(colorkey=white など)。
  • auto、または値を指定しない形式(colorkey または colorkey=)。画像の左上のピクセルの色がキーカラーになります。そのピクセルが既に透明である場合、何もキーイングされません。

有効な色でない値は無視され、画像はキーイングされずに返されます。

ピクセルがキーカラーにどれだけ近ければ対象となるかは colorkey-tol で、エッジをどれだけ滑らかにぼかすかは colorkey-feather で設定します。デフォルト値では、純粋な白と、わずかに白から外れたJPEGノイズがキーイングされます。

元の画像
sandbox-demo
colorkey=4c7499 で青いバーが除去されます
sandbox-demo

出力フォーマット

透明度を保持するには、アルファチャンネルに対応した出力フォーマットが必要です。

  • fm を指定しない場合: 透明になったピクセルが1つでもあれば、画像はPNGで返されます。キーに一致するものがなければ、画像は通常のフォーマットのまま返され、JPEGはJPEGのままになります。
  • アルファチャンネルに対応したフォーマットを明示した場合(fm=png、fm=webp、fm=avif など)は、透明度が保持されます。
  • fm=jpg はアルファチャンネルを保持できないため、キーイングされたピクセルは白で塗りつぶされます。
  • fm=gif は透明度を保持しますが、GIFのアルファは有効か無効かの2値のみであるため、滑らかなエッジはディザリングされます。

fit=fill と単色の塗りつぶしを併用した場合、レターボックス部分も白ではなく透明になります。

処理の順序

カラーキーイングは、トリミング、クロップ、リサイズよりも前に実行されます。これは次のことを意味します。

  • trim=alpha はキーイング後の被写体に合わせてクロップします。
  • リサイズによって新しく生じた透明なエッジがブレンドされるため、縮小した出力でも滑らかなエッジになります。

アニメーション画像では、最初のフレームで検出された色を使ってすべてのフレームがキーイングされるため、自動キーイングでもちらつきが発生しません。

カラーキーと背景除去の比較

colorkeybg-remove
対象単色で既知の背景色あらゆる背景
方式キーカラーからの色距離AIによる被写体検出
速度他のレンダリングパラメーターと同等初回リクエスト時に数秒かかる場合がある
キーカラーに近い被写体の色同様に透明になる保持される