Handling Images on the Web
summary
Overview gives concrete recommendations and data: SVGs in-DOM enable dynamic icons but can bloat JS (example treemap shows 83% of the bundle from SVGs), use tooling like Amber asset sizes GitHub Action to catch regressions, prefer SVG for stateful icons but offload large graphics. Use image formats and markup: ~30% reduction when serving WebP with a picture fallback, lazy load, async decode, explicit width/height, blurred base64 placeholders, responsive srcset/sizes, and optionally preload critical images in route/model.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:37Images on the Web
- 5:08Characteristics
- 5:49Options
- 9:07SVG
- 11:03SVG Bundles
- 11:48Template Loans
- 13:27Icons
- 14:37Static Images
- 16:08Image Tags
- 19:25Webp
- 20:59Summary
- 23:04Dynamic Images
- 24:18Loading Images
- 25:35Optimization Techniques
- 27:04Special Situations
- 29:09Conclusion
related talks
56mIcons and the Web: Symbols of the Modern Age
45mThe image problem of the web and how to solve it…
45mResponsible Responsive Images
27mA primer on performance
01h 00mResponsive Images
46mThe SVG Reality
29mSpeed Essentials: Key Techniques for Fast Websites
47mThe image problem of the web and how to solve it with AI