Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Progressive JPEGs Good? Evil? 
Tammy Everts @tameverts 
Kent Alstad @kentalstad 
Velocity Europe 2014
Slide 2 
HTTP Archive, November 2014
Progressive JPEGs FTW!
Slide 4 
Stoyan Stefanov, The Book of Speed
Slide 5 
Stoyan Stefanov, The Book of Speed
Slide 6 
“Images of file size 10K and over have a better chance of being smaller when using the progressive JPEG format. T...
Progressive optimized images = 
Median Speed Index improvement of 7% on Cable and 15% on DSL 
Slide 7 
Patrick Meenan, Pro...
Perceived speed is more important that actual speed. 
Therefore appearing faster is better. 
It’s only logical, right? 
Sl...
Slide 9 
Only 5-7% of sites use Progressive JPEGs
Test 1: Facial Action Coding
Slide 11
Slide 12 
Original Standard image (GIF, JPEG, PNG) 
PerfectImage (PI) Lossy compressed WebP image that is degraded until t...
Slide 13
Slide 14
Slide 15
•280 respondents (50% male, 50% female) recruited online 
•9 videos tested: 3 websites X 3 image-loading methods 
•Pages w...
Slide 17
Results
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Results summary 
•Overall, highest levels of Emotion [Happiness] were evoked with PerfectImage (PI) 
•Overall, PI was stro...
Test 2: Implicit Response
Slide 29 
We react faster to congruent stimuli than to incongruent stimuli.
•462 respondents (262 female, 198 male) recruited online 
•2 different website videos X 3 different image rendering method...
Slide 31
Slide 32
Slide 33 
Pre-test 
•Both brands were measured against 24 attributes. 
Test 
•Participants then viewed video of each site ...
Results
Slide 35
Slide 36
Slide 37
When, as with the Progressive JPEG method, image rendition is a two-stage process in which an initially coarse image snaps...
Results Summary 
•Overall, strongest positive association with PerfectImage (PI) 
•For visual tasks, Original was almost a...
http://www.radware.com/neurostrata-fall2014/ 
Slide 40
http://www.webperformancetoday.com/2014/09/17/ progressive-image-rendering-good-evil/ 
Slide 41
How does this affect performance?
Questions? 
@tameverts 
@kentalstad 
Office Hour – Monday @ 14:30
Upcoming SlideShare
Loading in …5
×

Progressive JPEGs : Good? Evil? [Radware at Velocity]

5,913 views

Published on


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.

Published in: Technology

Progressive JPEGs : Good? Evil? [Radware at Velocity]

  1. 1. Progressive JPEGs Good? Evil? Tammy Everts @tameverts Kent Alstad @kentalstad Velocity Europe 2014
  2. 2. Slide 2 HTTP Archive, November 2014
  3. 3. Progressive JPEGs FTW!
  4. 4. Slide 4 Stoyan Stefanov, The Book of Speed
  5. 5. Slide 5 Stoyan Stefanov, The Book of Speed
  6. 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. 7. Progressive optimized images = Median Speed Index improvement of 7% on Cable and 15% on DSL Slide 7 Patrick Meenan, Progressive JPEGs FTW
  8. 8. Perceived speed is more important that actual speed. Therefore appearing faster is better. It’s only logical, right? Slide 8
  9. 9. Slide 9 Only 5-7% of sites use Progressive JPEGs
  10. 10. Test 1: Facial Action Coding
  11. 11. Slide 11
  12. 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. 13. Slide 13
  14. 14. Slide 14
  15. 15. Slide 15
  16. 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. 17. Slide 17
  18. 18. Results
  19. 19. Slide 19
  20. 20. Slide 20
  21. 21. Slide 21
  22. 22. Slide 22
  23. 23. Slide 23
  24. 24. Slide 24
  25. 25. Slide 25
  26. 26. Slide 26
  27. 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. 28. Test 2: Implicit Response
  29. 29. Slide 29 We react faster to congruent stimuli than to incongruent stimuli.
  30. 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. 31. Slide 31
  32. 32. Slide 32
  33. 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. 34. Results
  35. 35. Slide 35
  36. 36. Slide 36
  37. 37. Slide 37
  38. 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. 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. 40. http://www.radware.com/neurostrata-fall2014/ Slide 40
  41. 41. http://www.webperformancetoday.com/2014/09/17/ progressive-image-rendering-good-evil/ Slide 41
  42. 42. How does this affect performance?
  43. 43. Questions? @tameverts @kentalstad Office Hour – Monday @ 14:30

×