Black background with a sleek gray graphic

ExposureがImgixを活用し、写真そのものに手を加えることなく魅力的なフォトストーリーを届ける方法

課題

言葉と画像は、昔から最強の組み合わせです。2つがそろうと人の目を引き、強い印象を残します。では、その組み合わせを誰でも簡単に作れるようにしたら、何が起こるでしょうか。Exposure.coは、写真家やストーリーテラー、団体が高解像度の画像とテキストを組み合わせ、個々の要素の総和を超える美しいストーリーを作れるコミュニティを築くことで、その答えを見つけつつあります。Filson、WWF、charity: waterなどのクライアントは、このサイトを活用してリーチを広げ、ビジュアルを通じてオーディエンスと直接つながっています。

しかし、レスポンシブデザインの時代に写真を主役に据えるには、いくつかの課題があります。アップロードされる画像はサイズが大きく、デバイスの制約によってダウンロードに時間がかかるのを避けるため、さまざまなサイズで表示する必要があります。開発者のカイル・ブラッガー氏によると、「製品の生命線」であるExposureのフォトグリッド機能が、さらに複雑さを増す要因になっていました。

「ブラウザのサイズやデバイスの向きが変わるたびにグリッドが再描画されるため、同じオリジン画像に対して、数十種類ものサイズを配信する可能性があります。オンザフライで画像をリサイズするサービスがなければ、これに対応するのはほぼ不可能です」

また、ブラッガー氏と共同創業者のルーク・ビアード氏の2人だけの少人数チームにとって、デザインに必要なすべての派生画像にかかる多額のホスティング費用も懸念材料でした。そこで2人は、サイトを構築するにあたり、この潜在的なコストを抑える手段としてImgixに注目しました。

Exposure-Luke
Exposure-Kyle

解決策

Exposureのチームはサービスの立ち上げ前からImgixの機能を把握していたため、最初から画像パイプラインをシンプルに設計できました。ユーザーはストーリー用のオリジン画像を、ExposureがImgixと接続したAmazon S3リポジトリに直接アップロードします。サイト上で写真が閲覧されると、Exposureはリサイズされた派生画像(オリジン画像1枚あたり平均7枚)をImgixにリクエストし、Imgixがそれらを生成したうえで、後で再利用できるようキャッシュします。

「画像が当社のアプリケーションサーバーを通ることは、文字どおり一切ありません。配信している画像の帯域量を考えると、Imgixと同等の仕組みを自前で構築・拡張して、コスト面で見合うようにするのは簡単ではありません。その代わりに、すでに他社が完成させているインフラではなく、コアとなるプロダクトの開発に集中しています」

Exposure solution
最初からImgixを使う前提でサイトを設計したことで、Exposureはベストプラクティスをすぐに取り入れることができました。より多くの画像サイズをキャッシュに保持するため、派生画像を100ピクセル単位で作成し、そこから必要な正確なサイズに調整しています。圧縮率の高い画像フォーマットへ自動で変換するコンテンツネゴシエーションと組み合わせることで、デザインの自由度が大きく高まり、読者のページ読み込みも大幅に速くなりました。

結果

Exposureには毎週15,000点を超える新しい画像がアップロードされていますが、Imgixのおかげで、画像処理のインフラやエンジニアリングにそれに見合うコストをかけることなく、需要の拡大に対応し、新機能を追加できています。

「写真のインフラについて心配することはありません。とにかく問題なく動きます。しかも、プログレッシブJPEGやWebPといった新しいパフォーマンス向上機能も、追加料金なしですべて利用できます。本当に得意なことに集中するのが一番です。私たちはフォトストーリーテリングとコミュニティを熟知していて、Imgixは画像処理とパフォーマンスを熟知しています」

ブラッガー氏とビアード氏は、チームを小規模に保ちながら、ブランドストーリーテリングやその他のコミュニティ機能へと事業を広げ続けています。複雑な画像処理をImgixに任せているため、Exposureがフォトストーリーを届ける新しく革新的な方法を生み出すうえで、限界を決めるのはチームの規模ではなく、自分たちと顧客の想像力だけです。

Exposure banner image 2
ケーススタディホームに戻る