BentoBoxは、視覚的に魅力的でモバイルフレンドリーなウェブサイトをレストラン向けに構築しています。顧客のSEOランキングが上がるよう、画像やその他のビジュアルメディアを最適化すべくimgixを導入しました。その結果、ページの読み込み速度が25%速くなり、キャッシュヒット率が大幅に向上し、忠実度の高いグラフィックが実現しました。
お客様について
レストランの成功はユーザー体験に大きく依存し、その始まりはウェブサイトです。BentoBoxは世界中の8,000以上のレストランが、より良いウェブサイトを作り、顧客との関係を築く手助けをしています。BentoBoxのデザインから分析、マーケティングツールまでを含む統合プラットフォームを使えば、レストランはウェブサイトの訪問者を最大70%増やし、コンバージョンを7倍にすることができます。
レストランは、Djangoウェブフレームワークで構築されたBentoBoxのCMSに独自の画像をアップロードできます。当然ながら、高解像度のプロ仕様の写真から、携帯電話で撮影した素人写真まで、画質は大きく異なります。デザイン用リソースは顧客ごとにさまざまですが、BentoBoxはすべての顧客にとって最高のウェブサイトを実現できるよう最適な技術スタックを構築しています。
導入前の課題
BentoBoxは顧客のウェブプレゼンスを高めることに重点を置いているため、顧客がブランドを高め、収益を増やすにはSEOが不可欠です。また、ページの読み込み速度もSEOランキングの重要な要素です。さらに、ワイドスクリーンでもモバイル端末でも、画像は画質を保ち、レスポンシブである必要がありました。
BentoBoxが以前使っていたソリューションでも、画質面では要件を満たす画像を得られましたが、ファイルサイズはそれほど小さくなく、キャッシュヒット率も低いものでした。こういった要因は、ページの読み込み速度を低下させ、SEOランキングやサイト全体の効果を損なっていました。BentoBoxのCTOであるPierre Drescher氏は次のように語っています。「レストラン業界は競争が激化しており、最高のパフォーマンスを発揮するサイトを設計することが必須となっています。」
モバイルデバイスで表示される画像は、最適なサイズ調整やトリミングができていませんでした。金曜夜のウェブトラフィックの80%~90%がスマートフォンからのものであることを考慮するとこれは問題でした。また、社内で画像の最適化を行うことによる運用経費も正当化できませんでした。ワークフローは、開発者にとって面倒で退屈な繰り返しの多い作業だったのです。自社ソリューションを運用する際の追加の負荷や費用をかけずに、画像の忠実性を重視しながら、画像のサイズ変更、トリミング、圧縮を行い、レスポンシブな画像の配信を実現できる画像処理ソリューションが必要な状況でした。
ソリューション
「CDNは汎用的なものですが、画像の最適化は専門性の高い機能です。そのエキスパートであるimgixは、レンダリング APIが豊富で、ソリューション全体の管理もはるかに簡単です」
― BentoBox社CTO、Pierre Drescher氏
BentoBoxのDjangoベースのテンプレートエンジンでのimgixの実装は、数分で完了しました。デザイナーは特定のページに必要な画像サイズを選択し、メディアギャラリーを使って、印刷広告などの他の用途向けに最適化された画像を簡単に取り出すことができます。
同社は、最適化にカスタムURLパラメータを適用するのにimgixレンダリングAPIを設定しました。その中で最もよく使用されているものを以下にご紹介します。
- fit 画像をターゲットサイズに収まるようフィット
- auto デバイスごとの画像最適化を自動化
- fm WebPやJPEGなどの出力フォーマットを設定
- pad 顔など画像の特徴部分のセンタリングをカスタマイズ
- q 高DPR 画像の配信にデフォルトより低い出力画質の指定を有効化
imgixの導入により、開発者は幅広いパラメータセットから選択してこういった最適化を微調整できます。例えば、Mortons.comでは、<fit=max>により、画像をトリミングしたり変形させたりすることなく、幅と高さの範囲に収まるように画像のサイズを変更しています。
BentoBoxがオンライン注文機能を導入した際は、imgixはレスポンシブ画像としてすぐに読み込めるサムネイルをすばやく統合することができました。
導入後の結果
ページの読み込み速度の向上は、SEOランキングを上げるうえで最も重要なテクニックの1つであり、imgixがBentoBoxのお客様に貢献しています。
同社は、画像のサイズ変更、圧縮、遅延読み込みなどを活用し画像を最適化した結果、Google PageSpeed Insightsを25%改善できました。
imgixのCDN経由で画像を配信することにより 、BentoBoxのお客様はキャッシュヒット率を改善し、SRGB-RGBの強制変換などの画像忠実度のエラーをなくしました。CDNが完全にホスティング環境の外部にあるため、同社はスケーリングについても心配する必要がなくなりました。
BentoBoxの開発者は、imgixが提供するドキュメントが明確で役に立つと感じています。また、imgix サンドボックスを使い、imgixがどのように画像を変換して最適化するかをデザイナーに紹介することで、コラボレーションして最高のデザイン結果をできるようにしています。