シームレスなPOIクロッピング:画像フォーカス抽出の自動化

トリミングは画像を改善するための重要なテクニックです。不要な背景情報を削除したり、画像のアスペクト比を変更したりすると、閲覧者の画像への集中力が大幅に向上します。 imgix は、顔検出を含む多くのトリミング方法を提供します。このチュートリアルでは、自動注目点トリミング ( crop=entropy ) と、これを使用して画像の最も顕著な、または重要な側面をトリミングする方法に焦点を当てます。特に、コントラストの高い領域が最も顕著であると考えられます。

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

次の画像をトリミングして、画像から大量の静的な黒い背景を削除するとします。

umbrella.jpg?w=640

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

fit=crop

幅: w=200
高さ: h=200
フィット: フィット=トリミング

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

imgix のデフォルトのトリミングは画像の中心から開始され、指定されたパラメーターの範囲外にあるデータが削除されます。ただし、画像をトリミングするだけでなく、傘を中央に配置する必要もあります。これを行うには、クエリ文字列にcrop=entropyを追加して、「中央」が画像の最も顕著な側面になるようにします。傘は画像の他の部分と強くコントラストを成すため、焦点になります。

fit=crop&crop=entropy

クロップ: クロップ=エントロピー

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

目標は、静的な黒い背景を大量に削除して被写体の中心に置くことでした。この例では、画像の主題は赤い傘であり、 crop=entropyを追加することで、トリミング機能が赤い傘を中心に配置できるようになりました。ただし、画像の被写体は必ずしも無生物であるとは限りません。

面中心のトリミングの代替手段

次の画像のサイズを変更し、モデルの中央に配置されるように切り抜きたいとします。

womanlandscape.jpg?w=640

画像は三分割法を使用して撮影されており、モデルを中心からずらしたままにして、視覚的に魅力的な画像を実現しています。ただし、Web サイト上の複数の場所で使用するために、画像の小さなスニペットを作成したいとも考えています。

fit=crop

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

トリミング機能は画像の中心に焦点を合わせており、モデルは中心から外れているため、彼女はスニペットに完全には表示されません。顔検出トリミング機能を使用して、画像を顔の周りの中央に配置できます。

fit=crop&crop=faces

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

顔検出クロップ モードは彼女の顔を正常に検出し、画像をその周りの中央に配置しました。ただし、私たちは彼女の服装にも興味がありますが、それは完全にフレーム内に収まっているわけではありません。モデルの膝が部分的に隠れているため、代わりにcrop=entropyを追加して、衣装全体がシーンに含まれるようにします。

fit=crop&crop=entropy

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

エントロピー クロップはどのように機能しますか?

顔トリミング モードは顔を探してその中心を中心にトリミングしますが、エントロピー トリミング モードは高コントラストの領域を探してそこに焦点を当てます。

fit=crop

fit=crop

上の図では、画像内のコントラストの高い領域を強調表示するように画像を変更しました。修正されたバージョンでは、画像内の注目点 (この場合はサンショウウオの頭) が示されています。エントロピー クロップ モードでは、画像の静的な色が無視され、代わりに黒と白が交わる領域に焦点が当てられました。サンショウウオの明るい色は、背景に対して高いコントラストを提供します。

以下の例では、エントロピー クロップ モードの高コントラスト領域に焦点を当てる機能により、縦向きか横向きかに関係なく、サンショウウオが画像の被写体として中央に配置されます。同様の方法で画像にハイコントラスト領域があると仮定すると、 crop=entropyを使用して、さまざまなデザインにさまざまなサイズやアスペクト比を適合させることで、画像を自動的にアート ディレクションすることができます。

fit=crop&crop=entropy

詳細については、 imgix ドキュメント ページを参照してください。

• 無料の imgix アカウントを作成するには、ここをクリックしてください
• デモをリクエストしたり、質問がある場合は、ここをクリックしてください