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.

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#...
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
31. All#compara*ve#test#were#run#on 12.000 JPEGs&for&reasons&of&VM&instability
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
54. MSSS h"p:/ /github.com/technopagan/mss3saliency Maximum'Symmetric'Surround'Saliency'Algorithm
57. BEFORE: 0.78MB No#EXIF#data
58. AFTER&ADEPT: 0.77MB DSSIM%score:%0.001064
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%
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!