Responsive Images

on YouTube ↗01h 00m

" summary

Images often make responsive sites slow; a utility shows up to 72% savings in some viewports. Proposed fixes are concrete: use srcset for DPR/resolution switching, picture for art direction, client‑hints or server resizing for automatic delivery, or a layered “responsive container” format that streams enhancement layers (prototype only). Watch for tradeoffs: highly compressed high‑res images blow memory and decoding, element‑query hacks delay downloads, and many variants inflate CDN cache entries. Practical today: low‑quality inline placeholders plus JS swap, progressive JPEGs, and automated server resizing.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 5:58PROPOSED (STANDARD) SOLUTIONS
3. 9:08CLIENT HINTS
4. 12:24DISADVANTAGES

" related talks

• 45mResponsible Responsive ImagesMat Marquis · Mobilism 2013
• 37mAdaptive Images for Responsive Web DesignChristopher Schmitt · HTML5.tx Texas 2013
• 48mResponsive Images and Art DirectionCristina Chumillas · Frontend United 2018
• 23mA quest for responsive imagerySimon Elvery · Web Directions South 2013
• 30mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · DevDays Europe 2019
• 36mFast and Beautiful: Modern Image Delivery TechniquesDoug Sillars · Øredev 2019
• 25mDelivering Fast and Beautiful Images and VideoDoug Sillars · WebCamp Zagreb 2018
• 45mThe image problem of the web and how to solve it…Christian Heillman · Frontend United 2016