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.

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