Advanced Image Compression Techniques - IndustryConf 2015

Image assets are a major impediment to page load times. Best practices for common image compression have been evangelized. To further reduce image byte size, we have to get creative: discover how to apply lossy compression to lossless formats, automatically detect good compression levels and learn how disciplines like computer vision and machine learning can help us to improve image compression.

Transcript

2. Advanced Image Compression Techniques 2
4. #IndConf @tbaldauf 4
12. Workarounds 12
13. http://is.gd/rwdbook 13
16. 2,7 MB 16
17. 0,7 MB (26%) JPEGs 17
18. 34p 18
20. www.webpagetest.org/ getkey.php 20
22. MozJPEG 22
23. speakerdeck.com/tbaldauf 23
24. Lossless: 10.5% median byte size savings for The Chronicle 24
25. Lossy at q75 19.6% 25
27. Lossy at q59 44.5% 27
28. HALFED! 28
29. q59 ?!? 29
30. JPEG Quality is void 30
31. Tool of Choice: DSSIM 31
32. Measure Dissimilarity https://github.com/ pornel/dssim 32
35. Dissimilarity: 0.13% 35
36. ~1.5% ok 36
37. Automate! 37
38. cjpeg-dssim https://github.com/ technopagan/cjpeg-dssim 38
40. Adaptive JPEG quality based on Round Trip Times 40
45. MSSS http://github.com/ technopagan/mss-saliency 45
49. It's coming to MozJPEG 49
52. Strategy 52
53. Interface Elements: CSS Icons: SVG GIF (unless multiple frames): PNG8 Chrome: WebP Internet Explorer: JPEG-XR PNG24 + Full Alpha + < 16bit: PNG8 + Full Alpha PNG24 + Full Alpha + 24bit: JPEG + Transparency [...] 53
58. Compress Images for great UX 58
59. Better #WebPerf equals Increased Conversions 59
61. Ready! Set! Go! 61
62. Install MozJPEG 62
63. Automate Worklow 63
64. Create Milestones for Image Management Strategy 64
65. Thank You! 65
66. Tobias Baldauf @tbaldauf tbaldauf@akamai.com 66