Pexelsは、Imgixを使用してユーザー生成画像を標準化し、帯域幅を30％節約しました。
顧客
ペクセルドイツを拠点とする無料のストックフォトプラットフォームは、何百万人もの人々が自分のプロジェクトに最適な画像を見つけるのに役立ちます。ユーザーはPexelsのWebサイトで、さまざまなカメラ形式の写真家がアップロードしたストックフォトを検索できます。
Pexelsは、2014年に約800枚の画像を公開して以来、320万点を超える無料のストック写真と動画のライブラリを管理しています。この数は毎月約25万ファイルずつ増え続けています。
ザ・チャレンジ
Pexelsは、コンテンツ制作者に優れたユーザーエクスペリエンスを提供すると同時に、導入が簡単で迅速で、急速な成長を続ける企業に合わせて拡張できる画像ソリューションを必要としていました。
Pexelsの共同創設者であるBruno Joseph氏は、「アップロード数が増えるにつれて、さらに複雑になりました」と述べています。「以前のソリューションはあまり拡張性がなく、管理も非常に困難でした。」
なぜなら、すべてのペクセルズの コンテンツはユーザー生成です、画像のアップロード、処理、および標準化は、受信したものの品質やサイズにばらつきがあるため、時間がかかり、エラーが発生しやすくなります。彼らは当初、独自の画像サイズ変更ソリューションを構築していました。つまり、ユーザーが新しい画像をアップロードすると、バックエンド処理と画像のサイズ変更が開始されるというものでした。このジョブは、PexelsのRuby on Railsバックエンドが、無料の画像作成および変更プラットフォームImageMagickを使用して実行しました。残念なことに、デバイスサイズやピクセル密度に応じて、サイズも異なる 4 種類の画像を手動で作成して保存する必要がありました。チームはすぐに、画像の処理と操作が当初考えていたよりも複雑であることに気付きました。
すぐに、現在のソリューションは持続可能ではないことが明らかになりました。これは非効率的で、時間とリソースを浪費していたため、会社にはほとんど余裕がありませんでした。ImageMagick のような一般的なツールを使っても、何も壊れないようにするために対処しなければならないエッジケースがまだたくさんありました。
「他のユーザーが同時にアップロードしていると、すべてがさらに遅くなり、バグやその他の問題が発生し、一部の写真をまったく処理できないこともありました」とジョセフ氏は言います。「私たちには、考える必要のあるエッジケースがありました。それはいつも何かありました。」
Pexelsが検討しなければならなかったのは、ユーザー生成コンテンツだけではありませんでした。画像処理サービスの決定には、自社のウェブサイトとマーケティングのニーズも考慮されていました。また、モバイルアプリを追加したとき、元のソリューションでは必要なレスポンシブデザインが提供されず、増大するニーズに合わせて拡張することもできませんでした。
ジョセフ氏は、「ウェブサイトで必要なものに基づいて、さまざまなサイズにハードコーディングしました」と述べ、ウェブサイトで何かを変更したい場合、最大限の効果を得るためにどのバリアントを使用するかを選択する際に避けられない問題が発生したと説明しました。「サイズを見積もっていたので、デバイスや DPR に応じて動的に変更できるレスポンシブ画像はありませんでした。」
解決策
Pexels は Imgix を選ぶ前にいくつかの画像サービスを検討しました。これらのイメージサービスの多くは、高価で時間がかかり、実装に複数のレイヤーを必要とする複雑なソリューションに傾く傾向がありました。Pexels は、基本的に Imgix を最初から使い始めることができました。 S3 バケットの接続 すばやく。
「私たちがImgixを設定したとき、私たちはそれを使い始めたばかりでした」とジョセフは回想します。「テストしてみて、すぐに使い始めることができてとても良かったです。
Imgix ライブラリ また、すぐに起動して実行するのにも役立ちました。
「ライブラリは間違いなくすぐに使い始めるのに役立ったと思います。また、ライブラリのインターフェースも非常にシンプルで、必要なものを見つけて実行できました」と彼は言います。「とてもわかりやすく、使い方も簡単です。」
現在、Pexelsのユーザー生成コンテンツはすべてS3に直接アップロードされています。次に、以下を使用して画像を分析します。 Imgix メタデータ エンドポイントを使用して画像をスクレイピングしてメタデータを取得します。その後、会社は各画像のカメラタイプ、シャッタースピードなど、さまざまな要因を判断できます。次に、Pexelsコンテンツキュレーションチームがすべての画像を調べ、検索機能またはホームページに表示する最適な写真を選択します。同時に、画像を確認して適切なキーワードを追加します。
Josephは次のように説明しています。「検索対象に含める場合は、エラスティックサーチを使用する検索インデックスでインデックスを作成し、Pexelsで検索できるようにします。
結果
Imgixのシンプルさとスケーラビリティは、まさにPexelsが求めていたものであることが証明されました。また、部門や部署を越えて使用できるので、非常に効率的であることも証明されました。
「使い始めるだけでなく、製品を使用するのも簡単だったので、基本的にそれほど変更する必要がなく、数時間で使い始めることができ、非常に簡単でした」とジョセフ氏は言います。「画像の保存方法を変更する必要はありませんでした。S3 バケットに接続するだけで作業を開始できました。また、イメージインフラストラクチャのスケーリングについて考える必要もなくなりました。Imgix のおかげで、何も変更することなく、数百万の画像や数十億の画像リクエストに対応できるようになりました。」
最適化ツールとしてのImageMagickから離れ、PexelsはImgixを使ってより珍しい画像フォーマットもサポートできるようになりました。
「以前は、一部の画像のエンコード方法が異なると、常にエラーが発生していました」とジョセフ氏は言います。「Imgix はこうした処理をはるかにうまく処理でき、基本的にはもうエラーは発生しません。すべてのロジックを用意する必要がなく、リアルタイムで画像を処理できるソリューションが 1 つあったことは、本当に良いセールスポイントでした。」
Imgix の最適化 また、Pexels社は帯域幅コストの大幅な削減を実現しました。つまり、送信帯域幅が 30% 以上削減されたということです。
「以前に画像を最適化したことがありますが、Imgixの最適化ははるかに優れていました」とJoseph氏は言います。「これは私たちのページ速度にも大きな影響を与えました。画像を多用するウェブサイトであるため、特にモバイルや発展途上国でのユーザーエクスペリエンスが格段に快適になりました。」
「Imgixを5年以上使用した後でも、Imgixのシンプルさと柔軟性に感銘を受けています。imgixは、数百万人のユーザーに拡大するにつれて、すべてのユースケースをカバーしてくれました。」
— ブルーノ・ジョセフ、共同創設者
自動的に提供する機能 レスポンシブ画像 ウェブサイトにとっても会社にとって大きなメリットとなっています。以前は、4 種類という制限が主な課題でした。一部の画像のエンコード方法が異なる希少な画像形式が多く、多くのエラーが発生していたためです。
「アップロードした画像を処理しているときに、主に奇妙な画像エンコーディングが原因で、多くの問題に気付きました」とジョセフ氏は言います。「Imgix のおかげで、エラー率を大幅に減らし、画像配信のレジリエンスを大幅に高めることができました。」
このように効率性が向上したことで、Pexels チームは会社の目標に向かって取り組む時間をより優先できるようになりました。
「当時、私たちは本当に小さかったので、これに取り組む専任の人はいませんでした」とジョセフは言いました。「正確に何時間かかったかを言うのは難しいですが、主要な優先事項に集中するには時間がかかりました。Imgix は間違いなく物事をずっと簡単でシンプルにしてくれました。」
Imgixは特に、コンテンツキュレーションチームがアップロードされた直後に画像をふるいにかけるのに役立ちました。これにより、さまざまなバリエーションを確認したり、拡大したり、詳細を確認したりできます。また、マーケティングチームは一部のランディングページでもImgixを使用できるようになりました。そこでは画像を簡単にアップロードでき、 自動的にサイズを変更 必要なランディングページの仕様に準拠しています。
結局のところ、Imgixの使いやすさと有効性により、Pexelsは世界中のユーザーに高品質の画像を提供し続けることができます。
「私たちの会社の価値観の1つは、複雑なものをシンプルにすることであり、Imgixはその完璧な例です。画像処理と操作の複雑さはすべて、超シンプルなImgix APIの背後に隠されています」とJoseph氏は言います。「これらすべてについて心配する必要はもうありません。ただ機能しているだけです。」
