A Smart Platform for Accelerated Delivery of the Visual Web

1
A SMART PLATFORM FOR ACCELERATED DELIVERY OF THE
VISUAL WEB
BY PARVEZ AHAMMAD
2
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 Meekers 2014
Internet Trends report. 
3
(No Transcript)
4
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 isnt
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. Lets 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.
5
CLOUD-AND CLIENT-BASED ARCHITECTURE

• In order to serve the properly optimized image,
  an understanding of content is necessary.
  Combining Instart Logics 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 cant
  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.
• 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

6
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.
TRANSCODING AND STREAMING
SmartVision optimizations can be applied whether
or not the clients 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. 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.
7
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.
8
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.
Know more from our Blog