ユーザー生成画像の管理

ユーザー生成コンテンツを取り入れた一貫したユーザーエクスペリエンスを作成することは常に課題です。受け取るものの品質は、その品質と寸法の両方で大きく異なり、定義されたコンテナに合わせて標準化する必要があります。また、不要なデータが含まれている場合があり、たとえば商品リストのグリッドで同様の外観と感触を与えるために、境界線を削除したいと思うかもしれません。

ユーザー生成コンテンツの標準化のすべての側面を処理するには人間の手が必要ですが、そのいくつかはimgixを使用して自動化することができます。ユーザープロファイル画像（またはアバター）と販売リストの2つの一般的な例を見てみましょう。

注意： ユーザー生成画像のアップロード成功をテストする方法としてimgixのURLを使用することはお勧めしません。アップロードが完了する前に画像をリクエストすると、そのソースのエラーキャッシュTTL設定で指定された時間の間、結果として404エラーがキャッシュされ、その時間が経過するまで画像が表示されません。

顔検出を使用したアバターの自動化

imgixの顔検出パラメータは、顧客からの要望に応えて構築されました。彼らはユーザーがアップロードした大量のアバター写真を持っていて、顔をより細かく切り取りたいと考えていました。私たちはcrop=facesパラメータとfit=cropを組み合わせて開始しましたが、この操作では画像内のすべての顔を中心に切り取るだけで、個々の顔にズームインする機能は提供されませんでした。

顧客が必要とするより大きな制御を提供するために、顔にズームして切り取る機能や、単純な操作で個々の顔をターゲットにする新しいパラメータを追加しました。これがどのように機能するかを例で見てみましょう。ユーザーがアップロードした写真を円形のアバターにすばやく変換したいです。

まず、幅と高さを設定し、fitモードをfit=faceareaに設定します。このパラメータの組み合わせは、元の画像で見つかった両方の顔を含む境界領域に画像をズームして切り取ります。

結果の画像は正しくサイズ調整され、切り取られていますが、背景に余分な顔が映り込んでおり、画像の主要な顔を中心に配置したいです。faceindex=1を追加することで、指定された幅と高さに合わせて最初の顔に合わせるように設定されます。

現在、画像は私たちが望む顔だけを中心に配置していますが、少し近すぎます。faceindexは見つけた最初の顔にズームして指定された寸法に合わせるため、写真を適切にフレームするには少し後退する必要があります。facepadを使用すると、顔の周りに少しスペースを追加でき、より良い構成のために効果的にズームアウトします。

ずっと良くなりました。最後に、私たちのサイトのアバターに一貫したサイズと外観を与えたいと思います。それを迅速に行うには、mask=ellipseパラメータを設定します。指定された寸法が等しいため、マスクは円になります—それは画像に適用されたサイズに合わせて伸ばされます。

これでかなり良い見た目になりました。これで、私たちはこれらのレンダリングAPIパラメータをサイトの他のアバター画像にプログラム的に適用できます。

グループ内の顔の分離

上で示したように、faceindexパラメータを使用すると、画像内のどの顔に切り取りを中心にするかを選択できます。値を増やすことで、別の顔を選択できます。facepadパラメータを使用すると、画像内の選択した顔の周りのパディングを調整し、極端なクローズアップを与えることなく完璧な切り取りを実現するのに役立ちます。

この例では、同じ画像から個々の顔を抽出する方法を示します。複数の事前に切り取られたバージョンを提供する必要なく行います。

こちらが3人の子供たちの元の画像です。各子供に対して、faceindexを順番に設定することで、個々の写真を作成します。

faceindexとfacepadの両方のパラメータは、複数の被写体が含まれる写真に対して細かな制御を提供します。

興味のあるポイントの切り取り

顔が存在しない画像の主要な焦点に切り取りたい場合、imgixは興味のあるポイントの切り取り（fit=crop&crop=entropy）も提供しています。

望ましくない境界のトリミング

ユーザー生成画像のもう一つの一般的な問題は、画像の実際に気になる部分の周りに境界や余白があることです。trim、trim-color、およびtrim-tolパラメータを使用すると、この余分なデータを簡単に削除でき、画像の関連部分がコンテナーを埋めるようになります。これらのパラメータがどのように相互作用してこの写真の灰色の境界を削除するかを見てみましょう。

まず、trimパラメータを追加する必要があります。上の画像のように、境界がはっきりしていて画像とよく対照している場合、trim=autoだけでそれをきれいにするのに十分かもしれません。顔検出と同様に、これはトリミング後の画像をズームしてコンテナーに合わせます。

この画像は一色の境界を持っているため、同様の結果を得るために境界色に基づいてトリミングすることもできます。これを行うには、trim=colorを設定し、削除したい色（元の画像の灰色は#e9e9e9です）を定義します。

ただし、この画像の右側には灰色にわずかなグラデーションがあります。そのため、まだ灰色の薄い帯が残っています。trim-tolを使用して、カットすることを許容するグレーの範囲を広げることができます。

トリムパラメータは、既存の画像から過剰な白領域や境界を削除することで、サイトやアプリのユーザー生成コンテンツをきれいにするのに役立つ方法です。

ユーザー生成画像の向上

さまざまなソースからの画像にもう一つの問題は、しばしば露出不足または露出過多であり、また多少ぼやけていることがあります。imgixは完全にピントが合っていないまたは色あせた画像を良く見せることはできませんが、これらの軽微な問題に対しては、いくつかのパラメータが品質をクリスプアップするのに大いに役立ちます。RVのリスティングでこれがどのように機能するかを見てみましょう。

こちらが元の画像で、少しぼやけていて露出不足です。画像を縮小するだけでシャープに見えることもありますが、最初から600ピクセルの幅しかないため、ここで扱う余分なデータはあまりありません。しかし、auto=enhanceから始めることができます。これは画像を評価し、全体的な品質を向上させるためにいくつかの調整パラメータを適用します。

大量の画像に対しては、自動化された強化のためにこれだけを行うこともあるかもしれません。しかし、さらに進めたい場合は、exp（露出）調整からのわずかなブーストがちょうど良いでしょう。

他の調整パラメータを試して、画像カタログに最適なものを見つけることもできます。この画像はまだ少しピントが合っていないので、usmパラメータで詳細を鮮明にしましょう。RVの側面のスウッシュや前輪で最もはっきりと違いが分かります。

結論

ユーザー生成画像を自動的に管理するにはいくつかの考慮が必要です。しかし、複雑なケースでも、いくつかの重要なパラメータを使用して自動化することで、魅力的な結果を得て、ユーザーや製品を輝かせることができます。マスキングやその他のimgix機能に関する詳細な説明については、以下の記事をご覧ください。

タイプセッティングエンドポイントを使用した複数行テキストとオーバーレイ自動強調を使って画像をリアルタイムで強調する