Pexelsは、Imgixでユーザー生成画像を標準化し、帯域を30%削減しました。
お客様について
Pexelsは、ドイツを拠点とする無料のストックフォトプラットフォームで、何百万人もの人々がプロジェクトに最適な画像を見つける手助けをしています。ユーザーはPexelsのWebサイトで、写真家たちがさまざまなカメラで撮影・アップロードしたストックフォトを検索できます。
2014年に約800枚の画像でスタートしたPexelsは、現在320万点を超える無料のストック写真と動画のライブラリを運営しており、その数は毎月約25万点ずつ増え続けています。
課題
Pexelsが必要としていたのは、コンテンツ制作者に優れたユーザー体験を提供でき、導入が簡単かつ迅速で、急成長を続ける同社とともにスケールできる画像ソリューションでした。
「アップロード数が増えるにつれて、処理はさらに複雑になっていきました」と、Pexelsの共同創業者であるブルーノ・ジョセフ氏は話します。「以前のソリューションは拡張性に乏しく、管理もかなり大変でした」
Pexelsのコンテンツはすべてユーザー生成であるため、受け取る画像の品質やサイズにばらつきがあり、画像のアップロード、処理、標準化に時間がかかり、エラーも起こりやすくなります。Pexelsは当初、独自の画像リサイズの仕組みを構築していました。ユーザーが新しい画像をアップロードすると、バックエンドで画像の処理とリサイズが始まる仕組みです。この処理は、PexelsのRuby on Railsバックエンドが、無料の画像作成・編集ツールであるImageMagickを使って実行していました。しかしこの方法では、デバイスのサイズやピクセル密度に合わせて、サイズの異なる4種類のバリアントを手動で作成・保存する必要がありました。チームはすぐに、画像の処理や加工が当初の想定よりも複雑であることに気づきました。
まもなく、当時のソリューションでは立ち行かないことが明らかになりました。非効率なうえ、会社にとって貴重な時間とリソースを消費していたのです。ImageMagickのような定番ツールを使っていても、何も壊れないようにするには、対処すべきエッジケースが数多く残っていました。
「他のユーザーが同時にアップロードしていると、すべてがさらに遅くなりました。バグなどの問題が起きることもあり、まったく処理できない写真もありました」とジョセフ氏は言います。「考慮すべきエッジケースがいくつもあり、常に何かしらの問題が起きていました」
Pexelsが考慮すべきだったのは、ユーザー生成コンテンツだけではありません。自社のWebサイトやマーケティングのニーズも、画像処理サービスを選ぶうえでの判断材料になりました。さらにモバイルアプリを追加した際には、従来のソリューションでは必要なレスポンシブデザインに対応できず、拡大するニーズに合わせてスケールすることもできませんでした。
「Webサイトで必要なサイズに合わせて、それぞれハードコーディングしていました」とジョセフ氏は言います。Webサイトで何かを変更しようとするたびに、最も効果的なバリアントを選ぶ段階でどうしても問題が生じていたといいます。「サイズは推測で決めていて、デバイスやDPRに応じて動的に変化するレスポンシブ画像はありませんでした」
解決策
Pexelsは、Imgixに決める前にいくつかの画像サービスを検討しました。その多くは、高価で時間がかかり、導入に何層もの作業を必要とする複雑なソリューションになりがちでした。一方Pexelsは、S3バケットの接続を済ませるだけで、すぐにImgixを使い始めることができました。
「Imgixは設定したら、あとはそのまま使い始めるだけでした」とジョセフ氏は振り返ります。「気軽に試して、すぐに使い始められるのもとても良かったです」
Imgixライブラリも、短期間での立ち上げに役立ちました。
「ライブラリのおかげで、間違いなくスムーズに使い始められたと思います。ライブラリのインターフェースもとてもシンプルで、必要なものを見つけてすぐに実装できました」とジョセフ氏は言います。「とてもわかりやすく、シンプルで使いやすいです」
現在、Pexelsのユーザー生成コンテンツはすべてS3に直接アップロードされています。次に、Imgixメタデータエンドポイントで画像からメタデータを取得し、分析します。これにより、各画像のカメラの種類やシャッタースピードなど、さまざまな情報を把握できます。その後、Pexelsのコンテンツキュレーションチームがすべての画像を確認し、検索機能やホームページに掲載する写真を選定するとともに、適切なキーワードを付与します。
「検索に掲載する画像は、Elasticsearchを使った検索インデックスに登録し、Pexels上で検索できるようにしています」とジョセフ氏は説明します。
結果
Imgixのシンプルさとスケーラビリティは、まさにPexelsが求めていたものでした。さらに、部門の垣根を越えて活用できるため、非常に効率的であることもわかりました。
「使い始めるのはもちろん、使い続けるのも簡単でした。基本的に大きな変更は必要なく、数時間で使い始めることができました」とジョセフ氏は言います。「画像の保存方法を変える必要はなく、S3バケットを接続するだけで使い始められました。画像インフラのスケーリングについて考える必要もなくなりました。Imgixのおかげで、何も変更することなく、数百万点の画像と数十億件の画像リクエストに対応できるまでスケールしました」
最適化ツールとして使っていたImageMagickから移行したことで、PexelsはImgixを使って、より珍しい画像フォーマットにも対応できるようになりました。
「以前は、エンコード方式が異なる画像があると、必ず何かしらのエラーが発生していました」とジョセフ氏は言います。「Imgixはこうしたケースをはるかにうまく処理してくれるので、今ではエラーをほとんど見かけません。すべてのロジックを自前で持つ必要がなく、画像をリアルタイムで処理できる1つのソリューションがあることは、本当に大きな決め手でした」
Imgixの最適化により、Pexelsは帯域コストも大幅に削減し、送信帯域は30%以上減少しました。
「以前から画像の最適化には取り組んでいましたが、Imgixの最適化ははるかに優れていました」とジョセフ氏は言います。「ページ速度にも大きな効果がありました。画像を多用するWebサイトなので、特にモバイルや新興国のユーザーにとって、体験が格段に快適になりました」
「Imgixを5年以上使ってきた今でも、そのシンプルさと柔軟性には感心しています。数百万人のユーザー規模まで成長する中で、Imgixは私たちのすべてのユースケースをカバーしてくれました」
（ブルーノ・ジョセフ様、Pexels 共同創業者）
Webサイト向けにレスポンシブ画像を自動で提供できるようになったことも、同社にとって大きな成果です。以前は、4種類のバリアントしか用意できないことが大きな課題でした。エンコード方式が異なる珍しい画像フォーマットが多く、多くのエラーの原因になっていたためです。
「アップロードされた画像を処理する際、主に特殊な画像エンコードが原因で、多くの問題が起きていました」とジョセフ氏は言います。「Imgixのおかげで、エラー率を大幅に下げ、画像配信の安定性を大きく高めることができました」
こうして効率が上がったことで、Pexelsのチームは会社の目標に向けた業務に、より多くの時間を割けるようになりました。
「当時はまだ本当に小さな会社だったので、この作業の専任者はいませんでした」とジョセフ氏は言います。「正確に何時間とは言えませんが、本来の優先事項に割くべき時間が奪われていました。Imgixのおかげで、物事がずっと簡単でシンプルになりました」
Imgixは特に、コンテンツキュレーションチームがアップロード直後の画像を選別する際に役立っています。さまざまなバリアントを確認したり、拡大して細部をチェックしたりできるからです。また、マーケティングチームも一部のランディングページでImgixを活用しています。画像を簡単にアップロードし、自動的にサイズを変更して、各ランディングページの仕様に合わせることができます。
Imgixの使いやすさと効果により、Pexelsはこれからも世界中のユーザーに高品質な画像を届け続けることができます。
「複雑なものをシンプルにすることは、私たちの企業理念の1つです。Imgixはまさにその好例で、画像処理や加工の複雑さはすべて、非常にシンプルなImgix APIの裏側に隠れています」とジョセフ氏は言います。「こうしたことを心配する必要はもうありません。とにかく問題なく動いてくれます」
