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 full-size slide

  2. getting us here

    View full-size slide

  3. Sourcing Optimization
    Storage Render
    Delivery

    View full-size slide

  4. deliver
    render
    optimize

    View full-size slide

  5. Sourcing Render
    Optimization Delivery
    Storage

    View full-size slide

  6. Render
    Optimization
    Sourcing Storage Delivery

    View full-size slide

  7. Optimization Delivery
    Sourcing Storage Render

    View full-size slide

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

    View full-size slide

  9. Courtesy of Colin Bendell, Cloudinary

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. deliver
    render
    optimize

    View full-size slide

  15. show the
    right stuff
    fast & beautifully

    View full-size slide

  16. https://tech.trivago.com/

    View full-size slide

  17. https://jobs.trivago.com/

    View full-size slide

  18. 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 full-size slide

  19. 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 full-size slide