Queensmith は画像ファイルサイズを 63% 削減し、Imgix を使用してレスポンシブ画像を動的に作成します。
顧客
受賞歴のある英国の宝石商クィーンズミスは、増え続ける画像カタログを最適化するためにImgixを選びました。Queensmith は Imgix を使用して画像サイズを平均 63% 縮小し、レスポンシブデザインを強化し、以前は面倒で手作業で行っていた画像のサイズ変更プロセスを自動化しました。
「私たちはラグジュアリーとアクセシビリティのバランスを取っています。お客様にとって大切なのは、自分のジュエリーがプレミアムでオーダーメイド品だと感じてもらうことです。そして、私たちにはそんなイメージ体験が必要です。
ザ・チャレンジ
クィーンズミスのウェブサイトには約18万枚のOrigin画像が掲載されており、毎月2,500万件の画像リクエストが寄せられています。訪問の 66% がモバイルデバイスで行われているため、レスポンシブデザインは同社にとって重要な目標です。
imgix を使用してレスポンシブな Web エクスペリエンスを作成する前に、コンテンツチームは各画像を手動でトリミングしてサイズを変更し、さまざまなバリエーションを作成する必要がありました。この労働集約的なプロセスでは、デバイス、ブラウザー、帯域幅環境の組み合わせが拡大し続けるという厄介なニーズをまだ解決できませんでした。製品カタログが大きくなるにつれ、コンテンツチームが画像最適化のニーズに追いつくのが非常に難しくなりました。
その間、同社はShopifyのネイティブCDNに頼っていました。このCDNには高度な画像最適化機能がなく、AVIFやWebPなどの次世代の画像形式もサポートしていませんでした。
解決策
Queensmith が Imgix の画像レンダリング API と CDN について知ったとき、チームは画像の処理と配布がいかに簡単かを知って喜んでいました。迅速なデプロイ、AWS S3 との互換性、CraftCMS とのシームレスな統合により、Imgix は理想的な選択肢となりました。Queensmith が使用している主な機能は以下のとおりです。
- オート=フォーマット 自動コンテンツネゴシエーションにより、最適な形式の画像を決定して提供します。AVIF は、最もパフォーマンスの高い画像ファイル形式として AVIF をサポートしているブラウザーで使用されています。また、フォールバックロジックにより、ユーザーのブラウザーが AVIF や WebP をサポートしていない場合でも、次に最適な形式が選択されます。
- w そして srcset ブラウザーのビューポートの幅に基づいて異なるサイズの画像をレンダリングします。
- クロップ=フォーカルポイント 水平 (fp-x)、垂直 (fp-y)、ズーム (fp-z) の 3 つの座標で画像を中央に配置し、そこからトリミングします。
「とても簡単です。セットアップには 5 分しかかかりませんでした。うまくいくんです。」
-ハリー・ハリソン、ウェブ＆IT責任者兼クィーンズスミス
結果
Queensmith は Imgix を使用して画像サイズを平均 63% 縮小し、画質を損なうことなくページの読み込み速度を速くしました。画像の平均応答時間はわずか 57 ミリ秒です。Imgix の実装は Queensmith にいくつかの利点をもたらしました。
- 時間の節約: クィーンズミスのコンテンツチームは、面倒な画像の切り抜きやサイズ変更を行う代わりに、画像ごとに1つの高解像度バージョンを作成し、Imgixにさまざまなユーザー環境に合わせて動的に再フォーマットおよびサイズ変更させることができるようになりました。
- 使いやすさ: 初期設定は 5 分しかかかりませんでした。Queensmith チームは直感的な機能とドキュメンテーションを備えているため、追加のサポートなしで実験やさらなる調整を行うことができます。
Imgixの導入により、Queensmith はイメージプロセスの変革に成功し、顧客にシームレスで応答性の高い体験を提供できるようになりました。この使いやすいソリューションにより、チームのワークフローが簡素化されただけでなく、画像サイズも大幅に縮小され、顧客にとってより高速で楽しいブラウジング体験が実現しました。
