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
6. getting us here
7. Sourcing Optimization Storage Render Delivery
10. deliver render optimize
11. Sourcing Render Optimization Delivery Storage
14. dssim
19. lesson #1.
21. lesson #2.
23. lesson #3.
25. Render Optimization Sourcing Storage Delivery
27. lesson #4.
29. lesson #5.
31. lesson #6.
33. Optimization Delivery Sourcing Storage Render
36. lesson #7.
39. lesson #8.
41. lesson #9.
43. lesson #10.
44. https://calendar.perfplanet.com/2018/dont-use-jpeg-xr-on-the-web/
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.
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/
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