Responsive Images in Practice

on YouTube ↗25m

" summary

Practical techniques for responsive images using Picturefill versions 1 and 2, demonstrated with real-world use on the VzhůruDolů.cz blog; plus a comparison of responsive vector options, specifically SVG versus icon fonts.

AI-written summary · about

" chapters (13)

1. 0:00Responsive images intro
2. 1:10Polyfill issues history
3. 3:18Picturefill 1 limits
4. 6:31Picturefill 2 benefits
5. 7:55Image breakpoints sizes
6. 10:00Picturefill 1 vs 2
7. 13:40Picturefill 2 fixes
8. 15:48Choosing Picturefill 1 or 2
9. 17:14Generating responsive images
10. 18:17Compressive images
11. 21:28Vectors in practice
12. 22:33SVG vs icon fonts
13. 24:43Summary

" related talks

• 01h 00mResponsive ImagesPeter Miller, Yov Weiss · Edge Conference 2013 New York
• 45mResponsible Responsive ImagesMat Marquis · Mobilism 2013
• 23mA quest for responsive imagerySimon Elvery · Web Directions South 2013
• 48mResponsive Images and Art DirectionCristina Chumillas · Frontend United 2018
• 31mHandling Images on the WebMarco Otte-Witte · EmberConf 2021
• 56mIcons and the Web: Symbols of the Modern AgeTim G. Thomas · NDC London 2019
• 43mGetting serious about Responsive Web DesignArpan Chinta · Meta Refresh 2013
• 20m⚡️ FEDC 2018 - Eric PortisEric Portis · Front-End Design Conference 2018