A picture is worth a thousand…kilobytes.
summary
99.9% of pages request at least one image and Cloudinary sees ~199 billion image requests/month, so image weight matters: examples show progressive JPEG visibly renders before AVIF/webp but AVIF often yields much smaller files at the cost of color or pattern fidelity. Concrete wins: server-side transforms (e.g. q_auto then f_auto) drop 583KB → 50KB → 18KB; tools used include Squoosh, sharp and Cloudinary; measure with Lighthouse, PageSpeed Insights and Chrome Performance Insights; never lazy-load the LCP image.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:31Image performance on the web
- 7:22Image element evolution
- 10:38Image formats: JPEG, AVIF, WebP, PNG
- 13:50Fidelity trade-offs in optimization
- 18:06Core Web Vitals and LCP
- 24:48LCP image mistakes
- 28:42Tools for image performance
- 32:18Cloudinary demo: q_auto and f_auto
- 35:08Advanced: srcset, sizes, and DPR
- 38:20Poor optimization examples
- 40:29Resources and reading
related talks
25mDelivering Fast and Beautiful Images and Video
48mFast and Beautiful: Modern Image Delivery Techniques
36mFast and Beautiful: Modern Image Delivery Techniques
20mImage Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
01h 11mMoving Pictures
37mImage Formats, Performance and Cognitive Load
30mFast and Beautiful: Modern Image Delivery Techniques
03mDelivering fast and beautiful images and video