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