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.

Dcdd7523e2e6249bcaf2a4ac19c09e8a?s=128

Tobias Baldauf

May 16, 2019
Tweet

Transcript

  1. 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
  2. 2.
  3. 3.
  4. 4.
  5. 5.
  6. 8.
  7. 9.
  8. 12.
  9. 13.
  10. 14.
  11. 15.
  12. 16.
  13. 17.
  14. 18.
  15. 20.
  16. 22.
  17. 24.
  18. 26.
  19. 28.
  20. 30.
  21. 32.
  22. 34.
  23. 35.
  24. 37.
  25. 38.
  26. 40.
  27. 42.
  28. 45.
  29. 51.
  30. 54.
  31. 58.
  32. 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 

  33. 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