Shrink an elephant into a fly
summary
A concrete workflow for drastically reducing image payloads on a real site — from 6 MB to 315 KB — by re-exporting images to appropriate formats, optimizing with Squoosh and SVGO, and replacing GIFs by converting them to MP4 with ffmpeg or using video/webp. Graphics are rebuilt programmatically using canvas and the CSS Paint API, served with picture/img, rel=preload and img.decode(), resulting in much faster page loads and cooler-running animations.
AI-written summary · about
chapters (21)
- 0:00Introduction
- 3:13Web graphics problems
- 6:27Content vs interface
- 8:58Image formats overview
- 12:51GIF outdated
- 14:18GIF to video
- 17:32Graphics in editors
- 19:20CSS and Canvas
- 21:06CSS Paint API
- 23:12Exporting graphics
- 26:00Optimization tools
- 28:30Raster optimization
- 30:36Squoosh compression
- 32:02Inserting graphics
- 33:31Content images with img
- 35:39Background images
- 37:48Inline graphics pitfalls
- 39:14Caching graphics
- 40:37Image loading priorities
- 42:02New image APIs
- 43:06Further learning
related talks
48mShrink The Web: How To Get Happier By Removing Crap
01h 05mShrink The Web: How To Get Happier By Removing Crap
29mSpeed Essentials: Key Techniques for Fast Websites
32mComplex JS-heavy Web Apps, Avoiding the Slow
37mSVG Will Save Us
56mQuick Wins for Backend Developers
38mSVG can do that?!
28mFantastic Frontend Performance Tricks & Why We Do Them