1.
if you build websites, chances are you have a
strong opinion about what type of image format
delivers the best possible user experience. You
might believe that by loading images progressively,
you improve perceived performance by showing the
user something while they look at the screen. Or
you could believe that watching an image load
progressively increases user frustration.
We took these assumptions to the neuroscience lab to see if we could definitively
answer the question: which image format results in happier users?
Standard lossless image.
Using automated facial coding
technology that measures moment‘ Lossy image that is carefully degraded using
by-moment emotional responses in a DCIM (Digital Camera Images) human
. . . vision algorithm, resulting in a 5% loss in
famal m'Cr°'eXpreSS'0nS’ We extracted quality with a much smaller total file size.
data about 280 users’ perception of
these three different image formats as
Image is downloaded in lower resolution,
users performed online transactions displayed, then «progressively: downloaded
on a set of ecommerce sites; and redisplayed until the full resolution shown.
In a survey of our testers, more than half (51.4%) wait for most or all of
a page's images to load before they begin to interact with the page.
Straight away, as soon as I wait for most of the I wait until all the images Not sure
the text appears images to load have completely loaded
Two out of three people say that they have been frustrated by slow
image loading.
Yes No Only if it's really slow Not sure
Perfectlmage resulted in the highest average level of happiness overall.
0.12
0.10
0.08
0.06
0.04
0.02
0.00
0R| G|NAL PI PJ
Perfectlmage achieved the highest peak of happiness during the second-by-second traces
throughout each transaction. Progressive JPEGs have a strong peak during the initial phase
of the online experience, when pages are more likely to use large “hero images”, this
positive reaction drops off to a considerably lower level and then plunges towards the
middle and end of the transaction.
0R|0|NAL PI PJ
MALE
FEMALE
Women and men had significantly different responses to the three image rendering
methods. While both genders had similar overall preferences for Perfectlmage, the overall
traces and number/ intensity of happiness peaks amongst the men were more comparable
for the three methods.
WHICH IMAGE RENDERING
TECHN|0UE WAS THE WINNER?
Perfectlmage — the technique
that degraded image quality by
5% but rendered faster than
the Original format — emerged
as the clear winner overall.
TECHNIQUE ORIGINAL PERFECTIMAGE PROGRESSIVE JPEG
D I
D
Default image rendering formats rarely result in the best
possible user experience.
To make pages faster, site owners should take advantage
of every available image optimization technique.
There are a number of best practices for helping images render faster.
Consolidating images means fewer round
trips to and from the host server
l_ ‘I
LBJ
I U I D O I U I I O C O C I C I O 9 I C
Smaller files equal faster load times
IE:
0 I 9 O O I I 9 I O I I D I O C U D I 5
Make sure key images load first
instead of last
Images saved to the wrong format can
be several times too large
I21-+@
Delay loading "below the fold" images Anticipate the next page a visitor
is likely to visit, then load resources
2’. = j into the browser cache
it 1,: _ -
ii %
IEJIEIIEJ
O O O O D C D O C D C I I C D C I O C O O I I I C O C O C O O I I I I I
DOWNLOAD THE FREE REPORT
Progressive Image Rendering: Good or Evil?
http: //www. radware. coin/ neurostratafalI2014
00..
© 2014 Radware. Ltd. All rights reserved. I www. radware. com 0:0 l'adWal'e