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. 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
Progressive optimized images = Median Speed Index improvement of 7% on Cable and 15% on DSL
Slide 7
Patrick Meenan, Progressive JPEGs FTW
Perceived speed is more important that actual speed.
Therefore appearing faster is better.
It’s only logical, right?
Slide 8
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
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
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 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
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 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
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 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
Slide 31
Slide 32
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.
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 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
“ ”
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
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