お客様について

ドイツを拠点とする無料のストックフォトプラットフォームPexelsは、何百万人もの人々が自分のプロジェクトに最適な画像を見つけるのに役立っています。ユーザーはPexelsのサイトで、フォトグラファーたちがアップロードしたさまざまなカメラフォーマットのストックフォトを検索できます。

2014年に約800件の画像からスタートした同社は、今では320万件を超えるフォトストックと動画のライブラリを運営しており、その数は毎月約25万ファイルずつ増え続けています。

imgix docs libraries

導入前の課題

Pexelsは、コンテンツクリエイターに優れたユーザー体験を提供すると同時に、簡易に、かつ迅速に導入できて、急速な成長を続ける同社に合わせて拡張できる画像ソリューションを必要としていました。

Pexelsの共同創設者であるBruno Joseph氏は、「アップロード数が増えるにつれて、複雑性も増していきました。また、以前のソリューションは拡張性に乏しく、管理も非常に困難でした」と述べます。

同社のコンテンツはすべてユーザーが作成したものであるため、画像のアップロードや処理、標準化に時間がかかり、画質やサイズにばらつきがあるため、エラーが発生しやすくなります。Pexelsは当初、自社で画像サイズ変更ソリューションを構築し、それはユーザーが新しい画像をアップロードすると、バックエンド処理と画像のサイズ変更が開始されるというものでした。この作業は、同社のRuby on Railsバックエンドで、無料の画像作成・修正プラットフォームImageMagickを使用して実行されていました。しかしこれでは、デバイスサイズやピクセル密度の違いに応じて、サイズの異なる4種類の画像を手動で作成して保存する必要がありました。画像の処理と加工は当初考えていたよりも複雑であることに、同社はすぐに気づかされます。

「imgixは、画像の保存方法を変更する必要はなく、S3バケットに接続するだけで始められましたし、画像用のインフラの拡張について考える必要もなくなりました。何も変更することなく、数百万の画像にも数十億の画像リクエストに対応できるようになったのです」

— 共同創設者、Bruno Joseph氏

「以前のソリューションでは、画像が処理されて表示されるまでに数分かかることがありました。ImageMagickには画像形式の多くが欠けていて、エラーが頻繁に発生したり、各形式の処理に数秒かかかったりするなどの問題がありました。そのため、フォトグラファーのアップロード作業は満足のいくものではなく、処理速度も遅いものでした。数百枚の画像を一度にアップロードすると、15~20 分かかることさえあったのです」と Joseph氏は振り返ります。

このソリューションが持続可能ではないことは、すぐに明らかになりました。非効率的で、無駄にすることはできない同社の貴重な時間とリソースを浪費していたのです。ImageMagickのような人気ツールを使っても、何かが壊れないように処理が必要なエッジケースがまだたくさんありました。

「他のユーザーが同時にアップロードしていると、処理がさらに遅くなったり、時にはバグやその他の問題が発生したり、全く処理できない写真もあったりと、いつも何かしら問題があったので、エッジケースについて対処が必要でした」とJoseph氏は語ります。

Pexelsが検討しなければならなかったのは、ユーザー生成コンテンツだけではありませんでした。自社のウェブサイトとマーケティングのニーズも、画像処理サービスの採用条件に考慮されていたのです。また、モバイルアプリを追加した際、当初のソリューションでは必要なレスポンシブデザインが提供されず、増大するニーズに合わせて拡張することもできませんでした。

「ウェブサイトに必要なものに基づいて、さまざまなサイズにハードコーディングしました」とJoseph氏は述べ、ウェブサイト上の何かを変更したい場合、最大限の効果を得るのにどのバリアントを使うかを選択するかが避けられない問題であったと説明します。「サイズを推定していたので、デバイスやDPRに応じて動的に変化するレスポンシブ画像がなかったのです」。

ソリューション

Pexelsはimgixを採用する前に、いくつか他の画像サービスも検討しました。それらの多くは、高価で導入に時間がかかり、実装に複数のレイヤーを必要とする複雑なソリューションに傾く傾向がありました。対してimgixは、基本はS3バケットをリンクさせるだけで利用を開始できたのです。

「試してみて、すぐに使えるようになったのはとても良かったです。」とJoseph氏が振り返ります。

imgixのライブラリもまた、迅速な導入に役立ちました。

「ライブラリはすぐに使い始めるのに確実に役立ったと思います。ライブラリのインターフェースも非常にシンプルで、必要なものを見つけて実行するだけでよかったんです。とにかく、非常に分かりやすく、使い方もシンプルでした」とJoseph氏は語ります。

imgix docs libraries

