日本の大手旅行サイトである一休.com (ikyu.com) は、毎月 60 億件を超える画像リクエストを処理しています。 AWS Lambda と ImageMagick を imgix に置き換えることで、一休は Google PageSpeed スコアを 15 ポイント向上させ、平均応答時間をわずか 16 ミリ秒に短縮し、画像処理に関連する運用オーバーヘッドを削減しました。

顧客

一休.com (ikyu.com) は、高級ホテルやレストラン、旅館を多数取り揃えていることで知られている日本の旅行とホスピタリティのプラットフォームです。1998年に設立されたこの企業は、東京に本社を構えており、宿泊予約サイトの「一休.com」には6,000軒以上のホテルと旅館が掲載されています。また、Yahoo!トラベルの画像管理も一休が担当しています。

日本が国内外の旅行業界を再開するにあたり、多くの予約サイトが市場のシェアを競う中、熾烈な競争が続いているのが現状です。多くの要因の中でも、画像は顧客の選択において非常に重要な役割を果たしています。

「宿泊施設でも飲食店でも、お客様が訪れたときにどんな体験を得られるのかイメージできることは重要です。 具体的にイメージできるように画像はとても重要な要素です。 顧客が多額の費用を費やして予約する場合、最も見栄えのよいものを選ぶことは自然なことです。」 - 山口さん 一休

チャレンジ

一休のチームは、ブラウザごとに画像を最適化し、各ページに最適なサイズで高品質の画像を提供し、画像処理に関連する運用オーバーヘッドを削減することでパフォーマンスを向上させる必要があることを早くから認識していました。 2017 年以前、ikyu.com は画像の最適化に AWS Lambda と ImageMagick を利用していました。 チームは、ページ、デバイス、または帯域幅環境に適応するための正確なサイズ調整を行うことができませんでした。

「ImageMagick と Lambda は画像を 4 つのサイズにのみ変換します。 レスポンシブデザインを妥協する必要がありました。 さらに、WebP などのよりパフォーマンスの高い画像形式にアクセスすることもできませんでした。」 - 山口さん 一休

ソリューション

2017 年、一休は imgix への移行を決断しました。 それ以来、チームは ikyu.com、restaurant.ikyu.com などを含む全てのサイトに Image Rendering API をデプロイしてきました。 一休が imgix を使用するクリエイティブな方法の 1 つは、画像コラージュの作成です。 一休では、レストランの内装の画像と料理のクローズアップ写真を並べて、予約ページで魅力的で一貫した視覚体験を提供しています。 これを実現するために、一休は、blend-mode=normal パラメータとウォーターマーク パラメータを活用します。 ここにリンクされているサンドボックスの例で、この手法をどのように再現したかを確認できます。

さらに、一休はほぼ全ての画像に以下のパラメーターを適用して、ファイルサイズと読み込み速度を削減します：

• auto=format は、画像をよりパフォーマンスの良い形式に自動的に変換します。 AVIF を受け入れるブラウザの場合、画像は AVIF 形式で提供され、多くの場合、視覚的なエクスペリエンスを変えることなく、JPEG と比較して画像の重量を 60% 削減できます
• auto=compress は、ベストエフォート型圧縮を適用して画像のサイズを削減します。 画像の種類によっては、最良の結果を生み出すために処理アルゴリズムが異なる場合があります。
• lossless=0 は非可逆圧縮を適用します。これにより、可逆圧縮よりも画像サイズが大幅に削減され、Web ページの応答性が向上します。

結果

imgix を導入して以来、一休は月間 60 億件を超える画像リクエストを平均応答時間わずか16ミリ秒で処理しています。さらに、チームはGoogle の PageSpeed Insights を使用して Web パフォーマンスの追跡を開始しました。その結果、チームのスコアは15ポイント向上しました。

「imgix は、非常に効果的な画像の最適化および配信ソリューションです。簡単なクエリ設定で、適切な形式で高いパフォーマンスで画像を配信できます。日本語でコミュニケーションできるアカウントマネージャーとセールスエンジニアがいることは大きなメリットです。imgix のおかげで、低い運用オーバーヘッドで最適な画像をユーザーに提供することができます。」- 山口さん 一休

‍