Nikkei.com, one of the world's largest financial news websites, serves up over 5 million images per month. To successfully compete, they needed an image processing solution that would deliver high-quality images, enable fast image loading, and provide accurate face cropping. imgix Rendering API simplified their entire image-handling workflow and delivered:
iOS File Size Reductions
Chrome Browser Size Reductions
Faster Load Times Achieved
The Customer
Founded in 1876, Japan’s Nikkei is the world’s largest financial news service. Nikkei, Inc., is also the parent company of the UK-based Financial Times, as well as the publisher of the Nikkei 225 index, which is tied to the Tokyo Stock Exchange. Nikkei provides over 900 stories a day to almost four-million registered users. Among them, over half-a-million are paying subscribers who access the company’s services through Android, iOS, and desktop operating systems. Nikkei’s stories aren’t just about numbers—they offer readers compelling content on a wide array of topics, and Nikkei servers deliver over 5 million images per month.
The Challenge
“To compete in the online news industry, we have to provide high-quality images that load almost instantly,” says Nikkei’s Digital Strategy and Planning Manager Takayasu-San. The challenge facing content providers like Nikkei is that readers view these images on smartphones, large monitors, and tablets, and all these devices have different screen resolutions and page renderings. They used Fastly and CloudFront CDNs, but adequate availability was a consistent issue. “We need to optimize the customer experience with customized images for each reader’s device.”
Cropping based on accurate face detection and other relevant points of interest are huge challenges. For example, an image of a politician giving a speech can include extra background imagery such as the stage or the podium. Or, a politician’s flag, a vital element. Poor cropping can take all the meaning out of a great photo, and having the ability to crop with different parameters is a huge advantage.
“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. imgix clearly did the best work.”
— Takayasu-San, Digital Strategy and Planning Manager
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:
This technique cues off the device-pixel ratio (DPR) parameter to optimize image quality for different devices. This is especially important for presenting as clear an image as possible with Nikkei’s news photos and financial charts. Below are some of the transformation parameters that Nikkei made extensive use of.
The Results
In addition to simplifying their entire image-handling workflow, imgix reduced image file sizes and load times considerably. iOS saw reductions of up to 37.7% in file sizes while Chrome browser sizes fell up to 24.7%. Load times dropped an average of 1.1 seconds across the board.
“Since we started using imgix, we’ve been able to deliver richer images with lower latency. This means greater customer satisfaction regardless of the user device,” says Takayasu-San. Since the original implementation, Nikkei has been exploring the rich imgix feature set to find even more ways to improve the user experience. Takayasu-San adds, “We had high expectations for imgix initially, and after seeing their magic at work, they now have our full confidence.”
