自動焦点クロッピング

クロッピングは画像を改善するための重要な技術です。不要な背景情報を削除するか、画像のアスペクト比を変更することで、画像に焦点を当てることが大幅に改善されます。imgixは顔検出を含む多くのクロッピング方法を提供しています。このチュートリアルでは、自動焦点のあるポイントクロッピング（crop=entropy）に焦点を当て、それを使用して画像の最も顕著な、または重要な側面にクロップする方法について説明します。特に、高コントラストの領域が最も顕著と見なされます。

基本的なエントロピークロッピング

次の画像をクロップして、画像から大量の静的な黒背景を削除したいとします。

umbrella.jpg?w=640

最初のステップは、w と h パラメータを設定し、fit=crop モードに設定することです。これにより、画像が選択された幅と高さの境界内に収まるようにサイズ変更され、余分な画像データがクロップされます。

幅: w=200
高さ: h=200
フィット: fit=crop

umbrella.jpg?w=200&h=200&fit=crop

imgixのデフォルトのクロッピングは画像の中心から始まり、指定されたパラメータの外にあるデータを削除します。しかし、画像をクロップするだけでなく、傘を中心にしたい場合は、クエリ文字列にcrop=entropyを追加して、「中心」を画像の最も顕著な側面にします。傘は画像の残りの部分と強く対照的であるため、焦点となります。

クロップ: crop=entropy

umbrella.jpg?w=200&h=200&fit=crop&crop=entropy

目標は、静的な黒背景の大部分を取り除き、被写体に焦点を当てることでした。この例では、画像の被写体は赤い傘であり、crop=entropyを追加することで、クロッピング機能がそれを中心に配置しました。しかし、画像の被写体は常に無生物ではありません。

顔中心のクロッピングへの代替

次に、モデルを中心にリサイズしてクロップする画像を見てみましょう。

womanlandscape.jpg?w=640

画像は三分割のルールを使用して撮影されており、視覚的に魅力的な画像を保ちつつモデルをオフセンターに保っています。しかし、私たちはウェブサイトの複数の場所で画像の小さなスニペットを作成したいと考えています。

womanlandscape.jpg?w=200&h=200&fit=crop

クロッピング機能は画像の中心に焦点を当てているため、モデルはオフセンターにあり、スニペットに完全に表示されません。顔検出クロップ機能を使用して、彼女の顔を中心に画像をクロップします。

womanlandscape.jpg?w=200&h=200&fit=crop&crop=faces

顔検出クロップモードは彼女の顔を正確に検出し、画像を中心に配置しました。しかし、彼女の服装にも焦点があり、フレーム内に完全には入っていません。モデルの膝が部分的に隠れているため、代わりにcrop=entropyを追加して、全体の服装がシーンに含まれるようにします。

womanlandscape.jpg?w=200&h=200&fit=crop&crop=entropy

エントロピークロッピングはどのように機能するのか？

顔クロップモードが顔を検索してそれに焦点を当ててクロッピングするのに対し、エントロピークロップモードは高コントラスト領域を探し、それらに焦点を当てます。

上の図では、画像の高コントラスト領域を強調するために画像を修正しました。修正されたバージョンは、この場合、サンショウウオの頭が画像の焦点であることを示しています。エントロピークロップモードは、画像の静的な色を無視し、黒と白が出会う領域、つまりサンショウウオの鮮やかな色が背景と強く対照をなす領域に焦点を当てました。

以下の例では、このエントロピークロップモードの能力が、ポートレートまたはランドスケープの向きに関わらず、サンショウウオを画像の主題として中心に保つことを可能にします。画像が同様に高コントラスト領域を持っている場合、これにより、さまざまなサイズやアスペクト比の異なるデザインに合わせて画像を自動的にアートディレクションすることができます。

ダイナミックマスキング画像のブレンド