フェード

fade

fade パラメーターは、画像の端を四辺すべてで透明に向かってぼかします。画像を硬い矩形で終わらせるのではなく、ページに溶け込ませるための機能です。

整数は端の幅をピクセルで表し、dpr が乗算されます。0 から 1 の小数はその辺の軸に対する割合です。そのため fade=0.2 は、出力サイズにかかわらず各辺の外側5分の1をフェードさせます。

元の画像
sandbox-demo
fade=0.2 は四辺すべてをぼかします
sandbox-demo

辺ごとに上書きするには fade-top、fade-bottom、fade-left、fade-right を使用します。

透明度とフォーマット

「フェードした部分が透明ではなく白になる」という質問がよくあります。 アルファ値を持たないJPEGで出力すると、フェードは bg(デフォルトは白)に溶け込み、X-Imgix-Params に bg=ffffff が表示されます。auto=format を指定した場合もJPEGソースはJPEGのままで、白へフェードします。

実際に透明なフェードが必要な場合は fm=png、fm=webp、fm=avif を使用するか、bg にページの背景色を指定すれば結果を一致させられます。

pad を指定している場合、フェードはパディングの外側ではなくパディングの色に溶け込みます。

マスクとの組み合わせ

mask=corners や mask=ellipse を指定している場合、fade 単独では代わりにマスクの縁がぼかされ、mask-bg に溶け込みます。辺ごとのパラメーターは引き続き画像自体の端をフェードさせます。

向かい合う2つのフェードが画像より広い場合は収まるように縮小されるため、中央が完全に消えることはありません。

負の値や数値でない値は無視されます。fade=0 ではフェードは行われません。

動画での利用

動画でも fade は描画されますが、2つの違いがあります。動画ではデフォルトで透明ではなく黒へフェードし、fit=fill を指定した場合はフィルの帯ではなく映像自体にフェードがかかります。mask=corners や mask=ellipse を指定している場合、動画では fade 単独では何も描画されません。動画から生成したAVIFの静止画は白へフェードします。