現在、Pexelsのユーザー生成コンテンツはすべて直接S3にアップロードされています。その後、imgixのメタデータ・エンドポイントを使用して画像を分析し、スクレイピングしてメタデータを取得します。そうすることで、各画像のカメラの種類やシャッタースピードなど、さまざまな要素を判断できます。次に、Pexelsのコンテンツキュレーションチームがすべての画像に目を通し、検索機能またはホームページに表示するベストの写真を選択し、画像に適切なキーワードを追加します。

「検索対象に含める場合は、エラスティックサーチを使って検索インデックスを作成し、Pexelsで検索できるようにします」とJoseph氏は説明します。

導入後の結果

imgixを導入後、そのシンプルさと拡張性の高さが、まさにPexelsが求めてたものであることが証明されました。また、機能横断的にも部門横断的にも使用できるので、効率性も高く評価されました。

「使い始めるのも、実際に使用するのも簡単でした。基本的にそれほどの変更もなく、数時間で利用できるようになり、とにかくシンプルな導入でした」とJosephは言います。「画像の保存方法を変更する必要はなく、S3バケットに接続するだけで始められましたし、画像用のインフラの拡張を検討する必要もなくなりました。imgixを使うことで、何も変更することなく、数百万の画像にも数十億の画像リクエストにも対応できるようになったのです」。

Thirty percent.

送信帯域幅の削減

imgixによる最適化で、Pexelsは帯域幅コストの大幅な削減も実現。送信帯域幅が30%以上削減されました。

最適化ツールとしてImageMagickからimgixに移行したことで、あまり使われない画像形式にも対応できるようになりました。

「以前は、画像のエンコード方法が異なると、常にエラーが発生していたのですが、imgixはこうした処理をはるかにうまく処理できるため、もうエラーはほぼ発生しなくなりました」とJoseph氏は言います。「ロジックをすべて用意しておかなくても、単一のソリューションでリアルタイムで画像を処理できるという点は、本当に魅力的でした」。

imgixによる最適化で、Pexelsは帯域幅コストの大幅な削減も実現。送信帯域幅が30%以上削減されたのです。

「以前にも画像を最適化したことはありましたが、imgixの最適化の方がはるかに優れていて、弊社のページ表示速度を大幅に高速化できました。画像を多用するウェブサイトなので、特にモバイルや開発途上国でのユーザー体験が格段に向上しました」とJoseph氏はコメントします。

「imgixを5 年以上使用している今でも、そのシンプルさと柔軟性には感心させられます。imgixは、弊社ビジネスがユーザー数百万人規模に拡大していく中で、あらゆるユースケースに対応してくれました」

— 共同創設者、Bruno Joseph氏

また、ウェブサイト用にレスポンシブな画像を自動的に提供できるようになったことも、Pexelsにとって大きなメリットとなっています。以前は、バリアント4種という制限が主な課題でした。エンコード方法が異なる特殊な画像形式のものが多く、エラーが多発していたためです。

「アップロードされた画像を処理する際、変わった画像エンコーディングが原因で、よく問題が発生していました。しかし、imgixのおかげで、エラー率を大幅に減らし、画像配信の耐障害性を大きく高めることができました」とJoseph氏は言います。

このように効率性が向上したことで、Pexelsは貴重な時間を、会社の目標達成に向けての業務により集中させられるようになりました。

「当時は、とても小規模な会社でしたので、この分野の専任スタッフを抱えていませんでした。具体的に何時間とは言いにくいですが、重要な優先事項に割ける時間が削られていたことは間違いありません。imgixを導入したことで、確実にいろいろなことが簡単でシンプルになりました」とJoseph氏は振り返ります。

imgixは特に、アップロードされた直後に画像をコンテンツキュレーションチームが見て、さまざまなバリアントを確認したり、拡大したり、詳細を見たりという作業に役立ちました。また、マーケティングチームは一部のランディングページでimgix を使用して、簡単に画像をアップロードしたり、対象のランディングページの仕様に併せて自動的にサイズを変更したりできるようになりました。

Pexelsが世界中のユーザーに高画質の画像を提供し続けることができる裏には、imgixの使いやすさと有効性があるのです。

「弊社の価値観の1つは、複雑なものをシンプルにすることであり、imgixはまさにその完璧な例です。画像処理と加工の複雑さはすべて、超シンプルなimgix APIの後ろに隠されています。そういった複雑なことは何も心配せず、全部任せておけるんです」とJoseph氏は言います。

Pexels Plus imgix
imgixはリアルタイムの画像処理サービスおよびCDNです。世界中の何千もの企業がimgixを使用して、最適な画像を最適なサイズで利用者に届けています。