$30 off During Our Annual Pro Sale. View Details »

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.

Tobias Baldauf

June 24, 2014
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

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

    View Slide

  2. I'm$Tobias

    View Slide

  3. Tobias'Baldauf
    @tbaldauf
    [email protected]

    View Slide

  4. WORKshop%;)

    View Slide

  5. It's%all%for
    YOU

    View Slide

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

    View Slide

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

    View Slide

  8. View Slide

  9. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  15. BEFORE:
    5.7MB
    EXIF%data

    View Slide

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

    View Slide

  17. Must!&Go!&Faster!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. And$now$for$science!

    View Slide

  28. 700.000
    pseudorandom+JPEGs

    View Slide

  29. View Slide

  30. View Slide

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

    View Slide

  32. View Slide

  33. View Slide

  34. JPEGOp'm+JPEGRescan0median0size0reduc'on
    12.0%

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. WebP

    View Slide

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

    View Slide

  44. BEFORE:
    0.78MB
    No#EXIF#data

    View Slide

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

    View Slide

  46. WebP%Browser%Support

    View Slide

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

    View Slide

  48. WebP%median%size%reduc0on
    32.9%

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. View Slide

  53. View Slide

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

    View Slide

  55. View Slide

  56. View Slide

  57. BEFORE:
    0.78MB
    No#EXIF#data

    View Slide

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

    View Slide

  59. View Slide

  60. Adept&median&size&reduc0on
    29.9%

    View Slide

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

    View Slide

  62. JPEGmini

    View Slide

  63. JPEGmini(median(size(reduc1on
    17.2%

    View Slide

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

    View Slide

  65. View Slide

  66. JPEGOp'm+Rescan:112.0%[email protected]%
    WebP:&32.9%&@&0.3%
    Adept:'29.9%'@'0.7%
    JPEGmini:)17.2%)@)0.4%

    View Slide

  67. Thanks!

    View Slide