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