Playing with SmartVision - Intelligent Image Optimization

1
PLAYING WITH SMARTVISION - INTELLIGENT IMAGE
OPTIMIZATION
BY BRIANA LASSIG
2
(No Transcript)
3
USING SMARTVISION TO OPTIMIZE IMAGE QUALITY AND
PERFORMANCE
With todays explosion of mobile devices and
their many associated screen sizes, web
publishers have a harder job balancing image
quality with performance. The goal is always to
find the sweet spot between high image quality
and fast performance without degrading user
experiences. Analyzing an individual image and
choosing an appropriate quality level is how you
can achieve this balance. However, doing this for
hundreds of thousands of images across multiple
sizes for different devices can quickly become
impractical. Heres the good news Instart
Logics SmartVision technology uses computer
vision to intelligently determine the ideal
compression level for images, for every image on
your site, processed in the cloud. This
technology intelligently reduces the size of
images without affecting quality, thereby
delivering crisp, device-optimized images faster
and allowing users to interact with the web page
almost immediately. Lets poke around with a few
elements on the Playground and see how the
SmartVision technology works.
4
THE IMPACT OF IMAGE COMPRESSION DIFFERS FOR
DIFFERENT IMAGES
To understand the SmartVision technology better,
lets focus on two example images in the
Playground library the first image survives an
aggressive compression level, the second does
not. Lets start with the former. The image of
the cruise ship below is delineated into two
segments. On the left is the original high-def
image. On the right panel of the image, youll
see how compression affects the quality at the
various levels on the scale. Take a look at this
image at 10, 35, and 90 image quality. Notice
that as you compress the file at different
quality levels, the file sizes and the download
time are affected.
5
(No Transcript)
6
After compressing the file to 90 quality, it
looks the same as the original the naked eye
cannot tell the difference. As you decrease the
image quality to 10, however, the image looks
very different from the original. At 10 image
quality, the clouds in the image are pixelated
and the quality is severely degraded. It looks
more like youre playing Minecraft rather than
gazing at a pillowy cloud! While you can set a
safe compression level for all of the images on
your site, you might not be optimizing for
performance across all your images. SmartVision
solves that challenge, and balances the image
compression, quality and performance
automatically. Use the SmartVision button to see
how our computer vision algorithms set the
quality level.
COMPRESSED AREAS IN WHITE. DIFF 40.1255
7
The above image (also on the Playground) is a
diff tool, included to illustrate which pixels
are most affected by the modification of the
image quality setting. It shows you which areas
are most impacted through white dots. In the case
of the image above, the highest density of white
dots is where the water meets the ship, so pay
particular attention to these areas when applying
changes.
As you play around with the various image quality
levels, notice how the estimated download time in
milliseconds changes for various device types and
connections. Finding the ideal image quality
level that reduces file size and offers fastest
performance, but still maintains the images
fidelity is critical. 
8
(No Transcript)
9
Take a look at another image to see how
SmartVision intelligently assesses the file and
compresses it at a different quality level than
the previous image. Do you notice how the shine
on the shoe is more dull at a lower quality
level? Or how the chain on the purse appears
shinier as you improve quality? SmartVision would
serve your image at 50 quality, compressing the
image file to 29.34 KB from 943 KB, all while
shaving milliseconds off your image download
time. As you can tell, the image of the shoes
and purse compresses at a much different level
than that of the cruise ship. Considering all of
the elements that you can toy with on the
Playground, try to see if you can find the sweet
spot on the image solely with your eyes, and then
click the used button to turn SmartVision on to
see how you match up.
TRY IT OUT FOR YOURSELF!
Users and consumers take the old adage a picture
tells a thousand words to heart. They demand
high resolution images and expect high
performance. Instart Logic image scientists have
invented advanced image processing algorithms
based on the latest computer vision research that
can actually gain a unique and detailed
understanding of each image. Tinker around with
more images on our Playground to see how
SmartVision can dramatically accelerate web
performance and provide an enriched user
experience.
10
Visit our Blog to learn more