動的に画像をブレンドする

レイヤーブレンドは、複数の画像をブレンドするために一般的に使用される画像編集機能であり、多くの変換が可能です。imgixは、blend パラメータを使用して、さまざまなオプションを使用して画像を動的にレイヤーおよびブレンドする機能をサポートしています。この強力な機能を使用して、カスタム効果や画像フィルターを作成できます。

blend パラメータは、画像URLまたはソリッドカラーの16進数値を受け入れます。このチュートリアルでは、ブレンドパラメータを使用する一般的な方法を紹介し、いくつかの実用的な例とベストプラクティスを提供します。

imgixのブレンドモード操作は標準準拠であり、 <img> タグを使用する任意のブラウザで互換性があり、CSSやアプリ内ソリューションよりもフロントエンドまたはデバイスの処理能力を少なくする必要があります。

画像のブレンド

画像をブレンドするには、 blend パラメータの値として画像URLを指定します。画像をブレンドする場合、ブレンド画像のサイズや配置に関する追加の考慮事項が必要です。

以下の2つの画像を考えてみましょう。

ウォーターケトルがメイン画像で、コーヒーカップがそれにブレンドしたい画像です。この例では、 screen ブレンドモードを使用し、ブレンドサイズ（ blend-size=inherit ）を使用してカップ画像をケトル画像と同じサイズとクロップタイプに設定します。これらのすべてのパラメータはURLで設定されています。

coffeepot.jpg?blend=americano.jpg&blend-mode=screen&blend-size=inherit

screen ブレンドモードの結果として、ブレンド画像の白い値（例えば白いコーヒーカップ）が前面に出ます。黒でのスクリーンは基になる色を変更せず、白でのスクリーンは白を生成します。

ブレンドのサイズと配置

上記の例では、ブレンドサイズ（ blend-size ）がブレンド画像に対して最適なフィットサイズを設定していました。これにより、imgixでメイン画像に既に設定されている幅、高さ、およびクロップパラメータを冗長に適用する必要がありません。 inherit に設定すると、ブレンドサイズはメイン画像のすべてのサイズおよび配置操作をブレンド画像に継承します。

サイズが設定されていない場合、追加のパラメータを使用してブレンド画像を調整し、メイン画像に適切に合成する必要があるかもしれません。ブレンド画像のサイズ変更、スケーリング、位置決めを支援するための追加のimgixブレンドパラメータのリストは、APIドキュメントにあります。

ソリッドカラーのブレンド

カラーをブレンドするには、3桁、6桁、または8桁の16進数値を使用できます。例えば、 blend=333 、 blend=333333 、 blend=ff333333 はすべて同じです。8桁の16進数値の最初の2桁は、カラーのアルファ不透明度を表します。

例1 – オレンジ＆オーバーレイ

例2 – スカイブルー＆スクリーン、やや透明

ブレンドモード

imgixは、元の画像とブレンドターゲットをブレンドするための独自の方法を持つさまざまなブレンドモードをサポートしています。最も一般的で有用なものは、 multiply 、 screen 、 overlay 、 color です。利用可能なすべてのモードは5つのグループに分類できます。

以下の画像とカラーを考えてみましょう。

暗くするモード

暗い値を生成する変換。

明るくするモード

明るい値を生成する変換。

コントラストモード

ハイライトとシャドウの値をブレンドカラーや画像に応じてミックスおよび調整する変換。

コンポーネントモード

HSLおよびカラコンポーネントを含む変換。

比較モード

2つの画像間のピクセル値の違いを反転してハイライト表示。

応用例

ここでは、imgixのブレンドモードを使用する可能性のある例をいくつか紹介します。これらの例では、スケーラブルな画像フィルター、テクスチャ、強化効果の実現方法を探ります。

スケーラブルフィルター

ブレンドモードは、カスタマイズされた画像フィルターを作成する簡単な方法です。任意のサイズの画像に対応できるフィルターを作成する最良の方法の1つは、ネイティブベクターPDF（Adobe IllustratorやSketchを使用）をサーブし、それをブレンド画像として使用することです。ベクターPDFファイルをブレンドコンポジットとして使用すると、ベクタースケーリングの柔軟性が得られ、複雑なカラーフィルターやグラデーション効果を作成できます。

以下の例では、複数ページのPDFファイル (opens in a new tab) と page パラメータを使用して各グラフィックを設定します。これらのグラフィックはベクターであり、ブレンドとして設定されると、動的に任意のサイズにスケーリングでき、出力品質に劣化はありません。

注意： page パラメータは、グラフィックを選択するために複数ページのPDFに適用されます。埋め込まれたURLにパラメータを使用する場合は、エンコードされたURI値を使用するのが最善です。例えば、 ? は %3F 、 / は %2F 、 : は %3A 、 = は %3D です。

スプリットトーン

2色の対角グラデーションを使用し、blend-size=inherit と screen ブレンドモードを使用します。

テキストアンダーレイ

画像にタイトルを付ける一般的な方法は、テキストがオーバーレイされる部分に暗いから透明なグラデーションを使用することです。この例では、黒から透明な黒のグラデーショングラフィックを使用し、 multiply ブレンドモードを使用します。この例では、ブレンド画像のサイズ設定とクロップ設定を手動で行います。

テキストを追加するためのサンプルパラメータをいくつか紹介します。テキストオーバーレイの詳細については、txt および typesetting-endpoint ドキュメントや、マルチラインテキストオーバーレイチュートリアルをご覧ください。

グラフィックオーバーレイ

画像に対して、より複雑なベクターグラフィックも使用できます—高度な透かしのようなものです。 screen ブレンドモードと一緒に、imgixロゴをレイヤー化します。

テクスチャの追加

ブレンドモードを使用すると、画像に動的かつ非破壊的にテクスチャを追加できるため、画像に個性を与えるのが簡単です。これらの例では、同じテクスチャを適用する方法を変更するために、invert パラメータも使用しています。

乗算テクスチャ

ペーパーテクスチャを乗算する場合、暗い値が表示されます。この例では、ペーパーテクスチャ画像はほとんどが白で、微妙な灰色と黒が含まれています。テクスチャをメイン画像に乗算ブレンドすると、灰色と黒が表示され、テクスチャが提供されます。

スクリーンテクスチャ

この例では、同じテクスチャ画像を使用し、それを反転させます。次に、反転したテクスチャをスクリーンして、結果として表示される白の値を表示し、画像のテクスチャを生成します。

画像の強調

ポートレートや写真の外観を強化するためにAdobe Photoshopでよく使用される一般的な効果は、いくつかの調整を加えた画像のコピーを上層に重ねることです。この例では、ポートレートを使用して、ぼかしを適用したスクリーンブレンドを行い、ソフトレンズ効果を達成するために不透明度を下げています。ブレンドサイズ（ blend-size=inherit ）を使用して、元の画像と一致するようにブレンド画像の幅、高さ、および配置を維持します。

imgixを使用すると、これらの複雑な操作の結果は常に標準の画像となり、 <img> タグで使用できます。これにより、すべての画像は任意のブラウザで互換性があり、より迅速にレンダリングされ、デバイスへの負担が軽減されます。

焦点の自動クロッピングフォーカルポイントクロッピングによるレスポンシブなアートディレクション