Download the full report here: http://www.radware.com/social/neurostrata-fall2014/ Everyone has strong opinions about progressive images, but there’s little to no hard evidence that proves whether progressive image rendering helps or hurts the user experience. It’s time to end the data-free analysis so we can all get on with our lives. Some factions believe that by loading images progressively, we improve perceived performance by showing the user something while they look at the screen. Others believe that watching an image load progressively increases user frustration. We took these assumptions to the lab to see if we could definitively answer the question: do progressive images deliver a better or worse user experience? Using a proven neuroscientific approach that we pioneered in a previous study, we served test participants with multiple versions of a set of pages for an ecommerce workflow. Each set of pages rendered images differently: -Baseline images, normal speed -Baseline images, throttled speed -Progressive images, normal speed -Progressive images, throttled speed Using automated facial coding technology that measures moment-by-moment emotional responses in facial micro-expressions, we extracted data about users’ perception of these experiences. Using Implicit Priming Testing, we also extracted measures of frustration and emotional engagement from the experiences. Using this data, we were able to answer questions such as: --Is there a correlation between image type/quality and the perceived user experience? --Does image quality matter more on some pages than on others (e.g. home page vs product page)? --What is the bottom-line threshold for user tolerance of slow images? --At what point does superior image quality cease to offer additional benefit to the user experience? --Using anecdotal feedback from participants’ exit interviews, are people conscious of differences in image speed/rendering? The results of this study have huge ramifications: ---Ending the highly subjective data-free debate over whether progressive images help or hurt the user experience. ---Potentially saving tons of developer time in manually optimizing images. ---Feature development in automated front-end optimization tools — like ours! (Disclosure: Progressive image rendering is a feature we offer in our own solutions, so this research was a nail biter for us. In the past, we’ve drunk the progressive JPEG Kool-aid, but we’re ready to abandon or modify this feature if it means delivering the best possible user experience to our customers’ users.) ---Ultimately serving the best — and fastest — experience to users.

1. Progressive JPEGs Good? Evil?
Tammy Everts @tameverts
Kent Alstad @kentalstad
Velocity Europe 2014

2. Slide 2
HTTP Archive, November 2014

3. Progressive JPEGs FTW!

4. Slide 4
Stoyan Stefanov, The Book of Speed

5. Slide 5
Stoyan Stefanov, The Book of Speed

6. Slide 6
“Images of file size 10K and over have a better chance of being smaller when using the progressive JPEG format. The difference could be up to 10% (with 3% median) but in extreme cases that translated to 250K of savings.”
Stoyan Stefanov, The Book of Speed

7. Progressive optimized images =
Median Speed Index improvement of 7% on Cable and 15% on DSL
Slide 7
Patrick Meenan, Progressive JPEGs FTW

8. Perceived speed is more important that actual speed.
Therefore appearing faster is better.
It’s only logical, right?
Slide 8

9. Slide 9
Only 5-7% of sites use Progressive JPEGs

10. Test 1: Facial Action Coding

11. Slide 11

12. Slide 12
Original Standard image (GIF, JPEG, PNG)
PerfectImage (PI) Lossy compressed WebP image that is degraded until the SSIM (Structural SIMilarity) index is 0.985 compared to the original
Progressive JPEG (PJ) Image is downloaded in lower resolution, displayed, then ‘progressively’ downloaded and redisplayed until the full resolution is shown

13. Slide 13

14. Slide 14

15. Slide 15

16. •280 respondents (50% male, 50% female) recruited online
•9 videos tested: 3 websites X 3 image-loading methods
•Pages were constructed to appear real/natural, but also to evoke the Happiness microexpression
•Tests were performed remotely, using webcam-enabled computers
•Each respondent saw a randomly ordered batch of the three sites
•All Facial Coding results = % of people exhibiting Happiness microexpression (% figures may appear low overall, but this is normal for the method). 2%-3% = threshold of statistical significance
•Heart-rate results = the changes in rate (line moving up = HR changing, moving down = returning to norm, straight-line = unchanging HR)
Slide 16

17. Slide 17

18. Results

19. Slide 19

20. Slide 20

21. Slide 21

22. Slide 22

23. Slide 23

24. Slide 24

25. Slide 25

26. Slide 26

27. Results summary
•Overall, highest levels of Emotion [Happiness] were evoked with PerfectImage (PI)
•Overall, PI was strongest for both genders
•PI tended to yield the highest peaks of intense Emotion [Happiness]
•Original either tied or outperformed Progressive JPEG across all sites
•Overall, reactions were stronger for women than men
Slide 27

28. Test 2: Implicit Response

29. Slide 29
We react faster to congruent stimuli than to incongruent stimuli.

30. •462 respondents (262 female, 198 male) recruited online
•2 different website videos X 3 different image rendering methods X 2 different task conditions (giving 12 different conditions in total)
•Each respondent experienced 2 videos (one for Amazon and one for Vodafone) with 1 image-loading method and 1 task type (a visual choice, or a text-based choice)
•In implicit testing, respondents can become faster at key pressing over time, so results are statistically filtered to adjust for this (by comparing results with a control brand, for which respondents didn’t see a webpage)
•Result units represent a “connection index”: the higher the index score, the greater the connection between the word attribute and the website experience
Slide 30

31. Slide 31

32. Slide 32

33. Slide 33
Pre-test
•Both brands were measured against 24 attributes.
Test
•Participants then viewed video of each site containing one randomly selected image format, and following one of two task conditions (text- based or visual).
•Each brand was measured again against the same 24 attributes.
•Difference between pre-test and test results indicates effect of image format on brand perception.

34. Results

35. Slide 35

36. Slide 36

37. Slide 37

38. When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps into sharp focus, cognitive fluency is inhibited and the brain has to work slightly harder to make sense of what is being displayed.
Dr. David Lewis, Chair, Mindlab International
Slide 38
“
”

39. Results Summary
•Overall, strongest positive association with PerfectImage (PI)
•For visual tasks, Original was almost as good as PI.
•For text tasks, PI was the only method that evoked overall positive association.
•Overall, progressive JPEG (PJ) scored particularly low among men.
•For visual tasks, all methods were about equal for women.
Slide 39

40. http://www.radware.com/neurostrata-fall2014/
Slide 40

41. http://www.webperformancetoday.com/2014/09/17/ progressive-image-rendering-good-evil/
Slide 41

42. How does this affect performance?

43. Questions?
@tameverts
@kentalstad
Office Hour – Monday @ 14:30