日経、ページ読み込みを1秒短縮し、画像サイズを最大37%削減。顔認識クロッピングの精度も向上。
お客様について
日経電子版（Nikkei.com）は、世界最大級の金融ニュースサイトの一つであり、毎月500万枚以上の画像を配信しています。競争が激しい市場の中で、日経は以下の要件を満たす画像処理ソリューションを必要としていました。
- 高品質な画像を迅速に配信すること
- ページ読み込み速度を向上させること
- 顔認識を活用した正確なクロッピングを実現すること
ImgixのRendering APIを導入することで、日経は画像処理ワークフローを大幅に効率化し、これらの課題を解決しました。
1876年創業の日本経済新聞（日経）は、世界最大の経済ニュースサービスであり、イギリスのFinancial Timesを傘下に持つほか、日経平均株価（Nikkei 225）の発表元でもあります。日経は1日900本以上の記事を配信し、登録ユーザー数は約400万人、そのうち50万人以上が有料会員として、Android、iOS、デスクトップでサービスを利用しています。単なる数値データだけでなく、多岐にわたるコンテンツを提供しており、ニュースサイトとして膨大な量の画像を扱っています。
課題
「オンラインニュース業界では、高品質な画像を瞬時に表示させることが不可欠です」そう語るのは、日経のデジタル戦略・企画マネージャーである髙安氏。
ニュース読者はスマートフォン、大型モニター、タブレットなど多様なデバイスで記事を閲覧するため、画面解像度やページレンダリングが異なります。日経はFastlyやCloudFrontのCDNを活用していましたが、可用性の確保が課題でした。「読者一人ひとりのデバイスに合わせた画像で、顧客体験を最適化する必要がありました」と髙安氏は語ります。
また、顔認識を活用した正確なクロッピングも大きな課題の一つでした。
例えば、政治家の演説写真には、ステージや演壇といった余分な背景が写り込むことがあります。一方で、政治家の背後にある国旗のように欠かせない要素もあります。クロッピングが不適切だと優れた写真の意味が失われてしまうため、さまざまなパラメータでクロッピングを調整できることは大きな強みです。
日経は当初、社内で画像変換ツールを開発しましたが、機能の制約やメンテナンス負担の増大が課題でした。
「基本的な処理はできたものの、必要な機能や堅牢性に欠けていました」と髙安氏は振り返ります。
そこで、より最適なサードパーティソリューションを検討。特に、以下の要件を満たす画像処理ソリューションを求めていました。
- デバイスに応じた最高品質の画像を提供
- 超高速な画像配信
- 高精度な顔認識クロッピング
- クレジットやロゴのオーバーレイ対応
- セキュアなURL管理
- ライセンスに基づく有効期限設定
解決策
自社開発の継続よりも、Imgixとのパートナーシップを選択した日経。
「特に顔写真のクロッピング精度を比較したところ、Imgixの結果が明らかに最も優れていました」と髙安氏は語ります。
Imgixの顔中心クロッピングは、顔の特徴を認識し、適切な比率で画像をトリミングします。加えて、crop=focalpoint パラメータを活用することで、背景の国旗やファッションなどの重要な要素を考慮しながら、最適な画像を生成できるようになりました。
さらに、Imgixは日経のAWS環境（S3バケット）へ簡単に接続できる点も大きな利点でした。
当初はこの機能を自社APIに組み込むことも検討していましたが、社内の開発リソースは日経電子版の機能開発に集中させることにしました。
日経のオンボーディングプロセスは次のように進行しました。
1. Imgixが変換した画像を日経のプロキシ経由でS3へ送信し、キャッシュ管理を維持
2. Web・モバイルアプリとImgix Rendering APIを統合し、本番環境に適用
3. Kotlin（Android）やSwift（iOS）、JavaScript（Imgix Reactライブラリ）を活用してクライアント側の実装をスムーズに完了
「Imgix SDKはシンプルで直感的だったため、クライアントサイドのセットアップも非常にスムーズでした」と髙安氏は話します。
導入後は、URLパラメータを追加するだけで、画像の調整・圧縮・フォーマット変換が可能に。
また、srcset属性を活用し、デバイスごとに最適な解像度の画像を配信することが容易になりました。たとえば、幅400ピクセルの枠に3種類の解像度で画像を出し分ける場合も、開発者はImgixのwとdprのURLパラメータを追加するだけです。この手法はデバイスピクセル比（DPR）をもとに、デバイスごとに画質を最適化します。
特に、ニュース写真や金融チャートなどの視認性が重要な画像において、デバイスごとに最適な品質を提供できる点が大きなメリットとなりました。
日経が活用した主なImgixのパラメータ：
s：画像URLの改変を防止trim=color：画像周囲の余白を削除fit=fill：背景色を指定し、左右に均等なスペースを追加して正方形（ar=1:1）の画像を作成h：画像の高さを指定crop：多様なクロッピングオプションを適用fm：WebPやJPEGなどの出力フォーマットを指定
結果
Imgixの導入により、日経の画像処理ワークフローは大幅に簡素化され、ファイルサイズと読み込み速度が大きく改善されました。
📉 iOSの画像ファイルサイズは最大37.7%削減
📉 Chromeブラウザの画像サイズは最大24.7%削減
⚡ ページの読み込み時間は平均1.1秒短縮
「Imgixを導入してから、より高品質な画像を低遅延で配信できるようになり、あらゆるデバイスでのユーザー満足度が向上しました」と髙安氏は語ります。
Imgixの導入後、日経はさらに新たな機能の活用を模索し、ユーザー体験の向上を追求し続けています。「最初の期待は高かったですが、実際にImgixの効果を目の当たりにして、今では完全な信頼を寄せています」と髙安氏は話します。
