ScientiaMobile, a company specializing in mobile device intelligence and image optimization, has its own “smart image CDN”, ImageEngine. They originally launched the CDN back in 2015 as ImageEngine, and claim that the dynamic optimization it offers can yield up to 84% in payload improvement, a result much higher than the standard three image approach of responsive images.
The Context for Mobile and Image Slow Down of Web Page Loading
According to Statista, worldwide mobile e-commerce is expected to reach $669 billion by 2018. Statista also says that over half of site visitors will abandon a site if a page takes over 3 seconds to load. If page loading time can be improved by just one second, it can increase mobile conversions by up to 20%.
At the Chrome Dev Summit earlier this year in a speech focused on site optimization, Google focused on images as the greatest barrier to faster web page loading times. The four keys to faster images, as articulated by Google are:
- Appropriate file format
- Appropriate compression
- Appropriate size for display size and density
- Lazy loading
Earlier this year, Google launched the Google Speed Update for all users, thereby incorporating the new Speed Update algorithm in mobile search results as a search ranking factor. Google is actively lowering search ranking for slow mobile sites in the same way it has done previously for desktop searches. The Speed Update only affects pages that deliver the slowest experiences to users.
Mobile images are notoriously difficult for developers to optimize correctly, hence why it is a task that benefits from automation.
ImageEngine
One of the key ways to improve performance and lower latency on eCommerce sites is to optimize the image payload. An image CDN such as ImageEngine automatically optimizes file sizes to each individual device model while maintaining superior image quality across all devices.
Fundamentally, ImageEngine recognizes mobile devices, resizes a master image automatically and caches all images so that they will be delivered at the right size for the right device. ImageEngine is able to handle the responsive resizing of images and shrink more than twenty lines of picture markup to just one line. Through retrofitting existing img tags and utilizing Client Hints, it streamlines code and accelerates web pages.
The service uses various factors to determine the right image size, including visual quality, the user experience while browsing the web or using an app, the speed it takes to deliver the image to the end user, the right size and resolution, and in the right image format for the end user’s browsing content. The goal is to deliver the image with the best visual quality and the smallest possibly byte size.
ImageEngine started as a free image optimization service at wurfl.io Its unique feature continues to be its WURFL device detection, which provides data about the screen size, file format support, and device pixel ratio for every device that requests an image. As a result of WURFL device detection, ImageEngine feeds in accurate inputs and settings into the image manipulation process.
The key technique for maintaining image quality involves monitoring the Structural Similarity Index Method (SSIM) of images, which provides a score based on how well the pixel structure of two images relate to one another. The bigger the difference in pixel structure across the two images, the larger the visual quality difference will be. Images can vary widely from being used as portraits, product images, nature, banner ads etc.
ImageEngine analyzes image quality using the DSSIM tool, which was developed by Kornel Lesinski. It uses a scoring scale for image quality beginning at zero, which equals a perfect score (where the pixel structure is identical) and reaches as high as 1 (in which similarity is low and image quality is poor). The DSSIM tool provides a score, which is coupled with the human eye and user testing to determine image quality. 0.00583 is “a sufficient threshold” on most devices; although of course no absolute threshold can be set for all images on all devices. ImageEngine uses the WURFL device detection solution to determine its device-specific thresholds for quality and image compression size. It will vary the DSSIM threshold based on the variables of the original image and the requesting device’s specific capabilities e.g. it will deliver a higher quality image (with a lower DSSIM score) to a larger screened device that has a high-density pixel ratio.
ImageEngine then calls on inputs from WURFL device detection to provide its image optimization engine with device-specific thresholds so it can tailor images to each device model. The company prides itself on identifying “the optimal procedure” to optimize an image and ensure “there is no decay in visual quality”. There are a number of complicating factors in doing this, detailed here..
Client Hints
ImageEngine supports Client Hints. This allows it to offer “surgical precision” even on sites using responsive images on desktop browsers. Client Hints is an initiative spearheaded by Google that has been available in the Chrome and Opera browsers since 2016. It helps reduce image size and the verbosity of the responsive images markup. Client Hints has been adopted by the HTTP Working Group.
It works by letting you append the current setting to the HTTP request, letting the web server pick the right fit. This type of content negotiation is a far quicker means of responsive image optimization than its predecessor (example here). The automated process sees the decoupling of the markup from the image, making it simpler to perform operations on the image without needing to overly worry about the markup.
ImageEngine’s Network
ImageEngine has a network of PoPs based around the world. It promises that its “scalable next-generation server architecture pushes device detection and image resizing logic to the network’s edge”.
ImageEngine partners with other CDNs, telcos, and enterprises who want to add image optimization to their service portfolios. ImageEngine’s modular and scalable architecture based on open-edge computing makes it possible for network operators to easily add image CDN services. These operators and enterprises can integrate ImageEngine’s device-aware edge-server technology around the globe.
Case Studies
ScientiaMobile list various case studies on their website, including two for Furnspace and Mount Vernon.
Furnspace
Furnspace is an Indian furniture and home décor accessories vendor that is exclusively online. Its goal is to “bring its customer the best quality, hand-picked products from across the globe and translate this quality through the images on their website”. Images are obviously key to the success of Furnspace. Its wide product selection needs to be represented via high-quality images that is not too slow because of the image quality and indeed is able to speed up user experience for mobile customers. The company was experiencing a high bounce rate and also had a mainly desktop purchasing audience. It wanted to reach customers using their mobile phones as well, as many Indian customers use their smartphones to make purchases.
When Furnspace was looking into different vendors to work with, including ScientiaMobile, it ran a series of trials and found that a mobile shopper buying their products normally downloaded a 4MB page, most of which were images. On mobile devices, the images tended to be heavier than necessary. Furnspace needed to reduce its image payload so that pages would load faster on mobile.
“Our average page weight went from 4MB to 400kb after implementing ImageEngine by ScientiaMobile. We realized that if our site loaded slowly for mobile users, then we were losing half of our potential customers. By implementing ImageEngine, we slashed loading time, generated a huge uptick in mobile visitors, and now have 50% of our visitors coming from mobile. Best of all, we have seen a 100% increase in conversions and a 20% decrease in bounces since we deployed ImageEngine.” Praveen Kumar, Chief Technology Officer, of Furnspace
Mount Vernon
The Mount Vernon web platform is the online presence of George Washington’s country home just south of Washington D.C. in Virginia. In 2017, the platform saw 8.6 million guests travel through its platform, which provides “high-quality educational content on George Washington and the founding era”. The goal is to ensure that its content stays towards the top of search engines and stays relevant to those seeking information. Similar to Furnspace, mobile traffic is a growing goal for Mount Vernon. Mobile visitors grew 12-32$ from 2016-2017. Previously, the company relied on an in-house solution to crop each image manually for the different mobile devices visiting the site, but wasn’t finding this a sustainable longterm solution so called upon ImageEngine. ImageEngine automated the image compression process to “deliver the most lightweight and efficient browsing experience ”at a reasonable cost as “they only paid for image payload that was optimized”.
“Engagement on our site is extremely high now. Our average consumption time on a virtual tour session is 20 minutes. Our total engagement hours were 340,000 hours, that’s an increase of 33% from the previous year and I think a large part of this is because of ImageEngine’s improvement in mobile optimization.” Matthew Briney, Vice President of New Media, of George Washington’s Mount Vernon
About ScientiaMobile
ScientiaMobile was launched in 2011 with the goal of commercializing WURFL, the industry’s “most advanced device detection solution”. ScientiaMobile has some of the largest customers in the industry, including Google, Facebook, and Amazon; and its device detection drives over 83% of the Internet’s device analytics. ScientiaMobile has won the Red Herring Top 100 Global and Inc 5000 awards. CEO and Founder, Krishna Guda, previously worked at FusionOne, BridgePort Networks, Openwave and Oracle in a range of leadership roles in business development, engineering and product management.
Conclusion
The ImageEngine stats are impressive, promising:
- 30% faster page load (via optimizing images)
- 80% smaller image payload (while maintaining visual quality)
- 98% cache hit rate (advanced caching on CDN edge servers helps further boost performance)
The smartCDN doesn’t just offer an image optimization service to boost page speed, but also support for customer SSL certificates, HTTP2 and a cache-purging API.
In terms of image optimization, the company claims that there are no other solutions on the market that “effectively leverage device detection”. The WURFL device detection service is built into the ImageEngineCDN and automatically enables image optimization tied to the size of the device and its capabilities. Depending on the various variables (browser, OS size and device capabilities), the image may be resized, compressed and/or converted in a series of different ways. ImageEngine specializes in mobile optimization.
Pricing is set at three different tiers: basic, standard and custom, each one offering a different number of optimize gigabytes transferred, or “image smart bytes”.
ImageEngine’s model of pricing is part of its efforts to disrupt the traditional CDN business model, which charges companies based on per byte delivered (i.e. the more you send, the more you have to pay). As ImageEngine describes it, this means that legacy CDNs are not interested in smartening payloads. By contrast, ImageEngine charges for SmartBytes only. Its business model as it describes it is “based on improved performance, reduced payload, and cost savings”. If more CDNs begin to charge in a similar way, ImageEngine’s model could truly disrupt the traditional CDN pricing model.