Do Your Images Need To Go On A Crash Diet?

1
DO YOUR IMAGES NEED TO GO ON A CRASH DIET?
2
In a previous post, we talked about the leading
indicators of a fatter website, with images being
on the top of the list. When it comes down to
slimming down a website, there isnt a singular
solution, due to the wide variety of elements on
a page there's static and dynamic content,
images, JavaScript, HTML... the list goes on.
Each element plays a part in the sites overall
performance and adds weight, affecting page load
times to different degrees.
While a content delivery network would give you
the optimization improvements you need across the
board, there are ways you can start small. Taking
one element and focusing on a solution to
optimize its delivery would be a quick fix.  
As you can see, images account for a great deal
roughly 63 of an average webpages total size
(HTTP Archive), making it the top contributor to
the continuing web obesity epidemic. If it came
down to picking just one aspect of the site to
optimize in order to reap the most benefit in
drastically reducing page load times, option one
would be images. In essence, you can think of
image optimization as a crash diet for your site.
3
WHATS THE PROBLEM?
The problem with images is threefold they take
over a majority of the webpages content, at
times they are not properly sized, or theres an
issue of flabby compression. Due to varying
output formats, compression levels, and quality
levels for different images, image delivery for
web and native applications has historically
required a great deal of effort, as a different
configuration is needed for each individual
image. Because of the effort required, many
people opt to set a single quality level for each
image, which often results in a much higher level
than what is actually necessary for many images.
This negatively impacts performance, as the user
ends up downloading more data than is necessary.
It also degrades the quality of the image by
choosing a one-size-fits-all compression level.
Start shedding the pounds on your webpage by
honing in on the problem at hand cutting out
these unnecessary calories.
4
HOW CAN YOU SOLVE IT?
Just as there are many popular crash diets, there
are multiple ways to optimize images. There is
image adaptation (resizing, cropping, etc.)
and image transcoding, for example, which allow
you to slim down your site without compromising
image quality. Both image transcoding and
adaptation apply machine-learning techniques,
powered by Instart Logics SmartVision
technology, to automate the image optimization
process. The service is able to make intelligent
decisions with every image that passes through
the image compute model, see what patterns exist
in the image, and then make quick decisions. This
is what allows Instart Logic to analyze roughly
50 billion images on a monthly basis (manually,
it takes about 5 seconds to optimize an
individual image). By first bucketing the images
into a group and taking predefined parameters
within the group, the service then takes these
predefined parameters and applies the necessary
optimizations. Image resizing involves pulling
the original high-resolution image from the
backend web servers and then resizing or cropping
the images on-the-fly. Image transcoding requires
understanding the unique characteristics and
visual content for each individual image, and
then learning and automating the process of
determining the best image compression, format
and quality levels for each image in respect to
its distinct attributes. Image adaptation
involves determining the threshold for a user to
recognize an image on any device without
perceiving a degradation in image quality. Being
able to determine this threshold allows web
applications to significantly cut down on image
data sent to the browser. Start render time is
drastically reduced as initial paint occurs
almost instantaneously, and the remaining image
data continues to stream in the background.
5
The key here is perceived performance. Take a
look at the following play-by-play page load of
two webpages. Which site looks like it loads
faster?
Though both sites have the exact same load time,
the first webpage is perceived to load faster,
and thats also what your users will think.
Putting your site on a crash diet with image
optimization will do the trick. As the extra
calories are immediately shed by some form of
image optimization, your site instantaneously
reflects the results with a faster start render
time, giving the impression that its loading
faster. Perceived performance is like wearing
black if your users think your page is fast,
its fast!
6
For an e-commerce site like Naked Wardrobe, the
crash diet makes all the difference. Instart
Logics SmartVision technology shaved down
their page load time by 50, and the magic behind
the boost is image transcoding. By taking images
that were once 1 MB and over, and deciding the
best compression, format and quality level for
these images and slimming them down to 200 KB,
overall performance has drastically improved and
continues to do so.
THE DOWNSIDE
An unfortunate downside to crash diets is that
you generally tend to gain all the weight back
after the diet is over the same can be said for
image optimization. If you are only optimizing
your images, you will gain all the weight back as
soon as new images are added to the site, as they
have to be optimized as well. Using a service
that automates this ensures that your application
stays svelte.  
7
Instart Logic makes application delivery fast,
secure, and easy.
Instart Logic provides the first cloud
application delivery service in the world to
extend beyond the limited backend-only cloud
architectures of the past with an innovative,
intelligent end-to-end platform delivered as a
service.Our end-to-end platform combines
machine learning for performance and security
with a CDN for delivery. Designed for DevOps and
mobile-first applications.
Discover how it can work for your
website/application.
Request a Demo