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
iOS saw reductions of up to 38% in file sizes.
Chrome Browser Size Reductions
Chrome browser sizes fell up to 25%.
Faster Load Times Achieved
Load times dropped an average of 1.1 seconds across the board.
Founded in 1876, Japan’s Nikkei is the world’s largest financial news service. Nikkei is part of Nikkei, Inc., the parent company of the UK-based Financial Times and publisher of the Nikkei 225 stock market index for the Tokyo Stock Exchange. Nikkei delivers over 900 stories a day to almost four-million registered users and over half-a-million paid users via Android, iOS, and desktop operating systems.
“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,” says Takayasu-San. “imgix clearly did the best work.
— Digital Strategy and Planning Manager 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.
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.
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.
- s prevents alterations of an image URL.
- auto enables automatic image optimization per device.
- fit makes an image fit the target size.
- h sets an image height.
- crop enables diverse cropping options.
- fm sets an output format such as WebP and JPEG.
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.”
imgix is a real-time image processing service and CDN. Thousands of companies around the world use imgix to deliver the best images at the perfect sizes to their customers.