your hero images need you: save the day with http2 image loading / tobias baldauf (akamai...

Your Hero Images

Need You!Save the Day with

HTTP2 Image Loading

1 / 75 — [email protected]

Tobias Baldauf@tbaldauf

[email protected]


https://twitter.com/tbaldauf

mailto:[email protected]

Show Images

FasterThan Ever


Render Meaningful Content With

25%Image Data Sent


ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — [email protected]

http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg

What Can We Do?


Get compressin'!


Compress

Aggressively


Ship Right Format


Automate Quality


Still a Heavy Load :(


We need a new form of

Aggressive Delivery!


Enter HTTP2


Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 18 / 75 — [email protected]

https://twitter.com/smithclay

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — [email protected]

kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 / 75 — [email protected]

H2 Constraints


Ingredient #1

H2 Multiplexing


Progressive JPEGs


Sequential JPEG Progressive JPEG

Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 25 / 75 — [email protected]

http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience

Scan Layers


Default Scan Layers

Thanks to Frédéric Kayser for creating 'jsk': http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo 27 / 75 — [email protected]

http://encode.ru/threads/1800-JSK-JPEG-Scan-Killer-progressive-JPEG-explained-in-slowmo

Org Cb

Y Cr28 / 75 — [email protected]

Can We Go ...

Even Faster?


1


2


3


4


5


Ingredient #2

Progressive JPEGs


How

FASTIs this Mixture?


What defines

FAST?


Speed Index


ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — [email protected]

http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance

Site A displays

7.4x fasterthan Site B

more info at https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index 47 / 75 — [email protected]

https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index

Baseline Sequentialvs.

Progressive JPEGson HTTP1.1


Progressive JPEGsvs.

Optimized pJPEGson HTTP1.1


Baseline Sequentialvs.

Progressive JPEGs

on HTTP2


Progressive JPEGsvs.

Optimized Progressive JPEGs

on HTTP2


Optimized pJPEGs on HTTP2 yield a

6% Speed Index Gain


What about

HTTP2 Server Push?


// Prioritize a progressive JPEG's metadata and scan levels// with minimal 'calm' => maximum priority<img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!0">

// Create a cumulative cascade of 'calm'// for a progressive JPEG's metadata and scan levels// Each new value is added to the sum, lowering priority per scan layer <img src="img/jpeg_opJPEG/tba/00001.jpg?bil=0!100,50,20">


Progressive Images+

HTTP2=

Win


Scan Layer Manipulation=

Better Speed Index


HTTP2 Server Push+

Optimized Scan Layers=

Awesomesauce


THANKS!


Tobias Baldauf@tbaldauf

[email protected]


https://twitter.com/tbaldauf

mailto:[email protected]

your hero images need you: save the day with http2 image loading / tobias baldauf (akamai...

Engineering