(Only MVP Supporters can
download original high-quality recordings for offline viewing.)
Eric Portis joins me to dig into the world of responsive images.
We start at the basics. Responsive images are specifically images in HTML and exist because of a desire for better performance. Images are probably the biggest culprit in the overall weight of websites. If we can avoid sending too many pixels across the network, we should. After all, a screen that is only 720 pixels wide doesn’t need a 2000 pixel wide image, even if it’s a 2x display.
The trouble is, browsers are really aggressive about downloading assets like images. That’s good, as it’s why the web (can be) as fast as it is. But is also means that we need to provide a bunch of information about our images right in the HTML. Can’t a browser just know how big an image is? Sure it can, after it has downloaded it. Can’t a browser know how big an image is going to be shown on the page? Sure it can, after it’s downloaded all the CSS and performed layout. The responsive images syntax tries to get ahead of all that by providing that information right in the syntax. Figuring out that syntax is tricky! There is srcset, sizes, and the