Advanced Image Compression Techniques - IndustryConf 2015

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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

April 22, 2015
Tweet

Transcript

  1. 1

  2. Advanced Image Compression Techniques 2

  3. 3

  4. #IndConf @tbaldauf 4

  5. 5

  6. 6

  7. 7

  8. 8

  9. 9

  10. 10

  11. 11

  12. Workarounds 12

  13. http://is.gd/rwdbook 13

  14. 14

  15. 15

  16. 2,7 MB 16

  17. 0,7 MB (26%) JPEGs 17

  18. 34p 18

  19. 19

  20. www.webpagetest.org/ getkey.php 20

  21. 21

  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

  26. 26

  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

  33. 33

  34. 34

  35. Dissimilarity: 0.13% 35

  36. ~1.5% ok 36

  37. Automate! 37

  38. cjpeg-dssim https://github.com/ technopagan/cjpeg-dssim 38

  39. 39

  40. Adaptive JPEG quality based on Round Trip Times 40

  41. 41

  42. 42

  43. 43

  44. 44

  45. MSSS http://github.com/ technopagan/mss-saliency 45

  46. 46

  47. 47

  48. 48

  49. It's coming to MozJPEG 49

  50. 50

  51. 51

  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
  54. 54

  55. 55

  56. 56

  57. 57

  58. Compress Images for great UX 58

  59. Better #WebPerf equals Increased Conversions 59

  60. 60

  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