世界最大級の金融ニュースサイトである日本経済新聞の電子版nikkeiは、毎月500万件以上の画像を配信しています。競争に勝つためには、高画質の画像を提供し、読み込みを高速に行い、正確な顔の切り抜きを実行できる画像処理ソリューションが必要でした。imgixのレンダリング APIを使用して画像処理のワークフロー全体を簡素化した結果、以下を実現しました。
iOSのファイルサイズの削減
Chromeブラウザのサイズ縮小
読み込みを高速化
お客様について
1876年創立の日本の経済新聞である日本経済新聞は、世界最大の金融ニュースサービスの1つです。英経済紙フィナンシャル・タイムズの親会社でもあり、東京証券取引所に連動する日経平均株価 (日経225)指数の発行元でもあります。日経は、1日に900件以上の記事を約400万人の登録ユーザーに提供しています。そのうちの50万人以上は有料会員で、Android、iOS、デスクトップ・オペレーティング・システムを通じて同社のサービスにアクセスしています。日経に掲載される記事は数字に関するものだけではありません。幅広いトピックに関する魅力的なコンテンツを読者に提供し、毎月500万件以上の画像を日経のサーバーから配信しています。
導入前の課題
「オンラインニュース業界で競争するには、ほぼ瞬時に読み込まれる高画質の画像を提供する必要があります」と、日経のデジタル戦略・企画マネージャーである高安氏は言います。日経のようなコンテンツプロバイダーが直面している課題は、読者がこれらの画像をスマートフォン、大型モニター、タブレットなどで閲覧し、それらのデバイスは全て画面解像度やページのレンダリングが異なることです。日経はFastlyとCloudFrontのCDNを使っていましたが、稼働率が安定していないことが常に問題でした。「顧客体験を最適化するには、読者のデバイスごとに画像がカスタマイズされなければならないからです。」
正確な顔認識とその他の注目ポイントに基づいたトリミングも大きな課題でした。例えば、演説中の政治家の画像の場合は、舞台や演壇といった背景画像が含まれる場合があります。あるいは、政治家が掲げる旗も重要な要素でしょう。トリミングが不適切だと、良い写真の意味がすべて失われる可能性があります。また、さまざまなパラメーターでトリミングできることは大きな利点にもなります。
「ニュース画像の多くには顔写真が含まれているので、さまざまなソリューションを評価するには、同じ写真をその顔の領域に基づいて、各ツールがどのようにトリミングするかを確認するのがよいと考えテストしたところ、明らかに最も優れた結果を出したのがimgixでした」
— デジタル戦略・企画マネージャー、高安氏
手作業による画像のサイズ変更やトリミングを最小限に抑えるため、エンジニアリングチームはまず、内製の画像変換ソリューションから始めました。「問題なく動作しましたが、必要な機能や堅牢性が備わっていませんでした」と高安氏は言います。また、狭く絞り込まれた、特殊な機能のコーディングにかなりの時間と労力が要され、他のDevOpsの課題に時間を割けられませんでした。
そこで、サードパーティのツールと自社のAPIとを比較して、より良い方法を見つけることにしました。日経が求めていたのは、具体的には次のことができる画像変換ソリューションでした。
- 各ユーザーのデバイスに応じて、最高解像度の画像を配信する
- 最速のダウンロード速度を可能にする
- 正確な顔認識に基づいてよりくトリミングを実行する
- さまざまなファイル形式をAVIF・WebPに変換する
- クレジットやロゴをオーバーレイとして追加する
- セキュアなURLを割り当てる
- ライセンスに基づいて有効期限を設定する
ソリューション
日経は、自社のソリューションにそれ以上多くの時間と労力を費やすよりも、imgixと提携して画像変換のニーズを解決することにしました。高安氏はこう語っています。「ニュース画像の多くには顔写真が含まれているので、さまざまなソリューションを評価するには、同じ写真を、それぞれのツールが顔の領域に基づいてどのようにトリミングするかを確認するのがも最適な方法だと考えテストしたところ、明らかに最も優れた結果を出したのがimgixでした。」顔中心のトリミングでは、顔の特徴を識別し、フレームに収まるように全方向を均等に切り抜きます。この際、imgixではいくつもの微調整を加えられます。例えば、「crop=focalpoint」は、顔と隣接する前景のコンテクスト (ファッショナブルなドレスや、政治家なら背景に掲げた旗など)を中央に配置できます。あまりはっきりしない背景は、必要に応じてトリミングされます。
imgixのもう一つの利点は、AWS Virtual Public Cloud 9 (VPC)から日経のS3バケットに簡単にアクセスできることでした｡同社は､この機能を自社開発のAPIに組み込むことを検討していましたが、社内リソースはnikkei.comの機能に集中させることにしたのです。
imgixの導入にあたり、日経はまず、変換された画像を日経のプロキシを通じて(内部の画像キャッシュ管理はそのままで)、imgixがS3リポジトリに送信するワークフローを設定しました。
次にimgixのレンダリング APIを使ってウェブとモバイルアプリ設定し、本稼働の準備を整えました。「imgixのSDKはシンプルで分かりやすかったので、クライアント側の設定が短時間で済みました」と高安氏が振り返ります。クライアント側のモバイルアプリは、KotlinとSwift、ブラウザコードはimgixのReactライブラリ からJavaScriptを使用して作成します。
後は、画像URLにパラメータを追加するだけで、画像の強化、サイズ変更、トリミング、圧縮、パフォーマンス向上のための形式変更、複雑なコンポジションの作成、有用なメタデータの抽出などを行えるようになりました。例えば、imgix.jsを使うことで、srcset属性がはるかに使いやすくなります。幅400ピクセルのフレームに、3つの異なる解像度の画像を呼び出すには、imgixのw とdpr URLのパラメータを追加します。
導入後の結果
日経は、imgixの導入により、画像処理のワークフロー全体を簡素化できただけでなく、画像ファイルのサイズと読み込み時間を大幅に削減することができました。iOSではファイルサイズが最大37.7%削減され、Chromeのブラウザサイズは最大24.7%縮小されました。さらに、読み込み時間は、全体平均で1.1秒短縮しました。
「imgixを導入してからは、より豊かな画像を低レイテンシーで提供できるようになり、ユーザーがどのデバイスで閲覧するかにかかわらず、満足度を高めることができました」と高安氏は言います。最初の導入時以降も、日経はimgixの豊富な機能を試して、ユーザー体験をさらに向上させる方法を模索しています。高安氏は次のように付け加えています。「imgixには大きな期待を寄せていました。まるで魔法のような働きをしてくれるのを実際に見てからは、100%安心して任せられています。」
