はじめに
この記事は、imgixを使用してHTML内の任意の製品の色を動的に更新することで見つかったソリューションについてです。<img> SVG や CSS を使用しないエレメント。
カートローラー は、アイルランドのダブリンを拠点とするB2B旅行テクノロジー企業です。当社はレンタカーと陸上輸送サービスを専門としており、年間約10億人の乗客にレンタカーソリューションを提供できるよう支援しています。
最近、レンタカーの検索結果を表示するために使用する車の画像ライブラリを全面的に見直すプロジェクトに着手しました。私たちは、複数の異なるタッチポイントでお客様に最良の結果を提供するために、その場でサイズ変更や最適化が可能な、一貫性のある高解像度の画像を作成したいと考えていました。
CarTrawlerテクノロジーにより、パートナーは最大2,000社のレンタカー会社のレンタカーを表示できます。当社は、お客様に可能な限り最良かつ幅広い選択肢のレンタカーを提供するために、何百台もの車両をあらゆるデバイスに数秒で配送します。
また、この機会に、ライブラリに新しい機能を追加したいと考えました。ダイナミックな色の車です。これまで、複数の異なる色の車を用意するというアイデアでは、可能なすべてのバリエーションを保存し、それらを個別にロードする必要がありました。これではスケーリング能力が失われるため、これまでは達成不可能と考えられてきました。この機能を正常に実装するには、ページのパフォーマンスに影響を与えずに、またフロントエンドでコードに追加の変更を加えることなく、これらの各車の色を動的に変更できることが不可欠でした。
初期の調査の結果、imgix が私たちのパフォーマンス、信頼性、スケーリングの要件を満たしていることは明らかでしたが、ダイナミックカラーを追加するための完璧なソリューションを作るには、さらに掘り下げる必要がありました。考えられる解決策を何度も試行錯誤した結果、私たちはついに imgix を組み合わせて完璧な答えを見つけることができました。 透かし そして モノクローム 機能性。
この投稿では、これをどのように達成したか、そしてこれまでの結果はどうなったかを共有します。
注：私たちは車を使用していますが、この技術はどの製品にも適用できると考えています。
ステップ 1
まず、必要なのは ベースレイヤー。これは、主色がまったくない状態で表示されるデフォルトのレイヤーです。このレイヤーはフォールバック画像としても使用されるので、それだけでも見栄えが良いはずです。
https://ddools.imgix.net/cars/base.png
ステップ 2
2 つ目の画像 a を作成します。 ペイントレイヤー これはベースレイヤーと同じサイズです。この透明な画像には、動的に色を付けたい領域だけを含めたいと思います。
https://ddools.imgix.net/cars/paint.png
ステップ 3
これは物事が面白くなるところです。imgix API の複数のパラメーターを活用して、ペイントレイヤーをベースレイヤーの上に表示し、両方を 1 つの画像として表示します。
ペイントレイヤーに色を適用しましょう
https://ddools.imgix.net/cars/paint.png？
w=600&bri=-18&con=26&monochrome=000000
標準の黒の16進値を適用して色を変更しました #000000。しかし、使用可能な数百万の 16 進数値ならどれでも使用できます。
使用されている imgix パラメーターを見てみましょう。
imgix を使ってレイヤーをスタックするので、以下のことを行う必要があります エンコードします 私たちのペイントレイヤー。つまり、URLの一部の文字をエンコードされた値に置き換えるということです。
https:%3a%2f%2fddools.imgix.net%2fcars%2fpaint.png%3FW%3D 600% 26bri%3D -18% 26con%3D 26% 26% 26Monochrome%3D000000
ステップ 4
今度は imgix を使うことにします ウォーターマークパラメーター ペイントレイヤーをベースレイヤーの上に重ねます。
https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark =
使用されているパラメータを見てみましょう。
w: これは画像の幅で、両方のレイヤーで同じでなければなりません。マークアライメント: これにより、ペイントレイヤがベースレイヤの中央に配置されます。マークを付けます: ここにエンコードされたペイントレイヤが配置されます。
最終的に、次のような 1 つの URL が得られます。
https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D000000
すると車が黒くなります:
すべての設定が完了したら、リンクの最後の 6 桁が 16 進数値を表し、これを更新してペイントレイヤを動的に変更できます。
https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D0d4671
https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D63803a
https://ddools.imgix.net/cars/base.png?w=600&mark-align=center,middle&mark=https%3A%2F%2Fddools.imgix.net%2Fcars%2Fpaint.png%3Fw%3D600%26bri%3D-18%26con%3D26%26monochrome%3D841210
暗い色が動的に適用された検索結果。
実際の動作を見る
インタラクティブなコードペンをチェックしてください ここに 色を変えるオプションを車両で試してみます。
結論
それだ！画像にウォーターマークを追加する代わりに、色を動的に変更したい領域のペイントレイヤーを作成しています。imgix のおかげで、パフォーマンスを低下させたり、ページ内で追加の JavaScript、CSS、画像呼び出しを行ったりすることなく、これらの画像を動的に提供できるようになりました。
