Ikyu.com 是日本領先的旅遊網站,每月處理超過 60 億次圖像請求。認識到需要響應式渲染影像,團隊決定用 imgix 取代 AWS Lambda 和 ImageMagick。因此,該團隊能夠針對每個瀏覽器優化圖像,為每個頁面提供完美尺寸的高品質圖像,並減少與圖像處理相關的營運開銷。
客戶
一休.com,是一個日本旅遊和酒店平台,以其豐富的豪華酒店、餐廳和日式旅館(傳統旅館)而聞名。 Ikyu 成立於 1998 年,部分透過創造內容豐富且具有視覺吸引力的網路體驗來發展忠實的客戶群。此外,Ikyu 透過為Yahoo!提供圖像內容來擴展其旅遊服務。旅遊日本。
隨著日本重新開放國內和國際旅遊業,許多預訂網站都在爭奪市場份額,導致競爭激烈。在眾多因素中,影像在客戶的選擇中起著至關重要的作用。
「無論是住宿設施還是餐廳,對於顧客來說,能夠想像他們在訪問時會獲得什麼樣的體驗非常重要。能夠透過圖像具體地進行視覺化是一個關鍵要素。當顧客在預訂上花費大量費用時,他們選擇看起來最好的東西是很自然的。
- 來自 Ikyu 的 Yamaguchi- San
挑戰
Ikyu 團隊很早就認識到針對不同瀏覽器優化圖像、為每個頁面提供完美尺寸的高品質圖像以及減少與圖像處理相關的營運開銷的重要性。
2017 年之前,ikyu.com 使用 AWS Lambda 和 ImageMagick 進行影像優化。團隊無法進行精確的大小調整以適應頁面、裝置或頻寬環境。
“ImageMagick 和 Lambda 只能將圖像轉換為四種尺寸。我們不得不犧牲我們的 Web 適應性。此外,我們無法訪問 WebP 等性能更好的圖像格式。”
- 來自 Ikyu 的 Yamaguchi- San
解決方案
2017年,Ikyu決定轉投imgix。從那時起,該團隊在多個屬性中部署了圖像渲染 API ,包括ikyu.com、restaurant.ikyu.com等。他們的網站是用 PHP 建立的,使用 imgix 的PHP SDK。
Ikyu 使用 imgix 的創意方式之一是創建餐廳圖像拼貼。 Ikyu 透過將餐廳內部圖像與菜餚特寫照片並置,在其預訂頁面上提供了誘人且一致的視覺體驗。為了實現這一點,Ikyu 利用blend-mode=normal和水印參數。您可以在此處連結的沙箱範例中看到我們如何複製該技術。
- auto=format會自動將影像轉換為效能較好的格式。對於接受 AVIF 的瀏覽器,影像將以 AVIF 格式提供,在許多情況下,與 JPEG 相比,可減少 60% 的影像重量,而且不會改變視覺體驗。
- auto=compress應用盡力壓縮來減少影像的大小。對於不同的影像,處理演算法可能會有所不同,以產生最佳結果。
- lossless=0應用有損壓縮,與無損壓縮相比,它會減少更多的圖片大小,從而提高網頁的響應能力。
結果
自從實施 imgix 以來,Ikyu 將其平均回應時間縮短至僅 16 毫秒,同時每月處理超過 60 億個影像請求。此外,團隊還發現Google 的 PageSpeed Insights提高了 15 個百分點。
「imgix 是一種非常有效的圖像優化和交付解決方案。透過簡單的查詢設置,您就可以以適當的格式高效地交付圖像。擁有能夠用日語流利交流的客戶經理和銷售工程師是一個巨大的好處。
- 來自 Ikyu 的 Yamaguchi- San


