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