LDNWebPerf September 2016 - Kornel Lesinski

Well compressed images are necessary for good website performance. There are lots of tools and image formats that promise improving performance, but which ones are really the best? I'm going to present best practices for lossy compression, and — in a meta twist — I'll show you tools that you can use to evaluate performance of tools for image performance. All that so you can make your images have higher quality *and* load faster at the same time.

Transcript

1. SNAKE OIL
   IN IMAGE
   COMPRESSION
   Kornel Lesiński
   London Web Performance 2016
   

   View Slide

2. =
   WITHOUT LOSS
   =
   QUALITY 100%
   =
   IRREVERSIBLY
   LOSES
   QUALITY
   LOSSY
   LOSSLESS
   

   View Slide

3. QUALITY DEPENDS
   ON
   VIEWING CONDITIONS
   (CONTRAST, PIXEL SIZE)
   

   View Slide

4. The basic idea behind
   lossy compression is that
   eyes are imperfect and
   humans don't see every
   detail, so dototε tnot oro
   too εnott to bo εoon, εon
   bo roplocod nitn o roμpn
   opproεnoton.
   

   View Slide

5. FLIF
   GIF
   

   View Slide

6. WORST LOSSY FORMAT
   IS STILL SMALLER THAN
   THE BEST LOSSLESS
   

   View Slide

7. FLIF
   GIF
   230KB
   21KB
   

   View Slide

8. GIF
   21KB
   JPEG
   20KB 30KB?
   

   View Slide

9. QUALITY
   FILE SIZE
   

   View Slide

10. QUALITY
    FILE SIZE
    Red
    Blue
    

    View Slide

11. QUALITY
    FILE SIZE
    Red
    Blue
    

    View Slide

12. COMPARE AT
    EXACTLY
    THE SAME FILE SIZE
    

    View Slide

13. QUALITY
    FILE SIZE
    Red
    Blue
    

    View Slide

14. QUALITY
    FILE SIZE
    Red
    Blue
    

    View Slide

15. BENCHMARK
    ONLY
    USEFUL QUALITY
    RANGE
    

    View Slide

16. QUALITY
    FILE SIZE
    Red
    Blue
    

    View Slide

17. QUALITY
    

    View Slide

18. 0 100
    

    View Slide

19. "QUALITY" SETTING
    IS MADE UP
    

    View Slide

20. View Slide

21. 0 100
    

    View Slide

22. Difference 1.1
    Difference 3.5
    

    View Slide

23. PSNR (dB) / MSE
    Peak Signal To Noise Ratio / Mean Square Error
    ➤ Simple per-pixel difference
    ➤ Inaccurate, easy to game
    ➤ Loves blur, hates sharpness
    

    View Slide

24. SSIM
    Structural Similarity
    ➤ Quite decent
    ➤ Aware of noise and edges
    ➤ Score is tool-dependent
    ➤ MS-SSIM, HVS-PSNR, Butteraugli
    

    View Slide

25. COLOR? ALPHA?
    ➤ Grayscale?
    ➤ RGB?
    ➤ L*a*b*?
    https://kornel.ski/dssim
    

    View Slide

26. LOG2DSSIM
    BITS PER PIXEL
    0.5 1 2
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. EXPORT LOSSY ONCE
    OPTIMIZE LAST
    

    View Slide

32. WebP BPG libjpeg MozJPEG
    CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc
    

    View Slide

33. WebP BPG libjpeg MozJPEG
    CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc
    

    View Slide

34. MOZJPEG
    JPEG-ARCHIVE
    IMGMIN
    DSSIM
    GNUPLOT kornelski
    ImageOptim.com
    

    View Slide