Pro Yearly is on sale from $80 to $50! »

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. 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. None
  3. None
  4. None
  5. None
  6. getting us here

  7. Sourcing Optimization Storage Render Delivery

  8. None
  9. None
  10. deliver render optimize

  11. Sourcing Render Optimization Delivery Storage

  12. None
  13. None
  14. dssim

  15. None
  16. None
  17. None
  18. None
  19. lesson #1.

  20. None
  21. lesson #2.

  22. None
  23. lesson #3.

  24. None
  25. Render Optimization Sourcing Storage Delivery

  26. None
  27. lesson #4.

  28. None
  29. lesson #5.

  30. None
  31. lesson #6.

  32. None
  33. Optimization Delivery Sourcing Storage Render

  34. None
  35. None
  36. lesson #7.

  37. None
  38. None
  39. lesson #8.

  40. None
  41. lesson #9.

  42. None
  43. lesson #10.

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

  45. None
  46. lesson #11.

  47. Courtesy of Colin Bendell, Cloudinary

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

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

  50. lesson #12.

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

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

  54. takeaways

  55. deliver render optimize

  56. show the right stuff fast & beautifully

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

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

  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 

  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