A SMART PLATFORM FOR ACCELERATED DELIVERY OF THE VISUAL WEB BY PARVEZ AHAMMAD

According to HTTPArchive the average web page has recently passed the 2 MB threshold in terms of size, nearly doubling in the last three years. Of that 2 MB, the majority of the content is images. Over 1.8B photos are uploaded every day to the Internet to sites such as Flickr, Instagram, and Facebook, according to Mary Meeker’s 2014 Internet Trends report. HTTPArchiveMary Meeker’s 2014 Internet Trends report

Focusing on how to improve the delivery of images for image-heavy sites is a great way to improve the quality of experience for users, reducing both the network footprint and reducing the time needed before a user can begin interacting with the application. Generally image transcoding services trade off image file size by reducing the quality of images in a static way across all images – for example setting all JPEGs to a quality setting of 75 or all WebP images to quality setting of 90. Unfortunately there isn’t a "one size fits all"’ rule when it comes to image quality; some images may look fine at a quality rating of 45, while others need a quality rating of 90 to have no perceptual loss of image quality. Taking the time to find the appropriate individual quality settings for the billions of photos daily would take a small army of people a lifetime. It is impossible to perform per-image quality adjustments without the use of a smart machine learning algorithms to automate the entire flow. One more critical issue to consider in modern web usage is the device and browser diversity. Let’s say you use a 27” Windows 8 system and a Nexus tablet at home, a MacBook Air at work, and a smartphone on the go. You may consume the content through very different browsers such as Chrome or Firefox or Internet Explorer. Creating applications and images that look good and load quickly across an ever-changing sea of platforms and browsers can seem like a never-ending battle. Given the wide variety of devices and browsers, web application delivery platforms that enable image optimizations need to be flexible and adapt to the various end-user conditions. At Instart Logic, we have built an data-driven algorithmic platform that addresses these challenges at scale. Check out our recently published technical publication from the IEEE International Conference on Multimedia and Expo (ICME 2015): “A Flexible Platform for QoE-Driven Delivery of Image-Rich Web Applications” for a more in-depth discussion.IEEE International Conference on Multimedia and Expo (ICME 2015)A Flexible Platform for QoE-Driven Delivery of Image-Rich Web Applications

CLOUD-AND CLIENT-BASED ARCHITECTURE In order to serve the properly optimized image, an understanding of content is necessary. Combining Instart Logic’s cloud architecture with the NanoVisor on the client side, images can be rapidly optimized individually. The cloud architecture launches optimization processes off line and will send the original image from cache until the optimized version is ready. Why can’t the optimized images be delivered right from the start? Determining how to parse and optimize an image for optimal visual perception of quality cannot be done manually or at line speed; this requires a combination of machine learning algorithms plus some additional analysis.NanoVisor When an image is first received it is compared to a large body of images for categorization. This step groups images with similar quality degradation behavior. Once categorized, a representative image from each group is selected to determine the optimization settings. The optimization settings are then stored to the cloud for future real-time use. The trick is in reducing the manual workload to the bare minimum such that only 5-10 decisions are necessary to optimize millions of images. The NanoVisor provides an added layer of intelligence on the client side by managing the requests issued by the browser and reordering them if necessary. Based on information gathered from the application the NanoVisor may: issue a request sooner if it knows the content is a critical item for the page delay the request of a large object or non-critical item to minimize delays on other resources break the request into multiple pieces

TRANSCODING AND STREAMING The NanoVisor, combined with the machine learning algorithms, ensures that the browser first downloads the items that are immediately needed for an optimal quality of experience. SmartVisionSmartVision optimizations can be applied whether or not the client’s platform supports the NanoVisor (JavaScript support is required). For more in-depth discussion on the SmartVision algorithm, please follow the hyperlink to an older technical blog post on the topic. For clients with the NanoVisor, images are delivered via a content-aware image streaming approach. This approach first downloads a part of every image to enable the user to start consuming data faster, and in the next round the remainder of the image is downloaded.please follow the hyperlink to an older technical blog post on the topic For clients without the NanoVisor, SmartVision image transcoding is applied. Transcoding can be applied to any lossy image format to reduce the size without sacrificing quality. The image categorization mechanism enables fine tuning and improvements as more images are delivered via the system. RESULTS The performance of both image transcoding and image streaming was tested against several image-rich websites from Internet Retailers 2014 top 500 list. An image-rich website was defined as a webpage that has at least 50% weight of the overall web page content contributed by images alone.Internet Retailers 2014 top 500 list

Median content reduction at the onLoad event by applying content-aware image transcoding optimization was 749 KB for cable access mode in our experiments. While the gains vary from one website to another (depending on the fraction of image content they have and other factors), we found 17.83% median improvement in Time to OnLoad metric for cable connections and much larger gains for 3G wireless connections for Image Transcoding. The scatter plots below show the results of applying SmartVision-based image transcoding to image-rich IR500 websites.

Median content reduction at onLoad event by applying content-aware image streaming optimization was 831 KB for cable access mode and 892 KB for 3G wireless access mode. Median improvement in time to onLoad event by applying content- aware image streaming optimization was 16.8% for cable access mode and 21.7% for 3G wireless access mode. In summary, we built a flexible web delivery platform with cloud-client architecture that enables content-aware image optimizations to maximize end-user Quality of Experience. Our system works on web scale, enabling us to deliver nearly 50 billion optimized images per month (based on recent statistics) to end users, and is adaptable to variations in network congestion, device heterogeneity, browser types etc. without sacrificing the end-user quality of experience. Check out our ICME-2015 paper for more details or leave a comment if you have any questions or feedback. ICME-2015 paper Know more from our Blog