BentoBox 為餐廳建立具有視覺吸引力且適合行動裝置的網站。為了幫助客戶獲得更高的 SEO 排名，BentoBox 選擇使用 imgix 來優化圖像和其他視覺媒體，從而使頁面載入速度加快 25%、顯著提高快取命中率和高保真圖形。
客戶
餐廳的成功在很大程度上取決於用戶體驗，而體驗通常從網站開始。BentoBox幫助全球 8,000 多家餐廳打造更好的網路形象並與食客建立更好的關係。借助 BentoBox 的端到端平台，從設計到分析和行銷工具，餐廳可以將其網站流量增加高達 70%，轉換率提高 7 倍。
餐廳可以將自己的圖像上傳到使用 Django Web 框架建立的 BentoBox CMS。當然，高解析度的專業照片和手機拍攝的 DIY 照片之間的影像品質差異很大。無論不同客戶擁有不同的設計資源，BentoBox 團隊都會建立其技術堆疊，為所有客戶產生最佳的網站。
挑戰
BentoBox 注重客戶的網路形象，這意味著 SEO 對於用戶提升品牌和增加收入至關重要。頁面載入速度是 SEO 排名的主要因素。無論是在寬螢幕還是行動裝置上查看，影像還需要保持其品質並具有響應能力。
BentoBox先前的解決方案提供了令人滿意的視覺品質。但圖像檔案的大小並沒有達到應有的程度，而且它們的快取命中率也很低。這些因素降低了頁面載入速度，危及 SEO 排名和網站整體效率。 「餐廳競爭非常激烈，我們必須為他們設計絕對性能最佳的網站，」- BentoBox 首席技術長 Pierre Drescher。
當影像出現在行動裝置上時，影像的尺寸或裁剪不是最佳的，這是一個問題，因為週五晚上 80% 到 90% 的網路流量都在智慧型手機上。此外，BentoBox 無法證明內部進行影像最佳化的營運開銷是合理的。對於開發人員來說，工作流程是繁瑣、乏味且重複的。團隊想要一個影像處理解決方案來調整大小、裁剪、壓縮和提供響應式影像，重點是影像保真度，而無需運行內部解決方案帶來額外的壓力和費用。
解決方案
“CDN 相當通用，但圖像優化是其專長，而 imgix 是專家。imgix 渲染 API 更加豐富，整個解決方案也更易於管理。”
— BentoBox 技術長 Pierre Drescher
使用 BentoBox 的基於 Django 的模板引擎實現 imgix 需要幾分鐘的時間。設計師可以為特定頁面選擇他們想要的圖像尺寸，而媒體庫可以讓他們輕鬆提取優化的圖像以用於其他用途，例如印刷廣告。
BentoBox 配置了imgix 渲染 API以應用自訂 URL 參數來進行許多 imgix 最佳化，其中最常用的包括：
- fit使影像適合目標尺寸。
- auto啟用每個裝置的自動影像最佳化。
- fm設定輸出格式，例如 WebP 和 JPEG。
- 用於自訂影像特徵（例如臉部）的居中位置。
- q在提供高 DPR 影像時啟用將輸出品質設為低於預設值。
借助 imgix，開發人員可以從一系列廣泛的參數中進行選擇來完善這些最佳化。例如，在Mon ertons.com上，<fit=max>將調整圖像大小以適合寬度和高度尺寸，而不會裁剪或扭曲圖像。
當 BentoBox 推出線上訂購功能時，imgix 讓他們快速整合縮圖，並立即作為回應圖像載入。
結果
提高頁面載入速度是提高 SEO 排名的最重要技術之一，這也是imgix為 BentoBox 客戶提供成果的地方。
BentoBox 透過使用影像調整大小、壓縮和延遲載入進行影像最佳化，使 Google PageSpeed Insights 統計資料提高了 25% 。
透過透過imgix CDN交付影像，BentoBox 客戶提高了快取命中率並消除了影像保真度錯誤，例如強制 SRGB-RGB 轉換。由於 CDN 完全脫離了託管環境，BentoBox 不再擔心擴充問題。
BentoBox 開發人員發現文件清晰且有用。他們使用imgix 沙盒向設計師展示 imgix 如何轉換和優化圖像，以便協作並確定最佳設計結果。