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

Visual Quality Assessments for High Performance Images

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.

Tobias Baldauf

June 29, 2017
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. Visual Quality Assessments
    for
    High Performance Images
    1 / 33

    View Slide

  2. Tobias Baldauf
    WebPerf Nerd at
    Trivago's Core Frontend Team
    [email protected]
    @tbaldauf
    2 / 33

    View Slide

  3. The Challenge
    :
    1 http://httparchive.org/trends.php?s=All&minlabel=Mar+15+2014&maxlabel=Mar+15+2016#bytesImg&reqImg
    3 / 33

    View Slide

  4. Image Growth
    4 / 33

    View Slide

  5. Fix JPEGs first!
    5 / 33

    View Slide

  6. 6 / 33

    View Slide

  7. Original
    818kb
    7 / 33

    View Slide

  8. 8 / 33

    View Slide

  9. ImageOptim lossy
    245kb
    0
    9 / 33

    View Slide

  10. mozjpeg q74
    225kb
    2
    10 / 33

    View Slide

  11. DSSIM
    11 / 33

    View Slide

  12. 12 / 33

    View Slide

  13. Dissimilarity
    Pristine vs. mozjpeg q74
    0.23%
    13 / 33

    View Slide

  14. cjpeg-dssim2
    14 / 33

    View Slide

  15. cjpeg-dssim
    159kb
    15 / 33

    View Slide

  16. Dissimilarity
    Pristine vs. cjpeg-dssim
    0.42%
    16 / 33

    View Slide

  17. 2
    Shortcomings
    :(
    17 / 33

    View Slide

  18. 1.
    Artifacts in irrelevant areas
    DSSIM-score++
    :(
    18 / 33

    View Slide

  19. 2.
    Artifacts in highly relevant areas
    Visual difference despite good DSSIM score
    :(
    19 / 33

    View Slide

  20. Solution 1/2
    Regions Of Interest
    Comparison
    20 / 33

    View Slide

  21. 21 / 33

    View Slide

  22. 22 / 33

    View Slide

  23. 23 / 33

    View Slide

  24. Solution 2/2
    Aggressive Artifacts
    Detection
    24 / 33

    View Slide

  25. cjpeg-ssimulacra-roi
    176kb
    25 / 33

    View Slide

  26. cjpeg-dssim
    DSSIM: 0.42%
    ssimulacra: 3%
    26 / 33

    View Slide

  27. cjpeg-ssimulacra-roi
    DSSIM: 0.35%
    ssimulacra: 2.7%
    27 / 33

    View Slide

  28. 28 / 33

    View Slide

  29. Automating JPEG
    quality FTW!
    29 / 33

    View Slide

  30. Regions Of Interest
    Similirarity Comparison
    saves bytes
    enhances quality
    30 / 33

    View Slide

  31. Thanks!
    31 / 33

    View Slide

  32. Tobias Baldauf
    WebPerf Nerd at
    Trivago's Core Frontend Team
    [email protected]
    @tbaldauf
    32 / 33

    View Slide