High-quality, performant images & videos on your React website (and some AI magic!)

on YouTube ↗14m

" summary

Starts from a 64 Lighthouse score and shows concrete steps to reach about 94 by swapping plain img/video tags for the ImageKit SDK components, enabling automatic format conversion and lazy loading. Demonstrates a 10 MB video becoming ~2 MB and a GIF shrinking from 63 KB to ~21 KB, adds responsive sizes and a priority/preload hint with Next.js so LCP loads earlier, and replaces images using ImageKit generative transforms to change backgrounds or expand square assets into vertical layouts.

AI-written summary · about

" chapters (9)

1. 0:00Introduction to media optimization
2. 2:37Starting with unoptimized media
3. 4:01Replacing image and video tags
4. 6:54Responsive images with sizes attribute
5. 8:18Preloading largest content image
6. 9:44Replacing GIFs with videos
7. 11:10AI-powered background transformations
8. 13:19Generative fill for vertical images
9. 14:10Summary and Q&A

" related talks

• 32mImproving Lighthouse score for media-heavy React applicationsHarshit Budhraja · React Nexus 2025
• 26mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · You Gotta Love Frontend 2019
• 32mDelivering Native Video Experiences in React AppsHarshit Budhraja · Great International Developer Summit 2025
• 25mDelivering Fast and Beautiful Images and VideoDoug Sillars · WebCamp Zagreb 2018
• 46mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · DevFest Nantes 2018
• 48mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Mobile Era 2018
• 31mDelivering Fast and Beautiful Images and VideoDoug Sillars · FrontCon 2018
• 38mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · NDC Porto 2023