Delivering Fast and Beautiful Images and Video
summary
Images account for about 50% of a page and video about 25%, and small changes give big wins: saving JPEGs at 85% quality cuts median sites by ~2.8s and ~420KB, applying SSIM/Guetzli or Cloudinary drops another 400KB; converting to WebP halves size and the median site saves ~4.1s and ~600KB (two thirds of sites aren’t using it); serve responsive variants (25KB steps) to avoid downloading 13MP photos, and enable lazy-loading (60% of sites miss it) to shave ~3.5s and ~530KB; for video, 2% fail to start and 11% are abandoned, so prefer preload=metadata, strip silent audio, and resize large background videos (examples: 33MB → 720p).
AI-written summary · about
chapters (13)
- 0:00Introduction and setup
- 1:49Impact of slow loading
- 3:38Image quality optimization
- 6:30Image format choices
- 9:01Responsive image sizing
- 12:19Lazy loading images
- 13:22Video performance challenges
- 16:30Video preload strategies
- 17:56Background video pitfalls
- 20:44Video resizing best practices
- 21:04Third-party embed issues
- 21:49Key takeaways and tools
- 22:31Q&A session
related talks
48mFast and Beautiful: Modern Image Delivery Techniques
46mFast and Beautiful Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques
31mDelivering Fast and Beautiful Images and Video
36mFast and Beautiful: Modern Image Delivery Techniques
29mSpeed Essentials: Key Techniques for Fast Websites
26mFast and Beautiful Modern Image Delivery Techniques
27mA primer on performance