Advanced Image Compression - Velocity Conference Santa Clara, O'Reilly 2014

Advanced Image Compression - Velocity Conference Santa Clara, O'Reilly 2014

Image assets are still a major impediment for page load time. Despite Internet providers promising improved web performance by offering higher bandwidths on both mobile and cable, the physical limitations of connection latency deny significant improvements to website load times beyond 5Mbps client bandwidth.

While new image formats offer improved savings in bytesize, we will be working with common image formats for about another decade. Learning to work around the limitations of existing image formats to improve compression will result in significant performance gains.

We will look at lossy PNG compression and adaptive JPEG compression to reduce bytesize for these common image formats. To ensure visually acceptable results of these advanced techniques, we will discuss how to automatically calculate image SSIM scores and use them to improve compression levels.

A side by side comparison of the newly established formats WebP and JPEG XR and how to serve them to capable clients will bring us to the subject of saliency detection and how neighboring image processing disciplines such as computer vision and machine learning can help us improve compression levels by making our tools smarter in understanding actual image contents.

These advanced compression techniques will enable you to reduce bytesize of all image formats even further and improve the overall user experience and bottom line of your websites and apps.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

June 24, 2014
Tweet

Transcript

  1. Welcome'to... Advanced(Cat(Content(Compression(101

  2. I'm$Tobias

  3. Tobias'Baldauf @tbaldauf tbaldauf@akamai.com

  4. WORKshop%;)

  5. It's%all%for YOU

  6. Am#I#in#the#right#place?

  7. We#have#a#problem#...

  8. None
  9. None
  10. Workarounds • Async&loading&below&the&fold • Spri6ng • Iconfonts&&&inlined&SVG • ...&and&plenty&more

  11. No#way#around#the#heavy#li1ing

  12. Layers Binaries:)libjpeg,)pngquant,)cwebp)... Wrappers:(jpegop,m,(jpegrescan,(... GUIs:&ImageOp-m,&PNGgauntlet&...

  13. jpegop&m h"ps:/ /github.com/tjko/jpegop3m

  14. jpegop&m())strip)all())all)progressive())stdout(input.jpg(>(output)lossless.jpg

  15. BEFORE: 5.7MB EXIF%data

  16. AFTER&LOSSLESS: 5.3MB No#EXIF#data DSSIM%score:%0.000000

  17. Must!&Go!&Faster!

  18. jpegop&m())max=75())strip)all())all)progressive())stdout(input.jpg(>(output)lossy.jpg

  19. AFTER&LOSSY: 0.79MB No#EXIF#data DSSIM%score:%0.018919

  20. jpegtran Op#mize(Huffman(tables(2(ONCE

  21. jpegtran)*copy)none)*op.mize)*progressive)*outfile)output.jpg)input.jpg

  22. AFTER&JPEGTRAN: 0.79MB'('No'bytesize'change DSSIM%score:%0.000000

  23. jpegrescan h"p:/ /github.com/kud/jpegrescan Op#mize(Huffman(tables(2(OFTEN

  24. jpegrescan*+q*+s*+i*input.jpg*output.jpg

  25. AFTER&JPEGRESCAN: 0.78MB'('10kb'saved'by'math DSSIM%score:%0.000000

  26. jpegrescan beats jpegtran h"p:/ /tobias.is/geeky/webperf/progressive5jpeg5performance5op:miza:on/

  27. And$now$for$science!

  28. 700.000 pseudorandom+JPEGs

  29. None
  30. None
  31. All#compara*ve#test#were#run#on 12.000 JPEGs&for&reasons&of&VM&instability

  32. None
  33. None
  34. JPEGOp'm+JPEGRescan0median0size0reduc'on 12.0%

  35. JPEGOp'm+JPEGRescan0median0visual0difference0(DSSIM) 0.02%

  36. This%was%nice,%right?%;) Let's&hunt&for&more!

  37. Imagine(adap+ve(compression(quality(based(on Round&Trip&Times

  38. Akamai&Adap)ve&Image&Compression Awesome'for'Mobile

  39. Or#adap've#compression#quality#based#on Visual'Impact

  40. A"Binary"Search"for"acceptable"DSSIM

  41. Adap%ve(compression(based(on(visual(impact also%plays%nicely%with%other%formats%like%WebP

  42. WebP

  43. Think:'PNG8+24+JPEG+GIF+be5er'compression aka#not#made#for#HiDef#photography#or#game#engines

  44. BEFORE: 0.78MB No#EXIF#data

  45. As#WebP: 0.46MB DSSIM%score:%0.014695

  46. WebP%Browser%Support

  47. And$now$12.000x$WebP$for$science

  48. WebP%median%size%reduc0on 32.9%

  49. WebP%median%visual%difference%(DSSIM) 0.3%

  50. Be#smart#about#what's#in#the#box

  51. Adept h"p:/ /github.com/technopagan/adept3jpg3compressor

  52. None
  53. None
  54. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm

  55. None
  56. None
  57. BEFORE: 0.78MB No#EXIF#data

  58. AFTER&ADEPT: 0.77MB DSSIM%score:%0.001064

  59. None
  60. Adept&median&size&reduc0on 29.9%

  61. Adept&median&visual&difference&(DSSIM) 0.7%

  62. JPEGmini

  63. JPEGmini(median(size(reduc1on 17.2%

  64. Adept&median&visual&difference&(DSSIM) 0.4%

  65. None
  66. JPEGOp'm+Rescan:112.0%1@10.02% WebP:&32.9%&@&0.3% Adept:'29.9%'@'0.7% JPEGmini:)17.2%)@)0.4%

  67. Thanks!