SmartWeb 2016 - Bruce Lawson

on YouTube ↗34m

" summary

HTML responsive images use the picture element plus srcset and sizes (W and X descriptors) to give the browser a candidates list so it picks the best file early, preserving preloading. Browsers (Chrome/Opera, Edge, Firefox, mobile Safari) implement it; examples show average pages at 2.3 MB with 1.5 MB of images and responsive techniques cutting image payloads by ~70% (779 k → 234 k). Combine format switching to WebP (25–34% smaller) and client hints headers (Chrome/Opera) for further savings.

AI-written summary · about

" chapters (37)

1. 0:00Introduction by host
2. 0:23Responsive images overview
3. 1:30Speed matters for business
4. 2:16Images slow down the web
5. 3:02Image requests vs page weight
6. 3:45Global internet access costs
7. 4:28Image element limitations
8. 5:12Double download problem
9. 6:14Browser internals explained
10. 8:26Preloader behavior
11. 9:12Why HTML is necessary
12. 9:54Preloading performance gain
13. 10:17Inventing the picture element
14. 11:43Community collaboration
15. 13:29Browser support success
16. 14:12Main use case retina displays
17. 15:38Fallback for old browsers
18. 16:24Browser chooses best image
19. 17:08Browser knows network conditions
20. 18:11Stretchy images problem
21. 19:15CPU and battery impact
22. 19:35Proper stretchy images
23. 20:39Sizes attribute explained
24. 21:46Image format limitations
25. 22:50WebP compression benefits
26. 24:17Serving different formats
27. 25:45Picture element magic
28. 26:05Art direction use case
29. 27:11CMS integration
30. 27:59Real-world savings
31. 28:44Case study results
32. 29:47Combining techniques
33. 30:09Important fallback rules
34. 30:52Future tech preview
35. 31:13Client hints explained
36. 32:39FLIF image format
37. 33:47Summary and call to action

" related talks

• 45mThe image problem of the web and how to solve it…Christian Heillman · Frontend United 2016
• 45mResponsible Responsive ImagesMat Marquis · Mobilism 2013
• 48mResponsive Images and Art DirectionCristina Chumillas · Frontend United 2018
• 31mResponsive Images, an HTML5.1 StandardAndrea Verlicchi · CSS Day 2017
• 01h 00mResponsive ImagesPeter Miller, Yov Weiss · Edge Conference 2013 New York
• 37mAdaptive Images for Responsive Web DesignChristopher Schmitt · HTML5.tx Texas 2013
• 23mA quest for responsive imagerySimon Elvery · Web Directions South 2013
• 26mFast and Beautiful Modern Image Delivery TechniquesDoug Sillars · You Gotta Love Frontend 2019