Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Image Formats, Performance and Cognitive Load

Image Formats, Performance and Cognitive Load

Images are a crucial component for successful conversions: they evoke emotions, build trust and prompt action. They also form 2/3rds of our website’s weight & have a high correlation to page load time, Speed Index and Time To First Meaningful Interaction.

That’s why at trivago, we’re working towards highly optimized and well-targeted visuals. In this talk, you’ll learn how we optimize and deliver images for maximum effectiveness and which important lessons we learned along the way.

Tobias Baldauf

May 16, 2019
Tweet

More Decks by Tobias Baldauf

Other Decks in Technology

Transcript

  1. images, performance
    trivago
    TO B I A S B A L DAU F 

    TO B I A S . B A L DAU F @ T R I VAG O. CO M
    @ T B A L DAU F 

    S L I D O. CO M # D E V DAY S 2 0 1 9
    and cognitive load

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. getting us here

    View Slide

  7. Sourcing Optimization
    Storage Render
    Delivery

    View Slide

  8. View Slide

  9. View Slide

  10. deliver
    render
    optimize

    View Slide

  11. Sourcing Render
    Optimization Delivery
    Storage

    View Slide

  12. View Slide

  13. View Slide

  14. dssim

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. lesson #1.

    View Slide

  20. View Slide

  21. lesson #2.

    View Slide

  22. View Slide

  23. lesson #3.

    View Slide

  24. View Slide

  25. Render
    Optimization
    Sourcing Storage Delivery

    View Slide

  26. View Slide

  27. lesson #4.

    View Slide

  28. View Slide

  29. lesson #5.

    View Slide

  30. View Slide

  31. lesson #6.

    View Slide

  32. View Slide

  33. Optimization Delivery
    Sourcing Storage Render

    View Slide

  34. View Slide

  35. View Slide

  36. lesson #7.

    View Slide

  37. View Slide

  38. View Slide

  39. lesson #8.

    View Slide

  40. View Slide

  41. lesson #9.

    View Slide

  42. View Slide

  43. lesson #10.

    View Slide

  44. https://calendar.perfplanet.com/2018/dont-use-jpeg-xr-on-the-web/

    View Slide

  45. View Slide

  46. lesson #11.

    View Slide

  47. Courtesy of Colin Bendell, Cloudinary

    View Slide

  48. https://cloudinary.com/blog/progressive_jpegs_and_green_martians

    View Slide

  49. https://blog.cloudflare.com/parallel-streaming-of-progressive-images/

    View Slide

  50. lesson #12.

    View Slide

  51. View Slide

  52. https://github.com/axe312ger/sqip

    View Slide

  53. https://blog.cloudflare.com/parallel-streaming-of-progressive-images/

    View Slide

  54. takeaways

    View Slide

  55. deliver
    render
    optimize

    View Slide

  56. show the
    right stuff
    fast & beautifully

    View Slide

  57. https://tech.trivago.com/

    View Slide

  58. View Slide

  59. https://jobs.trivago.com/

    View Slide

  60. thank you!
    TO B I A S B A L DAU F 

    TO B I A S . B A L DAU F @ T R I VAG O. CO M
    @ T B A L DAU F 

    S L I D O. CO M # D E V DAY S 2 0 1 9
    S P E A K E R D E C K . CO M / T B A L DAU F 


    View Slide

  61. links
    DSSIM: https://github.com/kornelski/dssim
    mozjpeg: https://github.com/mozilla/mozjpeg
    SSIMULACRA: https://github.com/cloudinary/ssimulacra

    cjpeg-dssim: https://github.com/technopagan/cjpeg-dssim/

    H2 opJPEGs: https://calendar.perfplanet.com/2016/even-faster-images-using-http2-and-progressive-jpegs/

    pJPEG Streaming: https://blog.cloudflare.com/parallel-streaming-of-progressive-images/

    Bad JPEG-XR: https://calendar.perfplanet.com/2018/dont-use-jpeg-xr-on-the-web/

    Saliency Mapper: https://github.com/technopagan/mss-saliency

    Cloudinary: https://cloudinary.com/documentation
    SQIP: https://github.com/axe312ger/sqip

    View Slide