Nikkeiは、ページの読み込みを1秒短縮し、画像サイズを 37% 縮小し、より正確な顔の切り抜きを実現しました。
顧客
日経ドットコムは、世界最大の金融ニュースウェブサイトの1つで、毎月500万枚以上の画像を配信しています。競争に勝つためには、高品質の画像を提供し、高速に画像を読み込んで、正確な顔の切り抜きができる画像処理ソリューションが必要でした。Imgix レンダリング API 画像処理ワークフロー全体を簡素化し、納品しました。
1876年に設立された日本の 日経 世界最大の金融ニュースサービスです。日経は、英国を拠点とするフィナンシャル・タイムズの親会社であり、東京証券取引所と提携している日経225指数の発行者でもあります。日経新聞は、約400万人の登録ユーザーに1日900件以上の記事を提供しています。そのうち、50万人以上がAndroid、iOS、デスクトップオペレーティングシステムを通じて同社のサービスにアクセスする有料購読者です。日経の記事は数字だけではありません。幅広いトピックに関する魅力的なコンテンツを読者に提供し、日経のサーバーは毎月500万枚以上の画像を配信しています。
ザ・チャレンジ
「オンラインニュース業界で競争するには、ほぼ瞬時に読み込まれる高品質の画像を提供する必要があります」と、日経のデジタル戦略・企画マネージャーである高安氏は言います。日経のようなコンテンツプロバイダーが直面している課題は、読者がこれらの画像をスマートフォン、大型モニター、タブレットで閲覧し、これらのデバイスはすべて画面解像度やページレンダリングが異なることです。彼らはFastlyとCloudFront CDNを使っていましたが、十分な可用性が一貫して問題でした。「読者のデバイスごとに画像をカスタマイズして、カスタマーエクスペリエンスを最適化する必要があります。」
正確な顔検出やその他の関連するポイントに基づいたトリミングは大きな課題です。たとえば、スピーチをしている政治家の画像には、舞台や表彰台などの背景画像が余分に含まれている場合があります。あるいは、政治家の旗は重要な要素です。トリミングが不十分だと、素晴らしい写真の意味がすべて失われる可能性があります。また、さまざまなパラメーターでトリミングできることは大きな利点です。
手作業による画像のサイズ変更やトリミングを最小限に抑えるため、エンジニアリングチームは社内の画像変換ソリューションから始めました。「問題なく動作しましたが、必要な機能や堅牢性が備わっていませんでした」と高安氏は言います。また、日経特有の DevOps の課題に取り組む代わりに、狭く特殊な機能をコーディングしようとすると、かなりの時間と労力が必要でした。
そこで、サードパーティのツールと自社の API を比較して、よりよい方法を見つけ始めました。具体的には、日経新聞社は次のような画像変換ソリューションを必要としていました。
- 各ユーザーのデバイスに応じて、最高解像度の画像を配信します。
- 最速のダウンロード速度を有効にします。
- 正確な顔検出に基づいてインテリジェントにトリミングします。
- クレジットまたはロゴをオーバーレイとして追加します。
- 安全な URL を割り当てます。
- ライセンスに基づいて有効期限を設定
解決策
日経は、自社のソリューションにより多くの時間と労力を費やすのではなく、イメージング変革のニーズを解決するためにImgixと提携することを決定しました。「私たちのニュース画像の多くには顔写真が含まれているので、さまざまなソリューションを評価するには、さまざまなツールが顔の領域に基づいて同じ画像をどのようにトリミングするかを確認するのが最善のテストだと感じました」と高安氏は言います。「Imgix は明らかに最高の仕事をしました。」顔中心の切り抜きは顔の特徴を識別し、フレームに収まるように全方向に均等に切り抜きます。ただし、Imgix には次のような多くの改良が加えられています。 クロップ=フォーカルポイントこれにより、顔と隣接する前景のコンテキスト（おしゃれなドレスや、政治家の場合は背景の旗など）を中央に配置できます。あまりはっきりしない背景は必要に応じて切り抜きます。
Imgixのもう1つの利点は、AWS仮想パブリッククラウド（VPC）から日経のS3バケットに簡単にアクセスできることでした。この機能を自社開発の API に組み込むことを検討していましたが、代わりに社内の人材を Nikkei.com の機能に集中させることにしました。
日経は、Imgixが変換後の画像を日経プロキシ（内部画像キャッシュ制御を維持）を介してS3リポジトリに送信するワークフローを設定して、Imgixを導入しました。その後、Imgix を使ってウェブアプリとモバイルアプリをセットアップしました。 レンダリング API そして生産の準備が整いました。「Imgix SDK はシンプルでわかりやすかったので、クライアント側のセットアップは迅速でした」と高安さんは言います。チームは Kotlin と Kotlin を使ってクライアントサイドのモバイルアプリを作成しています。 スイフト Imgix の JavaScript を使用しています リアクトライブラリ ブラウザコード用。
その後、チームは画像 URL にパラメーターを追加するだけで、画像の強調、サイズ変更、トリミング、圧縮、パフォーマンスの向上のための形式変更、複雑なコンポジションの作成、有用なメタデータの抽出などを行えるようになりました。たとえば、Imgix.js を使うと、はるかに使いやすくなります。 srcset 属性。幅400ピクセルのフレームの画像を、3種類の解像度で呼び出すために、開発者はImgixを追加した。 w そして dpr URL パラメーター:
この手法は、デバイスピクセル比（DPR）パラメータをヒントにして、さまざまなデバイスの画質を最適化します。これは、日経新聞のニュース写真や金融チャートでできる限り鮮明な画像を表示する場合に特に重要です。以下は、日経が幅広く利用した変換パラメータの一部です。
- s 画像の URL が変更されるのを防ぎます。
- トリム=カラー 各時計の周りの余分なスペースを削除します。
- フィット=フィル 次に、時計の左右に同じ量のスペースを追加し、背景色パラメーターで同じ色を定義すると、次の式で定義される正方形の画像が作成されます。 バー= 1:1。
- h 画像の高さを設定します。
- 収穫 さまざまなトリミングオプションを有効にします。
- fm WebP や JPEG などの出力フォーマットを設定します
結果
Imgixは、画像処理ワークフロー全体を簡素化しただけでなく、画像ファイルのサイズと読み込み時間を大幅に削減しました。iOSではファイルサイズが最大37.7％削減され、Chromeブラウザのサイズは24.7％まで減少しました。ロード時間は全体的に平均 1.1 秒短縮されました。
「Imgix を使い始めてから、低レイテンシーでより豊かな画像を提供できるようになりました。つまり、ユーザーのデバイスに関係なく、顧客満足度が高まるということです」と高安氏は言います。日経は、最初の実装以来、ユーザー体験を向上させる方法をさらに模索するために、Imgixの豊富な機能を模索してきました。高安さんは次のように付け加えています。「私たちは当初 Imgix に大きな期待を寄せていましたが、彼らの魔法が働いているのを見た後、彼らは今や完全に自信を持っています。」
