Image Formats, Performance and Cognitive Load
summary
trivago ships 47 million images to ~9 million daily users and reports a measured 80% size reduction by combining automatic quality tuned with SSIM/Butteraugli‑style checks, format selection (WebP where beneficial, disabling JPEG XR due to CPU decode spikes), light sharpening and saturation tweaks, CDN swap plus cache prewarming, and smarter rendering: five-image preload for galleries, gravity/salience cropping, progressive‑JPEG prioritization and finally vectorized previews called squibs SVG previews that replace gray placeholders.
AI-written summary · about
chapters (27)
- 0:00Intro
- 1:45Why use images
- 3:10Image contexts
- 3:50Google IO
- 4:20Image Optimization
- 5:05Image Growth
- 5:52Image Size
- 9:06Automatic Quality
- 9:43Algorithms
- 10:22Difference Map
- 10:44S salient areas
- 12:12Image formats
- 13:34Lossy compression
- 17:35Delivery
- 19:57Intersection Observer
- 23:52Rendering
- 24:39Aspect Ratio
- 25:58Gravity
- 27:40JPEG XR
- 29:29JPEGs
- 29:56CPU Decode
- 31:12Progressive JPEGs
- 32:13HTTP2 Priority Streams
- 33:08Progressives
- 35:16Preview Images
- 35:51Conclusion
- 36:28Resources
related talks
45mA picture is worth a thousand…kilobytes.
25mDelivering Fast and Beautiful Images and Video
36mFast and Beautiful: Modern Image Delivery Techniques
44mImage Optimization for eCommerce websites
26mFast and Beautiful Modern Image Delivery Techniques
27mA primer on performance
45mThe image problem of the web and how to solve it…
48mFast and Beautiful: Modern Image Delivery Techniques