your hero images need you: save the day with http2 image loading / tobias baldauf (akamai...
TRANSCRIPT
![Page 3: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/3.jpg)
3 / 75 — [email protected]
![Page 4: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/4.jpg)
4 / 75 — [email protected]
![Page 7: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/7.jpg)
7 / 75 — [email protected]
![Page 8: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/8.jpg)
ref. http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 8 / 75 — [email protected]
![Page 9: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/9.jpg)
9 / 75 — [email protected]
![Page 18: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/18.jpg)
Thanks to Clay Smith (https://twitter.com/smithclay) for this beauty! 18 / 75 — [email protected]
![Page 19: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/19.jpg)
kudos to my team mate Lukasz Czerpak, @lukaszczerpak 19 / 75 — [email protected]
![Page 20: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/20.jpg)
kudos to my team mate Lukasz Czerpak, @lukaszczerpak 20 / 75 — [email protected]
![Page 21: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/21.jpg)
21 / 75 — [email protected]
![Page 25: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/25.jpg)
Sequential JPEG Progressive JPEG
Images taken from http://www.pixelstech.net/article/1374757887-Use-progressive-JPEG-to-improve-user-experience 25 / 75 — [email protected]
![Page 27: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/27.jpg)
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]
![Page 29: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/29.jpg)
29 / 75 — [email protected]
![Page 30: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/30.jpg)
30 / 75 — [email protected]
![Page 31: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/31.jpg)
31 / 75 — [email protected]
![Page 33: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/33.jpg)
33 / 75 — [email protected]
![Page 34: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/34.jpg)
34 / 75 — [email protected]
![Page 44: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/44.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 44 / 75 — [email protected]
![Page 45: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/45.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 45 / 75 — [email protected]
![Page 46: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/46.jpg)
ref. Pat Meenan, http://www.slideshare.net/patrickmeenan/measuring-the-visual-experience-of-website-performance 46 / 75 — [email protected]
![Page 47: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/47.jpg)
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]
![Page 49: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/49.jpg)
49 / 75 — [email protected]
![Page 50: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/50.jpg)
50 / 75 — [email protected]
![Page 51: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/51.jpg)
51 / 75 — [email protected]
![Page 53: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/53.jpg)
53 / 75 — [email protected]
![Page 54: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/54.jpg)
54 / 75 — [email protected]
![Page 55: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/55.jpg)
55 / 75 — [email protected]
![Page 57: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/57.jpg)
57 / 75 — [email protected]
![Page 58: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/58.jpg)
58 / 75 — [email protected]
![Page 59: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/59.jpg)
59 / 75 — [email protected]
![Page 61: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/61.jpg)
61 / 75 — [email protected]
![Page 62: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/62.jpg)
62 / 75 — [email protected]
![Page 65: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/65.jpg)
// 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">
65 / 75 — [email protected]
![Page 66: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/66.jpg)
66 / 75 — [email protected]
![Page 67: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/67.jpg)
67 / 75 — [email protected]
![Page 68: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/68.jpg)
68 / 75 — [email protected]
![Page 69: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/69.jpg)
69 / 75 — [email protected]
![Page 70: Your hero images need you: Save the day with HTTP2 image loading / Tobias Baldauf (Akamai Technologies)](https://reader034.vdocuments.site/reader034/viewer/2022042907/586f90581a28ab54768b7957/html5/thumbnails/70.jpg)
70 / 75 — [email protected]