Nikkei.com是世界上最大的財經新聞網站之一，每月提供超過 500 萬張圖片。為了成功競爭，他們需要一個能夠提供高品質圖像、實現快速圖像加載並提供準確面部裁剪的圖像處理解決方案。 imgix渲染 API簡化了整個影像處理工作流程並交付：
iOS 檔案大小減小
Chrome 瀏覽器尺寸縮小
實現更快的載入時間
客戶
日本日經指數成立於 1876 年，是全球最大的財經新聞服務機構。日經公司也是英國《金融時報》的母公司，也是與東京證券交易所掛鉤的日經 225 指數的發行商。 Nikkei 每天向近 400 萬名註冊用戶提供 900 多個故事。其中，超過 50 萬是透過 Android、iOS 和桌面作業系統存取該公司服務的付費用戶。 Nikkei 的故事不僅僅與數字有關，它們為讀者提供了涉及廣泛主題的引人入勝的內容，Nikkei 伺服器每月提供超過 500 萬張圖像。
挑戰
「為了在線上新聞產業中競爭，我們必須提供幾乎可以立即加載的高品質圖像，」日經新聞的數位策略和規劃經理 Takayasu-San 說。像《日經新聞》這樣的內容提供者面臨的挑戰是，讀者在智慧型手機、大型顯示器和平板電腦上查看這些圖像，而所有這些設備都有不同的螢幕解析度和頁面渲染。他們使用 Fastly 和 CloudFront CDN，但足夠的可用性是一個始終存在的問題。 “我們需要為每個讀者的設備定製圖像來優化客戶體驗。”
基於準確的人臉偵測和其他相關興趣點的裁剪是巨大的挑戰。例如，發表演講的政治家的圖像可以包括額外的背景圖像，例如舞台或講台。或者，政治家的旗幟，一個重要的元素。糟糕的裁剪可能會失去一張好照片的所有意義，而能夠使用不同的參數進行裁剪是一個巨大的優勢。
「我們的許多新聞圖片都包含頭像，因此為了評估不同的解決方案，我們認為最好的測試是看看不同的工具如何根據臉部區域裁剪同一張圖片。 imgix 顯然做得最好。
— Takayasu-San，數位策略與規劃經理
To minimize manual image resizing and cropping, the engineering team started out with an in-house image transformation solution. “It worked OK, but it just didn’t have the features or the robustness we needed,” said Takayasu-San. It also required a considerable amount of time and effort trying to code narrow, specialized functionality — instead of working on Nikkei-specific DevOps challenges.
They started comparing third-party tools to their own API to find a better way. Specifically, Nikkei needed an image-transformation solution that would:
- Deliver the highest-resolution images depending on each user’s device.
- Enable the fastest download speeds.
- Intelligently crop based on accurate face detection.
- Convert different file formats to WebP.
- Add credits or logos as overlays.
- Assign secure URLs.
- Set expiration dates based on licenses
The Solution
Nikkei decided to partner with imgix to solve their imaging transformation needs rather than invest more time and effort on their own solution. “Many of our news images include headshots, so to evaluate different solutions, we felt the best test was to see how different tools cropped the same picture based on its facial region,” says Takayasu-San. “imgix clearly did the best work.” Face-centered cropping identifies facial features and crops equally in all directions to fit a frame. However, imgix adds a number of refinements such as crop=focalpoint, which can center a face plus adjacent foreground context such as a fashionable dress or, for the politician, a flag in the background. It crops out less-defined backgrounds as needed.
Another imgix benefit was how easily it accessed Nikkei’s S3 bucket from their AWS Virtual Public Cloud (VPC). They had considered building this capability into their homegrown API but decided to focus their in-house talent on Nikkei.com capabilities instead.
Nikkei onboarded imgix by setting up a workflow where imgix sent transformed images through a Nikkei proxy (maintaining internal image cache control) to their S3 repository. They then set up their web and mobile apps with the imgix Rendering API and were ready for production. “The imgix SDK was simple and clear, so setting up the client side was fast,” according to Takayasu-San. The team authors its client-side mobile apps with Kotlin and Swift and uses JavaScript from imgix React libraries for browser code.
Thereafter, the team could simply add parameters to their image URLs to enhance, resize, and crop images, compress them and change formats for better performance, create complex compositions, and extract useful metadata. For example, imgix.js makes it much easier to use the srcset attribute. To call an image for a 400 pixel-wide frame with three different resolution possibilities, developers add the imgix w and dpr URL parameters:
結果
除了簡化整個影像處理工作流程之外，imgix 還大大減少了圖片檔案大小和載入時間。 iOS 的檔案大小減少了 37.7%，而 Chrome 瀏覽器的大小減少了 24.7%。載入時間平均全面下降 1.1 秒。
「自從我們開始使用 imgix 以來，我們已經能夠以更低的延遲提供更豐富的影像。這意味著無論用戶使用何種設備，客戶滿意度都會更高。自最初實施以來，Nikkei 一直在探索豐富的 imgix 功能集，以尋找更多改善使用者體驗的方法。 Takayasu-San 補充道：“我們最初對 imgix 抱有很高的期望，在看到他們的魔力後，我們現在對他們充滿信心。”
