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
2. = WITHOUT LOSS = QUALITY 100% = IRREVERSIBLY LOSES QUALITY LOSSY LOSSLESS
3. QUALITY DEPENDS ON VIEWING CONDITIONS (CONTRAST, PIXEL SIZE)
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.
5. FLIF GIF
6. WORST LOSSY FORMAT IS STILL SMALLER THAN THE BEST LOSSLESS
7. FLIF GIF 230KB 21KB
8. GIF 21KB JPEG 20KB 30KB?
9. QUALITY FILE SIZE
10. QUALITY FILE SIZE Red Blue
11. QUALITY FILE SIZE Red Blue
12. COMPARE AT EXACTLY THE SAME FILE SIZE
13. QUALITY FILE SIZE Red Blue
14. QUALITY FILE SIZE Red Blue
15. BENCHMARK ONLY USEFUL QUALITY RANGE
16. QUALITY FILE SIZE Red Blue
17. QUALITY
18. 0 100
19. "QUALITY" SETTING IS MADE UP
21. 0 100
22. Difference 1.1 Difference 3.5
23. PSNR (dB) / MSE Peak Signal To Noise Ratio / Mean Square Error ➤ Simple per-pixel difference ➤ Inaccurate, easy to game ➤ Loves blur, hates sharpness
24. SSIM Structural Similarity ➤ Quite decent ➤ Aware of noise and edges ➤ Score is tool-dependent ➤ MS-SSIM, HVS-PSNR, Butteraugli
25. COLOR? ALPHA? ➤ Grayscale? ➤ RGB? ➤ L*a*b*? https://kornel.ski/dssim
26. LOG2DSSIM BITS PER PIXEL 0.5 1 2
31. EXPORT LOSSY ONCE OPTIMIZE LAST
32. WebP BPG libjpeg MozJPEG CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc
33. WebP BPG libjpeg MozJPEG CC BY Jon Sneyers youtu.be/YKmhZJ8H1Fc
34. MOZJPEG JPEG-ARCHIVE IMGMIN DSSIM GNUPLOT kornelski ImageOptim.com