Image Optimization

on YouTube ↗47m

" summary

JPEG stores frequency coefficients instead of pixels and progressive JPEG can render a full-feeling image from the low frequencies first. Serving the first ~15–25% of bytes of every image across connections via HTTP/2 multiplexing (implemented with Node.js streams or CDN edge workers) makes a page reach ~75% visual completion while using far less bandwidth. Use mozjpeg for best progressive compression today. For maximum size reduction, encode images as single-frame AV1 video (video “hack”) to get roughly 2× smaller files than WebP/JPEG.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 0:11Image Optimization
3. 16:08server-side
4. 24:27Edge Workers

" related talks

• 25mProgressive image renderingJosé M. Pérez · CSSConf Australia 2016
• 52mThe JPEG is dead! Long live the JPEG!Tobias Baldauf · FrOSCon 2015
• 25mProgressive Image RenderingJosé M. Pérez · Render Conference 2017
• 12mExtreme Image Optimisation: WebP & JPEG XRIdo Safruti · Velocity Europe Conference 2013
• 34mYour Hero Images Need You! Save the Day with HTTP2 Image LoadingTobias Baldauf · beyond tellerrand // DÜSSELDORF 2016
• 48mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Mobile Era 2018
• 36mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Øredev 2019
• 01h 11mMoving PicturesHenri Helvetica · SmashingConf Live 2020