Visual Quality Assessments for High Performance Images

Images are a crucial component of all websites: they evoke emotions and prompt actions. They also make up ~66% of all website data. Key web performance metrics such as Speed Index, Time To Interact and Page Load Time suffer from our need for images. To deliver a good user experience, we have to create high performance images.

In this live-demo session, we will explore popular & bleeding-edge techniques for optimising images for performance, as used on Facebook, Etsy, Alibaba and others. These techniques will help us ship images faster, increase perceived performance and initiate users' emotional responses earlier, leading to lower bounce rates and higher conversions.

Transcript

1. Visual Quality Assessments for High Performance Images 1 / 33
2. Tobias Baldauf WebPerf Nerd at Trivago's Core Frontend Team tobias.baldauf@trivago.com @tbaldauf 2 / 33
3. The Challenge : 1 http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg 3 / 33
4. Image Growth 4 / 33
5. Fix JPEGs first! 5 / 33
6. 6 / 33
7. Original 818kb 7 / 33
8. 8 / 33
9. ImageOptim lossy 245kb 0 9 / 33
10. mozjpeg q74 225kb 2 10 / 33
11. DSSIM 11 / 33
12. 12 / 33
13. Dissimilarity Pristine vs. mozjpeg q74 0.23% 13 / 33
14. cjpeg-dssim2 14 / 33
15. cjpeg-dssim 159kb 15 / 33
16. Dissimilarity Pristine vs. cjpeg-dssim 0.42% 16 / 33
17. 2 Shortcomings :( 17 / 33
18. 1. Artifacts in irrelevant areas DSSIM-score++ :( 18 / 33
19. 2. Artifacts in highly relevant areas Visual difference despite good DSSIM score :( 19 / 33
20. Solution 1/2 Regions Of Interest Comparison 20 / 33
21. 21 / 33
22. 22 / 33
23. 23 / 33
24. Solution 2/2 Aggressive Artifacts Detection 24 / 33
25. cjpeg-ssimulacra-roi 176kb 25 / 33
26. cjpeg-dssim DSSIM: 0.42% ssimulacra: 3% 26 / 33
27. cjpeg-ssimulacra-roi DSSIM: 0.35% ssimulacra: 2.7% 27 / 33
28. 28 / 33
29. Automating JPEG quality FTW! 29 / 33
30. Regions Of Interest Similirarity Comparison saves bytes enhances quality 30 / 33
31. Thanks! 31 / 33
32. Tobias Baldauf WebPerf Nerd at Trivago's Core Frontend Team tobias.baldauf@trivago.com @tbaldauf 32 / 33